Easy Laravel Server-Side implementation of PrimeVue Datatables

Overview

Laravel + PrimeVue Datatables

Latest Version on Packagist Total Downloads GitHub Actions

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:

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

License

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

Comments
  • Fixed support for HasOne relationships when sorting

    Fixed support for HasOne relationships when sorting

    In the original code, line 128 is as follows: $ownerKey = $relationship->getOwnerKeyName();

    However, HasOne relationship instances don't have a getOwnerKeyName method.

    opened by kevinwheeler 1
  • Support for pgsql ilike

    Support for pgsql ilike

    I've added case insensitive support for postgres queries. Mysql like's are case insensitive by default, but for postgres we have to use ILIKE operator to achieve that.

    opened by lchris44 0
  • how to pass parameters from laravel to this package

    how to pass parameters from laravel to this package

    hi , i am trying to use this package for my prime vue front end . i am receiving the data like below :

    {"global":{"value":"test","matchMode":"contains"},"name":{"value":"cis","matchMode":"contains"},"status":{"value":"123","matchMode":"equals"},"abbreviation":{"value":"","matchMode":"equals"},"services":{"value":"","matchMode":"contains"},"primary-pm":{"value":"","matchMode":"equals"},"primary-engineer":{"value":"","matchMode":"equals"}}
    

    andd from url url :

    {{baseUrl}}/customers?filters=%7B%22global%22:%7B%22value%22:%22test%22,%22matchMode%22:%22contains%22%7D,%22name%22:%7B%22value%22:%22cis%22,%22matchMode%22:%22contains%22%7D,%22status%22:%7B%22value%22:%22123%22,%22matchMode%22:%22equals%22%7D,%22abbreviation%22:%7B%22value%22:%22%22,%22matchMode%22:%22equals%22%7D,%22services%22:%7B%22value%22:%22%22,%22matchMode%22:%22contains%22%7D,%22primary-pm%22:%7B%22value%22:%22%22,%22matchMode%22:%22equals%22%7D,%22primary-engineer%22:%7B%22value%22:%22%22,%22matchMode%22:%22equals%22%7D%7D
    

    and in my controller i have this :

     $list = PrimevueDatatables::of(Customer::query())->make();
            dd($list);
    

    i want to know how should i pass the $request->get('filters') that i can use this package for filters . thanks in advance

    opened by farshadff 0
  • change local filters support boolean false value for checkbox filter

    change local filters support boolean false value for checkbox filter

    Local filter does not seem support for value boolean especially for false / 0 value. for example when user has checkbox filter with true / false value. This issue is solved by using !== comparison for the value.

    opened by str4wh4t 0
  • Problem in sorting many to many relations

    Problem in sorting many to many relations

    Hi. I get this error when trying to sort a column in my table which is loading from a many to many relationship.

    Call to undefined method Illuminate\Database\Eloquent\Relations\BelongsToMany::getOwnerKeyName() /vendor/laravel/framework/src/Illuminate/Support/Traits/ForwardsCalls.php line 71

    I tracked it and looks like method getOwnerKeyName() does not exist in belongsToMany relations take a look at /vendor/savannabits/primevue-datatables/src/PrimevueDatatables.php:128

    opened by AbolfazlAkhtari 0
  • Feature Request: Match casing and accent

    Feature Request: Match casing and accent

    Hi, I would like to be able to enable or disable casing. In postgres this can be done easily changing from LIKE to ILIKE also I would like to ignore accents on searchs if that is possible. Do you think you would be able to implement this or do you need some help?

    opened by Rubens10010 0
  • Relationship with json column seems not to work when filtering and searching

    Relationship with json column seems not to work when filtering and searching

    Hi! Thanks for your work. I am trying to use json column with Laravel but I encountered some small issue with the json column relationships.

    I have this set of data, notice the name is inside the json datatype column image

    User.php

    public function country()
    {
        return $this->belongsTo(Country::class);
    }
    

    Index.vue

    const params = {
      params: {
        dt_params: JSON.stringify(lazyParams.value),
        searchable_columns: JSON.stringify(['name', 'email', 'country.data.name']),
      }
    }
    

    Unfortunately, it return this error when I load the datatable

    Call to undefined relationship [data] on model [App\\Models\\Country].
    

    Thanks.

    opened by aerrata 0
