savannabits / primevue-datatables
Easy Laravel Server-Side implementation of PrimeVue Datatables
Installs: 5 572
Dependents: 1
Suggesters: 0
Security: 0
Stars: 27
Watchers: 1
Forks: 20
Open Issues: 10
Requires
- php: ^7.4|^8.0|^8.1
- illuminate/support: ^8.0|^9.0|^10
Requires (Dev)
- orchestra/testbench: ^6.0|^7.0
- phpunit/phpunit: ^9.0
This package is auto-updated.
Last update: 2024-10-20 11:24:56 UTC
README
This is a simple, clean and fluent serve-side implementation of PrimeVue Datatables in Laravel.
Features
- Global Search including searching in relationships up to a depth of 3, e.g
author.user.name
- Per-Column filtering out of the box
- Column Sorting with direction toggling
- Pagination with a dynamic
no. or records per page
setting - Fully compatible with PrimeVue Datatable
Installation
You can install the package via composer:
composer require savannabits/primevue-datatables
Usage
Server Side
It is as simple as having this in your index()
function of your controller:
public function index(Request $request): JsonResponse { $list = PrimevueDatatables::of(Book::query())->make(); return response()->json([ 'success' => true, 'payload' => $list, ]); }
Required Query Parameters
The server-side implementation uses two parameters from your laravel request object to perform filtering, sorting and pagination: You have to pass the following parameters as query params from the client:
- Searchable Columns (Passed as
searchable_columns
) - Used to specify the columns that will be used to perform the global datatable search - Dt Params (Passed as
dt_params
) - This is the main Datatable event object as received from PrimeVue. See Lazy Datatable documentation for more details
Client Side:
Here is a gist of a Fully Working Vue3 + Tailwindcss component for the client side.
Go through PrimeVue's Lazy Datatable documentation for details on frontend implementation.
Here is an example of your loadLazyData()
implementation:
const loadLazyData = async () => { loading.value = true; try { const res = await axios.get('/api/books',{ params: { dt_params: JSON.stringify(lazyParams.value), searchable_columns: JSON.stringify(['title','author.name','price']), }, }); records.value = res.data.payload.data; totalRecords.value = res.data.payload.total; loading.value = false; } catch (e) { records.value = []; totalRecords.value = 0; loading.value = false; } };
Testing
composer test
Changelog
Please see CHANGELOG for more information what has changed recently.
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email maosa.sam@gmail.com instead of using the issue tracker.
Credits
License
The MIT License (MIT). Please see License File for more information.