Hydrat-Agency / filament-table-layout-toggle

Filament plugin providing a toggle button for tables, allowing users to switch between Grid and Table layout.
MIT License
26 stars 3 forks source link

[Bug]: Errors on Laravel 11.11.1 with filament 3.2.92 #7

Open milenmk opened 1 week ago

milenmk commented 1 week ago

What happened?

There are 2 errors:

First: After following the installation as stated here, https://filamentphp.com/plugins/tgeorgel-table-layout-toggle, I got an error:

Call to a member function persistLayoutInLocalStorage() on string

removing ->defaultLayout() removes the error, but:

Then I got this error:

Method App\Filament\Admin\Resources\UsersResource::getListTableColumns does not exist.

Adding

public static function getListTableColumns(): array; public static function getGridTableColumns(): array;

returns an error:

Non-abstract method App\Filament\Admin\Resources\UsersResource::getListTableColumns() must contain body

How to reproduce the bug

Install the latest Laravel and Filament

The exact PHP version is 8.2.14

Package Version

1.2.4

PHP Version

8.2.14

Laravel Version

11.11.1

Which operating systems does with happen with?

Windows

Notes

no notes

tgeorgel commented 1 week ago

Hi @milenmk

When the documentation state that you should have thoses methods on your class :

public static function getListTableColumns(): array;
public static function getGridTableColumns(): array;

It means you need to define your table schema for both layouts. For example, let's say you are displaying basic info about your user. For the standard "table" shema (usually on desktop) you'll want something like this :

public static function getListTableColumns(): array
{
   return [
      Tables\Columns\TextColumn::make('name')->searchable(),
      Tables\Columns\TextColumn::make('email'),
   ];
}

Then, for the "grid" layout (usually on mobile) you'll want to read the Filament documentation about layout. So, you'll want to build the grid layout inside your getGridTableColumns() method :

public static function getGridTableColumns(): array
{
   return [
      Tables\Columns\Layout\Stack::make([
           Tables\Columns\TextColumn::make('name')->searchable(),           
           Tables\Columns\TextColumn::make('email'),
      ]),
   ];
}

For more example, please read this answer.

Thanks!

milenmk commented 1 week ago

Ok. That is clear and I have it working now. However, I still got:

Call to a member function persistLayoutInLocalStorage() on string

The only way to fix it is to completely remove ->defaultLayout('list') which is a problem because I prefer the default layout to be list

P.S.: After looking at the code, I found out that I should use setDefaultLayout(), not defaultLayout so this may be an error in the docs.

chrisscalzo commented 1 week ago

I also got the error when trying the plugin last night.

Call to a member function persistLayoutInLocalStorage() on string

I changed to setDefaultLayout('list') and its not throwing the error any longer.

Unfortunately I'm still having the same issue that this OP @milenmk is and I'm not able to see the grid view. I have defined getGridTableColumns using the code above:

public static function getGridTableColumns(): array
{
   return [
      Tables\Columns\Layout\Split::make([
           Tables\Columns\TextColumn::make('name')->searchable(),           
           Tables\Columns\TextColumn::make('email'),
      ]),
   ];
}

and its still not working for me. When I click the grid action in the table header it just pauses and the screen flashes but the grid doesn't render.

milenmk commented 1 week ago

Try:


Tables\Columns\Layout\Stack::make([
    Tables\Columns\Layout\Split::make([
           Tables\Columns\TextColumn::make('name')->searchable(),           
           Tables\Columns\TextColumn::make('email'),
      ]),
])
tgeorgel commented 1 week ago

I can confirm there is a typo in the documentation on Filament Website, and ->setDefaultLayout('grid') should be used, instead of defaultLayout().

You can read the Github documentation for the latest version : https://github.com/Hydrat-Agency/filament-table-layout-toggle

@chrisscalzo You're saying that it is not working, two options :

  1. Make sure your table function is using the code displayed in the documentation
  2. Make sure your grid layout columns are stacked using the Stack column, otherwise the grid layout can not happen (This is a core Filament feature, the plugin only helps switching the layout)