Laravel + PrimeVue Datatables

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:

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 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 [email protected] instead of using the issue tracker.

Credits

• Sam Maosa
• All Contributors

License

The MIT License (MIT). Please see License File for more information.