Not rendering Grid Layout [Bug]:

[fuzailhassan]

What happened?

Grid Layout is not rendering when toggled.

How to reproduce the bug

When I click Toggle Layout button it does not change the layout to Grid but stay in table layout.

Package Version

1.2

PHP Version

8.2

Laravel Version

10.8.4

Which operating systems does with happen with?

Windows

Notes

No response

[fuzailhassan]

Here is the GIF for understanding.

[tgeorgel]

Hi @fuzailhassan,

Would you mind sharing the code you are using to define the table ?

[fuzailhassan]

Sure public static function getGridTableColumns(): array { return [ Tables\Columns\TextColumn::make('name') ->searchable(), Tables\Columns\TextColumn::make('investment_amount') ->searchable(), Tables\Columns\TextColumn::make('daily_profit') ->searchable(), Tables\Columns\TextColumn::make('weekly_profit') ->searchable(), Tables\Columns\TextColumn::make('monthly_profit') ->searchable(), Tables\Columns\IconColumn::make('capital_back') ->boolean(), Tables\Columns\TextColumn::make('number_of_months') ->numeric() ->sortable(), Tables\Columns\IconColumn::make('featured') ->boolean(), ]} public static function table(Table $table): Table { $livewire = $table->getLivewire(); return $table ->columns( $livewire->isGridLayout() ? static::getGridTableColumns() : static::getListTableColumns() ) ->contentGrid( fn () => $livewire->isListLayout() ? null : [ 'md' => 2, 'lg' => 3, 'xl' => 4, ] ) }

[tgeorgel]

Thanks for sharing, there is no issue from the plugin here. The plugin allow to switch between two layouts, however you must still design your grid table using Stack and Split components, as described in the Filament documentation.

Here might be an example for your getGridTableColumns() configuration :

    public static function getGridTableColumns(): array
    {
        return [
            // Make sure to stack your columns in a layout to make them responsive
            Tables\Columns\Layout\Stack::make([

                Tables\Columns\TextColumn::make('name')->searchable(),
                Tables\Columns\TextColumn::make('investment_amount')->searchable(),

                // You may group columns together using the Split layout, so they are displayed on the same line
                Tables\Columns\Layout\Split::make([
                    Tables\Columns\TextColumn::make('daily_profit')
                        ->description(__('Daily Profit'), position: 'above')   // use the description method to get nice labels above your field
                        ->searchable(),

                    Tables\Columns\TextColumn::make('weekly_profit')
                        ->description(__('Weekly Profit'), position: 'above')
                        ->searchable(),
                ]),

                Tables\Columns\Layout\Split::make([
                    Tables\Columns\TextColumn::make('monthly_profit')
                        ->description(__('Monthly Profit'), position: 'above')
                        ->searchable(),

                    Tables\Columns\TextColumn::make('number_of_months')
                        ->description(__('Nbr. of months'), position: 'above')
                        ->searchable(),
                ]),

                Tables\Columns\Layout\Split::make([
                    Tables\Columns\IconColumn::make('capital_back')
                        ->description(__('Capital_back'), position: 'above')
                        ->boolean(),

                    Tables\Columns\IconColumn::make('featured')
                        ->description(__('Featured'), position: 'above')
                        ->boolean(),
                ]),
            ])->space(3)->extraAttributes([
                'class' => 'pb-2',
            ]),
        ];
    }