PHPackages qbits/laravel-inertia-vue-datatable - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. qbits/laravel-inertia-vue-datatable ActiveLibrary[Utility & Helpers](/categories/utility) qbits/laravel-inertia-vue-datatable =================================== A powerful DataTable package for Laravel + Inertia.js + Vue 3 with server-side pagination, sorting, filtering, row selection, bulk actions, and export. v1.0.3(1mo ago)02↓100%MITVuePHP ^8.1 Since Mar 14Pushed 1mo agoCompare [ Source](https://github.com/RafiqueKhattak/laravel-inertia-vue-datatable)[ Packagist](https://packagist.org/packages/qbits/laravel-inertia-vue-datatable)[ RSS](/packages/qbits-laravel-inertia-vue-datatable/feed)WikiDiscussions main Synced 1mo ago READMEChangelogDependencies (5)Versions (3)Used By (0) Laravel Inertia DataTable ========================= [](#laravel-inertia-datatable) A full-featured DataTable package for **Laravel + Inertia.js + Vue 3**. Features -------- [](#features) Feature✓Server-side pagination✅Column sorting (asc/desc)✅Search / filtering✅Row selection + select all✅Bulk actions✅Column visibility toggle✅Export CSV / XLSX✅Custom action buttons (slot)✅Custom cell renderers (slot)✅Debounced search✅--- Installation ------------ [](#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 ------------------- [](#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 [](#routes) ``` Route::get('/users', [UserController::class, 'index']); Route::get('/users/export', [UserController::class, 'export']); Route::delete('/users/bulk-destroy', [UserController::class, 'bulkDestroy']); ``` --- Column Definition ----------------- [](#column-definition) KeyTypeDefaultDescription`key`string*required*Model attribute / DB column`label`string*required*Column header text`sortable`bool`false`Allow sorting by this column`searchable`bool`false`Include in LIKE search`exportable`bool`false`Include in CSV/XLSX export`visible`bool`true`Initial visibility--- Frontend: Vue Component ----------------------- [](#frontend-vue-component) ``` ``` ### Props [](#props) PropTypeDefaultDescription`columns`ArrayrequiredColumn definitions (from server)`rows`Array`[]`Current page rows`meta`ObjectrequiredPagination meta`filters`Object`{}`Active filter state`rowKey`String`'id'`Unique row identifier`selectable`Boolean`true`Show row checkboxes`showColumnToggle`Boolean`true`Show columns menu`exportable`Boolean`true`Show export buttons`exportUrl`String`''`URL to hit for export`bulkActions`Array`[]``[{ key, label }]``searchDebounce`Number`350`Debounce ms for search input### Events [](#events) EventPayloadDescription`bulkAction``{ action: string, ids: number[] }`Fired on bulk action click`selectionChange``number[]`Selected row IDs### Slots [](#slots) SlotPropsDescription`cell-{key}``{ row, value }`Custom cell renderer per column`rowActions``{ row }`Action buttons at end of each row`actions`—Extra buttons in the toolbar--- Configuration ------------- [](#configuration) `config/datatable.php` ``` return [ 'per_page' => 15, 'per_page_options' => [10, 15, 25, 50, 100], 'export_filename' => 'export', ]; ``` --- Requirements ------------ [](#requirements) - PHP 8.1+ - Laravel 10 or 11 - Inertia.js + Vue 3 - `maatwebsite/excel` ^3.1 --- License ------- [](#license) MIT ### Health Score 37 — LowBetter than 83% of packages Maintenance88 Actively maintained with recent releases Popularity3 Limited adoption so far Community6 Small or concentrated contributor base Maturity43 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 59d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/4d8bb735fd931671a0280f085a521f2d15192407ecd72d430430dd1ca26bfeb3?d=identicon)[RafiqueKhattak](/maintainers/RafiqueKhattak) --- Top Contributors [![RafiqueKhattak](https://avatars.githubusercontent.com/u/174876750?v=4)](https://github.com/RafiqueKhattak "RafiqueKhattak (4 commits)") --- Tags laravelpaginationinertiatabledatatablevueqbits ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/qbits-laravel-inertia-vue-datatable/health.svg) ``` [![Health](https://phpackages.com/badges/qbits-laravel-inertia-vue-datatable/health.svg)](https://phpackages.com/packages/qbits-laravel-inertia-vue-datatable) ``` ### Alternatives [tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 116.6k](/packages/tomshaw-electricgrid)[santigarcor/laravel-vuetable Vuetable laravel backend package 2750.3k](/packages/santigarcor-laravel-vuetable)[awes-io/table-builder A component that allows creating responsive HTML tables or lists from data object 4726.1k4](/packages/awes-io-table-builder)[bjuppa/laravel-blog Add blog functionality to your Laravel project 483.3k2](/packages/bjuppa-laravel-blog) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)