Datatable Frontend & Scaffolding

This page covers getting a datatable onto a page: scaffolding the class, dropping it into a view, and loading its assets. See the Datatables overview for columns, filters, actions, and export.

Scaffold a datatable

Generate a datatable class with the make:datatable command, naming the table and the model it lists:

# Provide the model up front
php artisan make:datatable Users --model=User

# Or be prompted for the model
php artisan make:datatable Users

# Overwrite an existing class
php artisan make:datatable Users --model=User --force

Options:

• --model / -m — the model the table lists. A bare name like User resolves to App\Models\User; omit it and you'll be prompted.
• --force / -f — overwrite an existing datatable class.

The generated class lives under App\Livewire\Datatables with empty query(), columns(), actions(), and filters() methods ready to fill in:

namespace App\Livewire\Datatables;

use Illuminate\Database\Eloquent\Builder;
use Redot\Datatables\Actions\ActionGroup;
use Redot\Datatables\Datatable;

class Users extends Datatable
{
    public function query(): Builder
    {
        return \App\Models\User::query();
    }

    public function columns(): array
    {
        return [
            // ...
        ];
    }

    public function actions(): array
    {
        return ActionGroup::auto([
            // ...
        ]);
    }

    public function filters(): array
    {
        return [];
    }
}

Render it on a page

A datatable is a Livewire component, so mount it with Livewire's tag syntax. Public properties pass through as attributes:

<livewire:datatables.users />

Assets

The package ships plain JS and CSS — there's no build step or npm publish. redot:publish copies them to public/vendor/redot/datatables with the rest of the Redot assets, and the table injects them automatically the first time one renders. The scripts expect the dashboard's globals: jQuery, Bootstrap dropdowns, Livewire, and the helpers from functions.js — confirmable actions prompt through warnBeforeAction, and non-GET actions submit through formRequest (which reads the CSRF token from the layout's csrf-token meta tag). See the Asset & Init System for how front-end assets are served.

The script exposes its helpers as window.Datatables — the package views consume them (the Alpine components behind the root card, the select-page checkbox, and the action click handling) instead of inlining the logic. If you publish and customize the views, reuse the same helpers: Datatables.table() and Datatables.pageSelection() for the Alpine state, and Datatables.confirmed() / Datatables.submit() / Datatables.url() / Datatables.invoke() for action behavior.

Customizing the markup and strings

Publish the package's views or translations to override them:

# Blade views -> resources/views/vendor/redot/datatables
php artisan vendor:publish --tag=redot::datatables-views

# Translations -> lang/vendor/redot
php artisan vendor:publish --tag=redot::datatables-lang

All built-in labels, placeholders, and messages are localizable through the published translation files.

Related

• Datatables overview
• Asset & Init System
• Components overview