- Creating Columns
- Relationships
- Available Methods
- Other Column Types
- Column Selection
- Secondary Header
- Footer
- Reusable Columns
- Anonymous Columns
- Introduction
- Date Filters
- DateRange Filters
- DateTime Filters
- Multi-Select Dropdown Filters
- Multi-Select Filters
- NumberRange Filters
- Number Filters
- Select Filters
- Text Filters
- Refreshing
- Loading Placeholder
- Multiple Tables Same Page
- Adding Custom Markup
- Debugging
- Saving Table State
- Lifecycle Hooks
Getting Started
Usage
DataTable
Columns
Rows
Sorting
Pagination
Search
Bulk Actions
Filters
Filter Types
Reordering
Secondary Header
Footer
Examples
Misc.
Sponsored
Advanced Usage
Examples
🎉 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 on the left/at the top. Check your current version with the following command:
composer show rappasoft/laravel-livewire-tables
DateRange Filters
DateRange Filters
DateRange filters are Flatpickr based components, and simply filtering by a date range. If you would like to more smoothly filter your query by a start and end date, you can use the DateRangeFilter:
1use Rappasoft\LaravelLivewireTables\Views\Filters\DateRangeFilter;2 3public function filters(): array4{5 return [6 DateRangeFilter::make('Verified Period'),7 ];8}
DateRange filters have configs to set earliestDate and latestDate, to allow/disallow input, to set the input format, to set a placeholder value, display format, plus Filter Pills labels
1public function filters(): array 2{ 3 return [ 4 DateRangeFilter::make('EMail Verified Range') 5 ->config([ 6 'allowInput' => true, // Allow manual input of dates 7 'altFormat' => 'F j, Y', // Date format that will be displayed once selected 8 'ariaDateFormat' => 'F j, Y', // An aria-friendly date format 9 'dateFormat' => 'Y-m-d', // Date format that will be received by the filter10 'earliestDate' => '2020-01-01', // The earliest acceptable date11 'latestDate' => '2023-08-01', // The latest acceptable date12 'placeholder' => 'Enter Date Range', // A placeholder value13 ])14 ->setFilterPillValues([0 => 'minDate', 1 => 'maxDate']) // The values that will be displayed for the Min/Max Date Values15 ->filter(function (Builder $builder, array $dateRange) { // Expects an array.16 $builder17 ->whereDate('users.email_verified_at', '>=', $dateRange['minDate']) // minDate is the start date selected18 ->whereDate('users.email_verified_at', '<=', $dateRange['maxDate']); // maxDate is the end date selected19 }),20 ];21}
Configuration
By default, this filter will use a CDN to include the Flatpickr JS Library and CSS. However, you can customise this behaviour using the configuration file.
Option 1 - The default CDN behaviour:
1'published_third_party_assets' => false,2'remote_third_party_assets' => true,
Option 2 - Publish included version
You may publish the included version of Flatpickr. To do so, run:
1php artisan vendor:publish --tag=livewire-tables-public
This will publish the tested version of Flatpickr to your public directory. You should then set
1'published_third_party_assets' => true,2'remote_third_party_assets' => false,
Option 3 - Locally Installed
If you have a locally installed version of Flatpickr already, you can set both options to false, and your local version will be used instead.
1'published_third_party_assets' => false,2'remote_third_party_assets' => false,