Configuration

Contents:

• Global Configuration
• Table Key
• Translations
• Color Palette
• Per-Table Configuration
• Available Methods
• Lifecycle Hooks

Global Configuration

Publish the config file:

php artisan vendor:publish --tag=livewire-tables-config

This creates config/livewire-tables.php:

return [
    'theme' => 'tailwind',
    'colors' => [
        '50'  => '#f0fdfa',
        '100' => '#ccfbf1',
        '200' => '#99f6e4',
        '400' => '#2dd4bf',
        '500' => '#14b8a6',
        '600' => '#0d9488',
        '700' => '#0f766e',
    ],
    'dark_mode' => [
        'enabled' => false,
        'selector' => 'lt-dark',
        'colors' => [
            'bg' => '#0f172a',
            'bg-card' => '#1e293b',
            'bg-subtle' => '#334155',
            'border' => '#334155',
            'text' => '#f1f5f9',
            'text-muted' => '#94a3b8',
        ],
    ],
    'search_debounce' => 300,
    'component_namespace' => 'Tables',
];

Available Themes

'theme' => 'tailwind',
'theme' => 'bootstrap5',
'theme' => 'bootstrap4',

Table Key

Each table uses a tableKey to isolate its state (filters, search, sorting, pagination) in the session. By default, the key is derived from the class name.

When rendering multiple instances of the same table component in one view, assign a unique table-key to each one:

<livewire:tables.users-table table-key="users-active" />
<livewire:tables.users-table table-key="users-archived" />

You can also pass it dynamically:

<livewire:tables.users-table :table-key="'users-' . $section" :table-theme="$theme" />

Or set it directly in the component class:

class UsersTable extends DataTableComponent
{
    public string $tableKey = 'users';
}

If you don't set table-key, all instances of the same component will share state via session.

Translations

The package includes translations for 14 languages:

Publish translations to customize them:

php artisan vendor:publish --tag=livewire-tables-translations

Files will be copied to lang/vendor/livewire-tables/.

For dark mode setup and activation methods, see Dark Mode.

Color Palette

The colors key defines the primary color used across all table UI elements: buttons, checkboxes, pagination, filter badges, selection bar, sort icons, etc.

These map to CSS custom properties --lt-primary-50 through --lt-primary-700 and work identically for both Tailwind and Bootstrap themes.

Presets

Example: Switch to Indigo

'colors' => [
    '50'  => '#eef2ff',
    '100' => '#e0e7ff',
    '200' => '#c7d2fe',
    '400' => '#818cf8',
    '500' => '#6366f1',
    '600' => '#4f46e5',
    '700' => '#4338ca',
],

CSS Override

You can also override the colors via CSS without changing the config:

:root {
    --lt-primary-50: #eef2ff;
    --lt-primary-100: #e0e7ff;
    --lt-primary-200: #c7d2fe;
    --lt-primary-400: #818cf8;
    --lt-primary-500: #6366f1;
    --lt-primary-600: #4f46e5;
    --lt-primary-700: #4338ca;
}

Scoped Override

Apply a different color to a specific table:

.custom-table {
    --lt-primary-600: #db2777;
    --lt-primary-700: #be185d;
}

<div class="custom-table">
    <livewire:users-table />
</div>

Per-Table Configuration

Override the configure() method in your table component:

public function configure(): void
{
    $this->setDefaultPerPage(25);
    $this->setPerPageOptions([10, 25, 50, 100, 250]);
    $this->setSearchDebounce(500);
    $this->setDefaultSortDirection('desc');
    $this->setEmptyMessage('No records found.');
}

Available Methods

Pagination

Search

Sorting

When a column is sorted for the first time, it uses this direction. Subsequent clicks cycle: initial → opposite → clear.

Empty State

Falls back to the translation key livewire-tables::messages.no_results.

Table Styling

$this->setRowClass(fn($row) => $row->priority === 'high' ? 'bg-red-50' : '');

Filter Styling

Toolbar Button Styling

When not set, buttons use the theme's default classes.

Lifecycle Hooks

Execution Order

mount() → configure() → build() → query() → columns() → filters() → Engine::process() → render()

On subsequent Livewire requests:

boot() → configure() → query() → Engine::process() → render()