Releases(v1.4.0)
  • v1.4.0(Dec 30, 2022)

    What's Changed

    • Support for pgsql ilike by @lchris44 in https://github.com/savannabits/primevue-datatables/pull/10
    • Fixed support for HasOne relationships when sorting by @kevinwheeler in https://github.com/savannabits/primevue-datatables/pull/12

    New Contributors

    • @kevinwheeler made their first contribution in https://github.com/savannabits/primevue-datatables/pull/12

    Full Changelog: https://github.com/savannabits/primevue-datatables/compare/v1.3.2...v1.4.0

    Source code(tar.gz)
    Source code(zip)
  • v1.3.2(Mar 24, 2022)

    What's Changed

    • Update README.md by @coolsam726 in https://github.com/savannabits/primevue-datatables/pull/7
    • Update README.md by @coolsam726 in https://github.com/savannabits/primevue-datatables/pull/8

    Full Changelog: https://github.com/savannabits/primevue-datatables/compare/v1.3.1...v1.3.2

    Source code(tar.gz)
    Source code(zip)
  • v1.3.1(Mar 24, 2022)

    What's Changed

    • change local filters support boolean false value for checkbox filter by @str4wh4t in https://github.com/savannabits/primevue-datatables/pull/6

    New Contributors

    • @str4wh4t made their first contribution in https://github.com/savannabits/primevue-datatables/pull/6

    Full Changelog: https://github.com/savannabits/primevue-datatables/compare/v1.3.0...v1.3.1

    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Feb 23, 2022)

    What's Changed

    • Update composer.json by @coolsam726 in https://github.com/savannabits/primevue-datatables/pull/3

    Full Changelog: https://github.com/savannabits/primevue-datatables/compare/v1.2.0...v1.3.0

    Source code(tar.gz)
    Source code(zip)
  • v1.2.0(Nov 22, 2021)

    What's Changed

    • Added functionality to support also filterDisplay=menu by @lchris44 in https://github.com/savannabits/primevue-datatables/pull/2

    New Contributors

    • @lchris44 made their first contribution in https://github.com/savannabits/primevue-datatables/pull/2

    Full Changelog: https://github.com/savannabits/primevue-datatables/compare/v1.1.0...v1.2.0

    Source code(tar.gz)
    Source code(zip)
  • v1.0.1(Sep 30, 2021)

  • v1.0.0(Sep 13, 2021)

  • v0.1.0(Sep 13, 2021)

Owner
Savannabits
We love code, and we love sharing it with the world.
Savannabits
Server-side handler of DataTables Jquery Plugin for Laravel 4

Project is not being maintained actively. You will most likely find a better more actively maintained fork here https://github.com/yajra/laravel-datat

Bilal Gultekin 264 Jul 2, 2022
DataTables server-side for CodeIgniter, supported both for CodeIgniter 3 and CodeIgniter 4.

CodeIgniter DataTables DataTables server-side for CodeIgniter, supported both for CodeIgniter 3 and CodeIgniter 4. Note: This library only handle the

Nur Muhammad 14 Dec 15, 2022
Livewire DataTables components for back-end. Modular, easy to use, with tons of features.

Livewire DataTables Livewire DataTables components for back-end. Modular, easy to use, with tons of features. Inspired by Caleb's Livewire Screencasts

Amir Rami 8 Jul 27, 2022
jQuery DataTables API for Laravel 4|5|6|7|8

jQuery DataTables API for Laravel 4|5|6|7|8 This package is created to handle server-side works of DataTables jQuery Plugin via AJAX option by using E

