Livewire Datatable with Filter and Sort Options
Tech Stack: bootstrap-5, livewire
Demo
Datatables with Search and Filters
You can filter the data by searching for name/price/description, also use
sorting and pagination.
| Title | Description | Price |
|---|---|---|
| Amazon Basics In-Ear | 10.99 | |
| Apple Airpods | 79.99 | |
| Apple Airpods Pro | 249 | |
| Beats Earbuds | 35.63 | |
| Beats Solo3 | 170.49 | |
| Bose SoundSport | 99 | |
| Cowin E7 | 59.99 | |
| Cowin E7 | 59.99 | |
| Cowin E7 | 59.99 | |
| Noot Kids K11 | 14.99 |
Code
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Sorry, this component's code is restricted
Get Livewiredemos-Pro
Usage
@livewire('data-table-component')
Documentation
This component uses Computed Properties provided by Livewire to calculate the Query for the Products to be listed in the table.
This computed property is then again passed to another computed property which paginates the Results.
Computed Properties act as Watchers of Vue.js, which intelligently re-calculates the property whenever any of its dependency changes.