Usage Overview

Create a Livewire page component that extends AbstractListingComponent:

<?php

namespace App\Livewire;

use App\Http\Resources\UserResource;
use App\Models\User;
use Illuminate\Database\Eloquent\Builder;
use Trinetus\LivewireDatatables\Components\ActionButton;
use Trinetus\LivewireDatatables\Components\BatchAction;
use Trinetus\LivewireDatatables\Components\Column;
use Trinetus\LivewireDatatables\Components\ColumnFormatters\DateTimeFormatter;
use Trinetus\LivewireDatatables\Components\ColumnFormatters\StringFormatter;
use Trinetus\LivewireDatatables\Components\FilterTypes\TextFieldType;
use Trinetus\LivewireDatatables\Enums\VariantType;
use Trinetus\LivewireDatatables\Livewire\AbstractListingComponent;

class UsersDatagrid extends AbstractListingComponent
{
    public string $sortColumn = 'name';

    protected function datagridName(): string
    {
        return 'users-datagrid';
    }

    protected function pageTitle(): string
    {
        return 'Users';
    }

    protected function viewPath(): string
    {
        return 'livewire.users-datagrid';
    }

    protected function eloquentModel(): string
    {
        return User::class;
    }

    protected function resourceTransformer(): string
    {
        return UserResource::class;
    }

    protected function columnsConfig(): array
    {
        return [
            new Column('id', 'ID', StringFormatter::class, true, false, true),
            new Column('name', 'Name', StringFormatter::class, true, true, true),
            new Column('email', 'Email', StringFormatter::class, true, true, true),
            new Column('created_at', 'Created at', DateTimeFormatter::class, true, false, true),
        ];
    }

    protected function actionButtons(): array
    {
        return [
            new ActionButton(
                VariantType::OUTLINE_INFO->value,
                'Edit',
                'bi bi-pencil',
                routeName: 'users.edit',
                routeParams: ['id'],
            ),
        ];
    }

    protected function filters(): array
    {
        return [
            new TextFieldType('email', 'Email', 'filterEmail'),
        ];
    }

    protected function batchActions(): array
    {
        return [
            new BatchAction('deactivate', VariantType::WARNING->value, 'Deactivate selected'),
        ];
    }

    protected function filterEmail(Builder $query): void
    {
        if (! empty($this->activeFilters['email'])) {
            $query->where('email', 'like', '%'.$this->activeFilters['email'].'%');
        }
    }

    protected function doBatchActionDeactivate(array $selectedRows): void
    {
        User::query()->whereKey($selectedRows)->update(['active' => false]);
    }
}

Create the resource used by resourceTransformer():

<?php

namespace App\Http\Resources;

use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;

class UserResource extends JsonResource
{
    public function toArray(Request $request): array
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'email' => $this->email,
            'created_at' => $this->created_at,
        ];
    }
}

Create the Livewire page view at resources/views/livewire/users-datagrid.blade.php:

<div>
    <h1>Users</h1>

    <livewire:livewire-datatables::datagrid
        tableId="users-datagrid"
        :actionButtons="$this->actionButtons()"
        :batchActions="$this->batchActions()"
        :columnsConfig="$this->columnsConfig()"
        :filters="$this->filters()"
        :$columnsVisibility
        :$activeFilters
        :$page
        :$pageLimit
        :$pagesTotal
        :$pageScreenSize
        :$rows
        :$rowsTotal
        :$searchText
        :$sortColumn
        :$sortDirection
    />
</div>

Register the page route. For Livewire 4 projects, prefer the Livewire route helper:

use App\Livewire\UsersDatagrid;
use Illuminate\Support\Facades\Route;

Route::livewire('/users', UsersDatagrid::class)->name('users.index');

For Livewire 3 projects, use the class-based route form:

use App\Livewire\UsersDatagrid;
use Illuminate\Support\Facades\Route;

Route::get('/users', UsersDatagrid::class)->name('users.index');