Responsive Layout

Hide overflowing columns on narrow viewports and show their values in an expandable row. Works with the shipped themes (Tailwind, DaisyUI, Flux).

• Enabling Responsive Layout
• Methods
• Customizing CSS Styles

Enabling Responsive Layout

Add PowerGrid::responsive() in setUp().

app/Livewire/ProductTable.php

use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Facades\PowerGrid; 

class ProductTable extends PowerGridComponent
{
    public function setUp(): array
    {
        return [
            PowerGrid::responsive(), 
        ];
    }
}

Methods

PowerComponents\Turbine\Components\SetUp\Responsive, returned by PowerGrid::responsive():

Method	Description
fixedColumns(string ...$columnNames)	Columns that stay visible. Replaces the default list. Default: id, checkbox, actions.
sortOrder(string|array ...$columnNames)	Hide priority. Lower numbers stay visible longer. Pass names in order, or ['field' => int].

Match field or dataField. The actions column is also recognized as actions. A column with fixedOnResponsive() stays visible regardless of fixedColumns().

app/Livewire/ProductTable.php

public function setUp(): array
{
    return [
        PowerGrid::responsive() 
            ->fixedColumns('checkbox', 'name', 'actions')
            ->sortOrder('calories', 'price', 'name'),
    ];
}

PowerGrid::responsive()
    ->sortOrder(['calories' => 1, 'price' => 2, 'name' => 3]);

Customizing CSS Styles

Hidden-cell content is copied into the expand row with these classes:

resources/css/app.css

.responsive-row-expand-container {}

.responsive-row-expand-item-container {}

.responsive-row-expand-item-name {}

.responsive-row-expand-item-value {}