Skip to main content

​
Configuration File

Laravel Livewire Tables provides extensive configuration options through the config/livewire-tables.php file. Publish the configuration file using: 
php artisan vendor:publish --tag=livewire-tables-config

​
Configuration Options

​
Theme

The CSS framework theme used to render the tables.
​
theme
string
default:"tailwind"
The theme determines which CSS classes are applied to table elements. Supported values:
  • tailwind - Tailwind CSS styling
  • bootstrap-5 (aliases: bootstrap5, bootstrap)
  • bootstrap-4 (alias: bootstrap4)
'theme' => 'tailwind',

​
Primary Color Palette

Customize the primary color used across all table components including buttons, checkboxes, pagination, filter badges, and selection bars.
​
colors
array
default:"Teal preset"
Define colors for shades 50, 100, 200, 400, 500, 600, and 700. These map to CSS custom properties --lt-primary-50 through --lt-primary-700. Works identically for both Tailwind and Bootstrap themes.
Available Presets: 
'colors' => [
    '50' => '#f0fdfa',
    '100' => '#ccfbf1',
    '200' => '#99f6e4',
    '400' => '#2dd4bf',
    '500' => '#14b8a6',
    '600' => '#0d9488',
    '700' => '#0f766e',
],

​
Dark Mode

Enable dark mode support for data tables. When enabled, the package injects CSS that automatically styles tables for dark backgrounds whenever the configured selector is present on a parent element.
​
dark_mode.enabled
bool
default:"false"
Whether dark mode CSS is injected into the page
​
dark_mode.selector
string
default:".lt-dark"
The CSS selector that activates dark mode. Common choices:
  • .dark - Tailwind default
  • .lt-dark - Package default
  • [data-bs-theme=dark] - Bootstrap 5.3
  • body.dark-mode - Custom selector
​
dark_mode.colors
array
Customize the dark mode color palette:
  • bg - Page/outer background
  • bg-card - Card/panel/table container background
  • bg-subtle - Subtle backgrounds (thead, stripes, hover)
  • border - Borders and dividers
  • text - Primary text color
  • text-muted - Secondary/muted text color
Available Dark Mode Presets: 
'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

The debounce time in milliseconds for the search input. This delays the search request until the user stops typing for the given time.
​
search_debounce
int
default:"300"
Recommended: 300-500 milliseconds for a smooth user experience without excessive server requests
'search_debounce' => 300,

​
Component Namespace

The subdirectory inside app/Livewire/ where the make:livewiretable command will generate new table components.
​
component_namespace
string
default:"Tables"
Examples:
  • "Tables" generates in app/Livewire/Tables/
  • "DataTables" generates in app/Livewire/DataTables/
  • "Admin/Tables" generates in app/Livewire/Admin/Tables/
'component_namespace' => 'Tables',

​
Component Configuration

In addition to the global configuration file, each table component can override settings in its configure() method. See the Methods Reference for all available configuration methods.

​
Example Component Configuration

use Livewire\Tables\Livewire\DataTableComponent;

class UsersTable extends DataTableComponent
{
    public function configure(): void
    {
        $this->setDefaultPerPage(25)
            ->setPerPageOptions([10, 25, 50, 100])
            ->setSearchDebounce(500)
            ->setDefaultSortDirection('desc')
            ->setEmptyMessage('No users found');
    }

    public function query(): Builder
    {
        return User::query();
    }

    public function columns(): array
    {
        return [
            Column::make('Name', 'name')->searchable()->sortable(),
            Column::make('Email', 'email')->searchable(),
            Column::make('Created', 'created_at')->sortable(),
        ];
    }
}

​
Per-Component Theme Override

You can set a specific theme for an individual component by passing it during mount: 
<livewire:users-table table-theme="bootstrap-5" />
Or set it as a property in your component: 
class UsersTable extends DataTableComponent
{
    public string $tableTheme = 'bootstrap-5';
}

Build docs developers (and LLMs) love

Get started for freeTalk to us