- Making Columns
- Built-in searching
- Built-in sorting
- Built-in cell formatting
- Conditional columns
- User column selection
- Secondary Header Functionality
- Footer Functionality
- Misc. Functionality
Getting Started
Usage
Columns
The Query
Row
Bulk Actions
Filters
Customizing
Display
🎉 Enjoying this package? Consider sponsoring me on GitHub or buying me a beer.
This is the documentation for v1 but the latest version is v3. You can switch versions in the menu on the left/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-config2 3php artisan vendor:publish --provider="Rappasoft\LaravelLivewireTables\LaravelLivewireTablesServiceProvider" --tag=livewire-tables-views4 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<?php2 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 purge configuration:
1module.exports = {2 mode: 'jit',3 purge: [4 ...5 './vendor/rappasoft/laravel-livewire-tables/resources/views/tailwind/**/*.blade.php',6 ],7 ...8};
Other
You must also make sure you have this Alpine style available globally:
1<style>2 [x-cloak] { display: none !important; }3</style>