Filament•2y ago

Split and Stack table layout issue.

Adding ->description() or ->url() to TextColumn breaks the layout. Is there any fix for this? I want to use custom url for headings.

Tables\Columns\Layout\Split::make([
Tables\Columns\ViewColumn::make('domain')
  ->view('filament.tables.columns.favicon')
  ->grow(false),

  Tables\Columns\Layout\Stack::make([
    Tables\Columns\TextColumn::make('headline')
      ->url('https://example.com'),

    Tables\Columns\TextColumn::make('url'),
  ]),
])->from('md'),

Tables\Columns\Layout\Split::make([
Tables\Columns\ViewColumn::make('domain')
  ->view('filament.tables.columns.favicon')
  ->grow(false),

  Tables\Columns\Layout\Stack::make([
    Tables\Columns\TextColumn::make('headline')
      ->url('https://example.com'),

    Tables\Columns\TextColumn::make('url'),
  ]),
])->from('md'),

11 Replies

Dennis Koch•2y ago

Can you check the HTML why it breaks?

DarpanOP•2y ago

There are lots of <a href="https://domain.test/admin/news/5968/edit" class="filament-tables-record-url-link flex-1 block py-3"></a> links even if I add custom ->url(), removing flex-1 and block from these hyperlinks fix the layout, but I think when we use custom url, these hyperlinks should be removed? And why there are lots of them? attached screenshot is for only of one row.

Dennis Koch•2y ago

Try setting the getTableRecordUrl() you return null on ListPage

DarpanOP•2y ago

protected function getTableRecordUrlUsing(): ?Closure
{
  return null;
}

protected function getTableRecordUrlUsing(): ?Closure
{
  return null;
}

this worked, thanks!

Unknown User•2y ago

Message Not Public

Samus_Aran•12mo ago

I am also having this issue. Specifying an url() for a table column breaks the layout with split. I also added getTableRecorUrlUsing() to my List Page file, but this didn't fix it.

DrByte•12mo ago

Please provide your code.

Samus_Aran•12mo ago

@DrByte

// In PageResource.php

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Split::make([
                Tables\Columns\TextColumn::make('name')
                    ->url(fn (Page $record): string => route('pages.show', ['page' => $record])),
                Tables\Columns\TextColumn::make('updated_at'),
            ])
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ]);
}

// In PageResource.php

public static function table(Table $table): Table
{
    return $table
        ->columns([
            Split::make([
                Tables\Columns\TextColumn::make('name')
                    ->url(fn (Page $record): string => route('pages.show', ['page' => $record])),
                Tables\Columns\TextColumn::make('updated_at'),
            ])
        ])
        ->actions([
            Tables\Actions\EditAction::make(),
        ]);
}

Samus_Aran•12mo ago

Samus_Aran•12mo ago

Removing the call of ->url() fixes the issue:

DrByte•12mo ago

It seems that adding the ->url() to it inserts CSS for group/item and group-hover/item:underline group-focus-visible/item:underline ... which don't seem to be defined anywhere. Could that be part of the problem? ie: Filament is implementing css class markup for classes that don't exist ... thus whatever it was "expecting" to do differently, it can't? Component which outputs css selectors when $url is set: https://github.com/filamentphp/filament/blob/f7b7fc55b35beb4f8b05de79c437a3c4eae91790/packages/tables/resources/views/columns/text-column.blade.php#L146-L165 These images are the diff for the column when ->url() is used vs not used.

GitHub

filament/packages/tables/resources/views/columns/text-column.blade....

A collection of beautiful full-stack components for Laravel. The perfect starting point for your next app. Using Livewire, Alpine.js and Tailwind CSS. - filamentphp/filament

Gaming

Programming

Split and Stack table layout issue.