I'm currently available for full time hire! Inquire Here

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 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

Including Assets

Package Specific Code

This package now makes use of several external files, one for AlpineJS methods, and one for Custom Styling. In addition, Flatpickr is separately bundled with the package, and used for the DateRange Filter. These can be independently enabled/disabled.

Injection (Default)

The package will automatically inject the relevant two files into your layout as part of the render process. This is the default behaviour, and mimics that of Livewire 3.0

Configuration

This is enabled by default, but to re-enable, enable the following options in the livewire-tables configuration file, to enable automatic injection:

 1 
 2/**
 3 * Enable or Disable automatic injection of core assets
 4 */
 5'inject_core_assets_enabled' => true,
 6 
 7/**
 8 * Enable or Disable automatic injection of third-party assets
 9 */
10'inject_third_party_assets_enabled' => true,

Changing Script Path

You can change the path used by customising the script_base_path option in the configuration file:

1/**
2 * Customise Script & Styles Paths
3 */
4'script_base_path' => '/rappasoft/laravel-livewire-tables',

Bundler Including

If you'd prefer to bundle the included JS and CSS files with your choice of bundler, this is provided by two files that can be included in your bundler (e.g. app.js)

Include Code (For Bundler)

To include only Core functions (Includes JS & CSS):

1import '../../vendor/rappasoft/laravel-livewire-tables/resources/imports/laravel-livewire-tables.js';

To include both Core and Third Party (Flatpickr) Libraries (Includes JS & CSS):

1import '../../vendor/rappasoft/laravel-livewire-tables/resources/imports/laravel-livewire-tables-all.js';

Configuration

Update the following options in the livewire-tables configuration file, to disable automatic injection:

 1 
 2/**
 3 * Enable or Disable automatic injection of core assets
 4 */
 5'inject_core_assets_enabled' => false,
 6 
 7/**
 8 * Enable or Disable automatic injection of third-party assets
 9 */
10'inject_third_party_assets_enabled' => false,
11 
12/**
13 * Enable Blade Directives (Not required if automatically injecting or using bundler approaches)
14 */
15'enable_blade_directives ' => false,

Blade Directives

There are several blade directives available, as defined below. You only need to use these if you are not using either of the above methods. You must ensure that you disable asset injection in the config/livewire-tables.php file, enable the blade directives, and that you have not added the scripts or styles to your bundler:

 1 
 2/**
 3 * Enable or Disable automatic injection of core assets
 4 */
 5'inject_core_assets_enabled' => false,
 6 
 7/**
 8 * Enable or Disable automatic injection of third-party assets
 9 */
10'inject_third_party_assets_enabled' => false,
11 
12/**
13 * Enable Blade Directives (Not required if automatically injecting or using bundler approaches)
14 */
15'enable_blade_directives ' => true,

To use these in your views/blades:

 1<!-- Adds the Core Table Styles -->
 2@rappasoftTableStyles
 3 
 4<!-- Adds any relevant Third-Party Styles (Used for DateRangeFilter (Flatpickr) and NumberRangeFilter) -->
 5@rappasoftTableThirdPartyStyles
 6 
 7<!-- Adds the Core Table Scripts -->
 8@rappasoftTableScripts
 9 
10<!-- Adds any relevant Third-Party Scripts (e.g. Flatpickr) -->
11@rappasoftTableThirdPartyScripts