Laravel Livewire Tables Documentation
Sponsors Demo Support

Edit

🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.

This is the documentation for v2 but the latest version is v3. You can switch versions in the menu at the top. Check your current version with the following command:

composer show rappasoft/laravel-livewire-tables

Configuration

Publishing Assets

Publishing assets are optional unless you want to customize this package.

Note: I don't recommend you publishing the views unless you really need to change them, and if so, only keep the ones you are changing. Let the package display the rest. The views change quite often and you will miss out on new features or have unforeseeable issues.

1php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-config
2 
3php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-views
4 
5php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-translations

The default frontend framework is Tailwind, but you also have the option to use Bootstrap 4 or Bootstrap 5 by specifying in the config file.

This is the contents of the published config file:

1<?php
2 
3return [
4    /**
5     * Options: tailwind | bootstrap-4 | bootstrap-5.
6     */
7    'theme' => 'tailwind',
8];

Tailwind Purge

If you find that Tailwind's CSS purge is removing styles that are needed, you have to tell Tailwind to look for the table styles so it knows not to purge them.

In your tailwind.config.js configuration:

 1// V2
 2module.exports = {
 3    mode: 'jit',
 4    purge: [
 5        ...
 6        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
 7    ],
 8    ...
 9};
10 
11// V3
12module.exports = {
13    content: [
14        ...
15        './vendor/rappasoft/laravel-livewire-tables/resources/views/**/*.blade.php',
16    ],
17    ...
18};

Tailwind Dark Mode

If you find that the table is consistently displaying in Dark Mode, then you will need to add the following into your tailwind.config.js configuration, keeping in mind that this could impact other components using dark mode!

1module.exports = {
2    darkMode: 'class', // This specifies that Tailwind should look at Class elements to determine dark mode
3...
4};

Alpine.js Cloak

You must also make sure you have this Alpine style available globally:

1<style>
2    [x-cloak] { display: none !important; }
3</style>