Arjay Angeles 4.5k Jan 9, 2023
Laravel 8 + CoreUI + Livewire + Datatables (CRUD)

Laravel 8 + CoreUI + Livewire + Datatables About Laravel 8 + CoreUI + Livewire Datatables Whats Inside Laravel Core UI - (https://github.com/HZ-HBO-IC

Muhammad Rheza Alfin 38 Nov 3, 2022
Laravel Datatables Package Demo App

#Laravel Datatables Demo App Datatables Package for Laravel 4|5 This package is created to handle server-side works of DataTables jQuery Plugin via AJ

Arjay Angeles 139 Dec 23, 2022
Laravel 8 + CoreUI + Livewire + Datatables (CRUD)

Laravel 8 + CoreUI + Livewire + Datatables About Laravel 8 + CoreUI + Livewire Datatables Whats Inside Laravel Core UI - (https://github.com/HZ-HBO-IC

Muhammad Rheza Alfin 38 Nov 3, 2022
⚡ PowerGrid generates Advanced Datatables using Laravel Livewire.

?? Documentation | ?? Features | ⌨️ Get started Livewire ⚡ PowerGrid ⚡ PowerGrid creates modern, powerful and easy to customize Datatables based on La

Power Components ⚡ 962 Jan 2, 2023
This package was created to deal with laravel datatables and cruds using vuejs.

datatable-cruds Installation This package was created to deal with laravel datatables and cruds using vuejs. Install the package through Composer. Run

Osama Saad 9 Dec 19, 2022
Data Table package with server-side processing, unlimited exporting and VueJS components

Data Table package with server-side processing, unlimited exporting and VueJS components. Quickly build any complex table based on a JSON template.

Laravel Enso 618 Dec 28, 2022
Jetstrap is a lightweight laravel 8 package that focuses on the VIEW side of Jetstream / Breeze package installed in your Laravel application

A Laravel 8 package to easily switch TailwindCSS resources generated by Laravel Jetstream and Breeze to Bootstrap 4.

null 686 Dec 28, 2022
The University of Arizona Libraries will no longer provide support for Guide on the Side.

The University of Arizona Libraries will no longer provide support for Guide on the Side. The code will remain openly available; however, UAL can no longer provide code fixes or upgrades.

The University of Arizona Libraries 66 Oct 31, 2022
Textpattern-jquery-ui-theme - The jQuery UI theme used within the Textpattern CMS admin-side.

Textpattern jQuery UI theme The jQuery UI theme used within the Textpattern CMS admin-side. Supported web browsers Chrome, Edge, Firefox, Safari and O

Textpattern CMS 12 Jan 10, 2022
Symfony bundle that provides Cross Site Request Forgery (CSRF or XSRF) protection for client-side applications

CSRF Cookie Bundle This Symfony bundle provides Cross Site Request Forgery (CSRF or XSRF) protection for client-side applications requesting endpoints

David Neustadt 8 Nov 28, 2022
An easy-to-use virtual wallet implementation for Laravel

Laravel Wallet Some apps require a prepayment system like a virtual wallet where customers can recharge credits which they can then use to pay in app

Muath Assawadi 6 Sep 28, 2022
An easy-to-use virtual wallet implementation for Laravel.

Laravel Wallet Some apps require a prepayment system like a virtual wallet where customers can recharge credits which they can then use to pay in app

Muathye 1 Feb 6, 2022
Implementation Package Spatie/Laravel-Permission

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

M Rizal 3 Sep 12, 2021
A lightway implementation of Laravel's belongs To many

A lightweigth implementation of Laravel's belongs To many relationship in cases you don't need pivot table.

Inani El Houssain 24 Nov 2, 2022
A simple Socialite implementation for Laravel Jetstream.

Introduction Socialstream is a third-party package for Laravel Jetstream. It replaces the published authentication and profile scaffolding provided by

Joel Butcher 334 Jan 2, 2023