This is a simple, clean and fluent serve-side implementation of PrimeVue Datatables in Laravel.
- 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 pagesetting - Fully compatible with PrimeVue Datatable
You can install the package via composer:
composer require savannabits/primevue-datatablesIt 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,
]);
}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
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;
}
};composer testPlease see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
The MIT License (MIT). Please see License File for more information.