README

A full-featured DataTable package for Laravel + Inertia.js + Vue 3.

Features

Installation

composer require qbits/laravel-inertia-vue-datatable

Publish config + Vue component:

php artisan vendor:publish --tag=datatable-config
php artisan vendor:publish --tag=datatable-components

The Vue component will land at:

resources/js/vendor/datatable/Components/DataTable.vue

Backend: Controller

Add the HasDataTable trait to any controller and call $this->dataTable():

use YourVendor\InertiaDataTable\Traits\HasDataTable;

class UserController extends Controller
{
    use HasDataTable;

    private function columns(): array
    {
        return [
            ['key' => 'id',    'label' => 'ID',    'sortable' => true,  'searchable' => false, 'exportable' => true],
            ['key' => 'name',  'label' => 'Name',  'sortable' => true,  'searchable' => true,  'exportable' => true],
            ['key' => 'email', 'label' => 'Email', 'sortable' => true,  'searchable' => true,  'exportable' => true],
        ];
    }

    public function index()
    {
        $query = User::query();
        $tableData = $this->dataTable($query, $this->columns());

        return Inertia::render('Users/Index', [
            'table' => $tableData,
        ]);
    }

    public function export(Request $request)
    {
        $ids    = array_filter(explode(',', $request->input('ids', '')));
        $format = $request->input('format', 'xlsx');
        $query  = User::query();

        return Excel::download(
            new DataTableExport($query, $this->columns(), $ids),
            'users.' . $format
        );
    }

    public function bulkDestroy(Request $request)
    {
        User::whereIn('id', $request->ids)->delete();
        return back();
    }
}

Routes

Route::get('/users',               [UserController::class, 'index']);
Route::get('/users/export',        [UserController::class, 'export']);
Route::delete('/users/bulk-destroy', [UserController::class, 'bulkDestroy']);

Column Definition

Frontend: Vue Component

<DataTable
  :columns="table.columns"
  :rows="table.data"
  :meta="table.meta"
  :filters="table.filters"
  :bulk-actions="[{ key: 'delete', label: 'Delete Selected' }]"
  :exportable="true"
  export-url="/users/export"
  row-key="id"
  @bulk-action="handleBulkAction"
  @selection-change="onSelectionChange"
/>

Props

Events

Slots

Configuration

config/datatable.php

return [
    'per_page'         => 15,
    'per_page_options' => [10, 15, 25, 50, 100],
    'export_filename'  => 'export',
];

Requirements

• PHP 8.1+
• Laravel 10 or 11
• Inertia.js + Vue 3
• maatwebsite/excel ^3.1

License

MIT