¶Livewire + Flux UI client

The Livewire client is server-driven: grid state lives in the component, and the protocol request is built and answered on the server during render. It uses Flux UI for chrome and inlines the theme automatically.

¶Install

composer require elyra/datagrid-livewire
php artisan vendor:publish --tag=elyra-datagrid-lang   # optional (translations)

Requires Livewire 3.5+/4 and Flux UI.

¶Anatomy

Extend the abstract DataGrid component. Implement definition() (server source) and columns() (display config); optionally aggregates().

<?php

namespace App\Livewire;

use Elyra\DataGrid\Livewire\DataGrid;
use Elyra\DataGrid\Server\Grid;
use Elyra\DataGrid\Server\GridDefinition;
use Livewire\Attributes\Layout;

#[Layout('components.layouts.app')]
class SalesGrid extends DataGrid
{
    public string $heading = 'Sales';

    // Features (toggle on/off)
    public bool $sortable    = true;
    public bool $filterable  = true;   // filter row + facet dropdowns
    public bool $searchable  = true;
    public bool $selectable  = true;
    public bool $groupable   = true;
    public bool $editable    = true;
    public string $editMode  = 'slideover';  // 'inline' | 'modal' | 'slideover'
    public bool $exportable  = true;
    public bool $masterDetail = false;
    public int $perPage      = 20;

    // Theme
    public string $accent = '';          // '' = follow app; or 'emerald', etc.

    protected function definition(): GridDefinition
    {
        return Grid::table('sales')->connection('elyrasql')->key('id')
            ->columns(['id', 'store_id', 'region', 'category', 'sku'])
            ->column('status', editable: true, editor: 'select',
                rules: 'required|in:pending,paid,shipped,delivered,returned')
            ->column('qty', type: 'number', editable: true, rules: 'required|integer|min:0')
            ->column('revenue', type: 'number', editable: true, rules: 'required|numeric')
            ->column('margin', type: 'number')
            ->searchable(['sku', 'category']);
    }

    protected function columns(): array
    {
        return [
            ['field' => 'sku', 'header' => 'SKU', 'frozen' => true, 'cell' => ['type' => 'link', 'href' => '/orders/{id}']],
            ['field' => 'region', 'header' => 'Region'],
            ['field' => 'category', 'header' => 'Category'],
            ['field' => 'status', 'header' => 'Status', 'editable' => true, 'editor' => 'select', 'options' => [
                ['value' => 'pending', 'label' => 'pending'],
                ['value' => 'paid', 'label' => 'paid'],
            ], 'badges' => ['pending' => 1, 'paid' => 2, 'shipped' => 3, 'delivered' => 4, 'returned' => 5]],
            ['field' => 'qty', 'header' => 'Qty', 'type' => 'number', 'editable' => true, 'editor' => 'number'],
            ['field' => 'revenue', 'header' => 'Revenue', 'type' => 'number', 'editable' => true, 'editor' => 'number', 'cell' => ['type' => 'currency', 'symbol' => 'kr ', 'decimals' => 2]],
            ['field' => 'margin', 'header' => 'Margin', 'type' => 'number', 'cell' => ['type' => 'bar', 'max' => 1200]],
        ];
    }

    protected function aggregates(): array
    {
        return [
            ['field' => 'revenue', 'fn' => 'sum', 'as' => 'sum_revenue'],
            ['field' => 'margin', 'fn' => 'sum', 'as' => 'sum_margin'],
        ];
    }
}

// routes/web.php
Route::get('/sales', App\Livewire\SalesGrid::class);

¶Feature properties

¶Notes

• The theme CSS is inlined once per page via @include('elyra-datagrid::styles') inside the component view — no build step needed.
• Editing, facets, grouping and paging all call the server package directly; totals/aggregates are cached per filter within the component lifecycle.
• Keyboard navigation & cell selection are provided via Alpine (bundled with Livewire/Flux).

See the guides for editing, grouping, filtering, and theming.