[Bug]: Header bar containing search and toggle button disappear

[gmed2b]

What happened?

I just found this plugin and wanted to give it a try. I'm in a standalone configuration, I mainly use Filament with Livewire as standalone (outside panels).

So, I've installed the package following Installation guide, published the configuration file as mentioned and configured the table.

public function getListTableColumns(): array
{
    return [...];
}

public function getGridTableColumns(): array
{
    return [
        Stack::make([
            Split::make([
                TextColumn::make('productVersion.name')
                    ->description(__('Product'), position: 'above'),
                TextColumn::make('productVersion.reference')
                    ->description(__('Reference'), position: 'above'),
            ])
        ])
    ];
}

public function table(Table $table): Table
{
  return $table
    ->query(...)
    ->actions([...])
    ->bulkActions([...]）
    ->headerActions([...])
    ->columns(
        $this->isGridLayout()
        ? $this->getGridTableColumns()
        : $this->getListTableColumns()
    ->contentGrid(
        fn () => $this->isListLayout()
        ? null
        : [
            'md' => 2,
            '1g' => 3,
            'xl' => 4,
        ]
    );
}

At this stage, everything went good, but as soon as I toggle the grid layout, the header bar containing the button and search input disappear :/

How to reproduce the bug

Install the package and follow standalone configuration.

composer require hydrat/filament-table-layout-toggle

php artisan vendor:publish --tag="table-layout-toggle-config"

Add the HasToggleableTable trait to a Livewire component.

Package Version

2.0.0

PHP Version

8.3

Laravel Version

11.19.0

Which operating systems does with happen with?

macOS

Notes

Developping using Laravel Herd.

[gmed2b]

Update : I've found out that if we add a column with either searchable() or toggleable methods, it trigger the search input to be visible and also the layout.

if their is no methods that as a corresponding button in that area the layout button do not appear.

Hope that help !

[tgeorgel]

Hi @gmed2b

So by adding ->searchable() to one of your Grid Layout column it makes the bar appearing again in grid mode, right ?

Thanks for reporting this, I'll have a look to force the bar to trigger display when the table contains a toggle.

Cheers!

[gmed2b]

Hi @gmed2b

So by adding ->searchable() to one of your Grid Layout column it makes the bar appearing again in grid mode, right ?

Thanks for reporting this, I'll have a look to force the bar to trigger display when the table contains a toggle.

Cheers!

Hi, yes exactly, the toggle is not visible by itself.

[tgeorgel]

Thanks @gmed2b, happy it works for you now! Will try to make this appears by default.

[gmed2b]

@tgeorgel Thank you, I also have another suggestion, idk if i need to open antoher issue, but i've installed this package to add responsiveness in my app, it would be great if their were a way to auto toggle between list or grid depending on a breakpoint.

I've search and found the changeLayoutView method, i've been trying to listen to resize window with alpine and livewire but i'm struggling :/ Do you have any idea how to achieve this ?

Thank you

[tgeorgel]

I made this plugin specifically for responsiveness, so I would say the idea is good.

I actually don't know if we can capture the width size of the window with alpine in order to trigger the toggle event : I'll have a look.

[gmed2b]

All right, thank. I'll check aswell