https://github.com/savannabits/primevue-datatables
Easy Laravel Server-Side implementation of PrimeVue Datatables
https://github.com/savannabits/primevue-datatables
datatables laravel php primevue primevue-datatables primevue-laravel server-side
Last synced: over 1 year ago
JSON representation
Easy Laravel Server-Side implementation of PrimeVue Datatables
- Host: GitHub
- URL: https://github.com/savannabits/primevue-datatables
- Owner: savannabits
- License: mit
- Created: 2021-09-13T16:51:24.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-03-25T14:46:08.000Z (over 2 years ago)
- Last Synced: 2025-04-02T14:11:15.888Z (over 1 year ago)
- Topics: datatables, laravel, php, primevue, primevue-datatables, primevue-laravel, server-side
- Language: PHP
- Homepage:
- Size: 54.7 KB
- Stars: 30
- Watchers: 1
- Forks: 20
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Laravel + PrimeVue Datatables
[](https://packagist.org/packages/savannabits/primevue-datatables)
[](https://packagist.org/packages/savannabits/primevue-datatables)
This is a simple, clean and fluent serve-side implementation of [PrimeVue Datatables](https://primefaces.org/primevue/showcase/#/datatable) in [Laravel](https://laravel.com/).
## 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:
```bash
composer require savannabits/primevue-datatables
```
## Usage
### Server Side
It is as simple as having this in your `index()` function of your controller:
```php
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:
1. Searchable Columns **(Passed as `searchable_columns`)** - Used to specify the columns that will be used to perform the global datatable search
2. Dt Params **(Passed as `dt_params`)** - This is the main Datatable event object as received from PrimeVue. See [Lazy Datatable](https://primefaces.org/primevue/showcase/#/datatable/lazy) documentation for more details
### Client Side:
**Here is a gist of a [Fully Working Vue3 + Tailwindcss component](https://gist.github.com/coolsam726/f156daa5b36a7a8217526eb82bcaa798) for the client side**.
Go through [PrimeVue's Lazy Datatable](https://primefaces.org/primevue/showcase/#/datatable/lazy) documentation for details on frontend implementation.
Here is an example of your `loadLazyData()` implementation:
```ts
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
```bash
composer test
```
### Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
### Security
If you discover any security related issues, please email maosa.sam@gmail.com instead of using the issue tracker.
## Credits
- [Sam Maosa](https://github.com/savannabits)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.