Skip to main content

​
Requirements

Before installing Laravel Livewire Tables, ensure your environment meets the following requirements:
DependencyVersion
PHP8.1, 8.2, 8.3, or 8.4
Laravel10.x, 11.x, or 12.x
Livewire3.x or 4.x
Alpine.jsIncluded with Livewire
The package is fully tested across 9 different PHP/Laravel/Livewire combinations to ensure compatibility.

​
Install via Composer

Install the package using Composer: 
composer require alp-develop/laravel-livewire-tables
The package uses Laravel’s auto-discovery feature, so the service provider will be registered automatically. No manual configuration is required to get started.

​
Tailwind CSS Setup

If you’re using the Tailwind CSS theme (the default), you need to add one CSS rule to prevent Alpine.js flicker: 
[x-cloak] { display: none !important; }
Add this rule to your main CSS file (e.g., resources/css/app.css).
Without this CSS rule, you may see a brief flash of unstyled content when the table loads.
Bootstrap themes do not require this rule — Alpine.js handles visibility automatically through Livewire.

​
Bootstrap Setup

To use Bootstrap instead of Tailwind CSS, publish the configuration file and change the theme setting:

​
Bootstrap 5

// config/livewire-tables.php
'theme' => 'bootstrap-5',
// or use the alias:
'theme' => 'bootstrap',

​
Bootstrap 4

// config/livewire-tables.php
'theme' => 'bootstrap-4',
Make sure Bootstrap CSS is loaded in your layout file. The package does not include Bootstrap CSS.

​
Publishing Assets

​
Publish Configuration File

Publish the configuration file to customize theme, colors, search debounce, and more: 
php artisan vendor:publish --tag=livewire-tables-config
This creates config/livewire-tables.php with the following default settings: 
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',
];
The colors configuration works identically for both Tailwind and Bootstrap themes, making it easy to maintain a consistent brand color across your application.

​
Publish Views (Optional)

Publish the view templates if you need to customize the table markup: 
php artisan vendor:publish --tag=livewire-tables-views
Views will be copied to resources/views/vendor/livewire-tables/.

​
Publish Translations (Optional)

Publish translation files to customize or add new languages: 
php artisan vendor:publish --tag=livewire-tables-lang
Translations will be copied to lang/vendor/livewire-tables/. Included languages:
  • English (en)
  • Spanish (es)
  • Portuguese (pt)

​
Color Customization

The package uses a primary color palette that can be customized in the config file. Here are some preset color palettes: 
'colors' => [
    '50'  => '#f0fdfa',
    '100' => '#ccfbf1',
    '200' => '#99f6e4',
    '400' => '#2dd4bf',
    '500' => '#14b8a6',
    '600' => '#0d9488',
    '700' => '#0f766e',
],

​
Dark Mode Setup

Enable dark mode support by updating the configuration: 
'dark_mode' => [
    'enabled' => true,
    'selector' => '.dark', // or '.lt-dark', '[data-bs-theme=dark]', etc.
    'colors' => [
        'bg' => '#0f172a',
        'bg-card' => '#1e293b',
        'bg-subtle' => '#334155',
        'border' => '#334155',
        'text' => '#f1f5f9',
        'text-muted' => '#94a3b8',
    ],
],
The package will automatically apply dark mode styles when the configured selector is present on a parent element.
Common selectors: .dark (Tailwind default), .lt-dark, [data-bs-theme=dark] (Bootstrap 5.3), or body.dark-mode.

​
Compatibility Matrix

The package is tested across multiple PHP, Laravel, and Livewire versions:
PHPLaravelLivewireTestbench
8.110.x3.x8.x
8.210.x3.x8.x
8.211.x3.x9.x
8.311.x3.x9.x
8.211.x4.x9.x
8.311.x4.x9.x
8.212.x4.x10.x
8.312.x4.x10.x
8.412.x4.x10.x
The package includes 184 tests with 479 assertions to ensure reliability across all supported versions.

​
Next Steps

Now that you’ve installed the package, you’re ready to create your first data table:

Quick Start

Create your first table in 5 minutes

Configuration

Learn about all configuration options

Build docs developers (and LLMs) love

Get started for freeTalk to us