shaungoh01/open-inertia-datatable-laravel

A simple Laravel 5/6/7/8 service provider for building datatable for inertiaJS.

dev-main 2022-01-17 02:00 UTC

Requires

• php: >=5.5.9
• guzzlehttp/guzzle: ^7.0.1
• illuminate/contracts: ^7.0 || ^8.0
• illuminate/mail: ^7.0 || ^8.0
• illuminate/support: ^7.0 || ^8.0
• swiftmailer/swiftmailer: ^6.2

Requires (Dev)

• phpunit/phpunit: ^4.0 || ^5.0
• vlucas/phpdotenv: ^1.0 || ^2.0 || ^3.0 || ^4.0 || ^5.0

Suggests

• laravel/framework: To test the Laravel bindings
• laravel/lumen-framework: To test the Lumen bindings

MIT

• Shaun

README

Installation

Installing via composer

composer require shaungoh01/open-inertia-datatable-laravel

Publishing VueJs table Component

php artisan vendor:publish --tag=datatable-vuejs

Instruction to use

There is 2 part, 1st is to build proper datatable query using datatable() in a query builder like:

$users = User::datatable()->paginate(50);

You should pass the result to front-end and the second part is to use the paginate result in front-end. We can start by imoprting the datatable that we publish earlier

import Datatable from '@/InertiaDatatable/Datatable.vue'

export default defineComponent({
    ...
    components: {
        Datatable,
    },
})

Make sure the datatable result is pass to front-end

props: {
    users:{
        type: Object
    },
},

Now we need to declare an array for header. This is so that we can easily show what column we want in the table

data(){
    return {
        headers:[
            {
                display:"Id",
                column:"id"
            },
            {
                display:"Email",
                column:"email"
            }
        ]
    }
},

After All of this, we can simply just use the datatable html tag by

<datatable :headers="headers" :pagination="users"></datatable>