LaravelLivewireTablesAdvancedFilters

Advanced filters for Rappasoft Laravel Livewire Tables v2.0 and above

• Numeric Range Filter
• Date Range Filter
• Date Picker Filter
• Smart Select (Select2 Style)
• Component Filter (Under Development)

Demo Available Here: https://tabledemo.lowerrocklabs.com/

Package is currently under active development & testing, please use caution when using in a production environment.

Configuration

Please see the Wiki for detailed configuration options and examples.

Current Status

| Filter | Tailwind 3 | Tailwind 2 | Bootstrap 4 | Bootstrap 5 | | :--- | :---: | :---: | :---: | :---: | | Number Range | ✓ | ✓ | ✓ | ✓ | | Date Range | ✓ | ✓ | ✓ | ✓ | | Date/Time Picker | ✓ | ✓ | ✓ | ✓ | | SmartSelect | ✓ | ✓ | ✓
(Styling Improvements) | ✓
(Styling Improvements) | | Component Filter | Testing | Testing | ✗ | ✗ |

Laravel Support

| Version | Supported | | :---: | :---: | | 8 | ✓ | | 9 | ✓ | | 10 | ✓ |

Installation

This package is available to be installed via Composer

The Filters

Filter classes should be in your table's head in the same way as existing filters.

Numeric Range Filter

Filter with a configurable Minimum/Maximum value, provides two values to the filter() function

| | |

Date Filters

There are two filters, one is a standard single-date picker (DatePickerFilter), and the other is a range filter (DateRangeFilter)

Date Range Filter

Flatpickr Filter with a configurable Minimum/Maximum value, provides two values to the filter() function () in the form of an array.

Date Picker Filter

Flatpickr Filter with a configurable Minimum/Maximum value, provides one values to the filter() function

| | | |

SmartSelect Filter

A Select2 style Filter built in AlpineJS. This takes a list of potential options, and allows the end-user to filter them on-the-fly, and select appropriate values.

Other Notes

This package makes several on-the-fly adjustments to the default toolbar blade, including:

• Customisable width of the filter menu Set the following value in the configuration file. You may pass any valid width class/selectors to this field. 'customFilterMenuWidth' => 'md:w-80',
• Filter menu will lock open until you click to close the menu

Publishing Assets

CSS

You may publish these to your public path using:

Lang

Views

Please exercise restraint when publishing the views, as this package is in active development!