PHPackages reyptr27/laravel-inertia-table - 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. reyptr27/laravel-inertia-table ActiveLibrary[Utility & Helpers](/categories/utility) reyptr27/laravel-inertia-table ============================== Inertia.js Front-end Components for Spatie's Laravel Query Builder 1.0(1y ago)4128↓93.8%1MITPHPPHP ^8.2 Since Jul 30Pushed 1y ago1 watchersCompare [ Source](https://github.com/reyptr27/laravel-inertia-table)[ Packagist](https://packagist.org/packages/reyptr27/laravel-inertia-table)[ Docs](https://github.com/reyptr27/laravel-inertia-table)[ GitHub Sponsors](https://github.com/reyptr27)[ RSS](/packages/reyptr27-laravel-inertia-table/feed)WikiDiscussions master Synced today READMEChangelog (1)Dependencies (5)Versions (2)Used By (0) Inertia.js Tables for Laravel Query Builder =========================================== [](#inertiajs-tables-for-laravel-query-builder) This package provides a *DataTables-like* experience for [Inertia.js](https://inertiajs.com/) with support for searching, filtering, sorting, toggling columns, and pagination. It generates URLs that can be consumed by Spatie's excellent [Laravel Query Builder](https://github.com/spatie/laravel-query-builder) package, with no additional logic needed. The components are styled with [Tailwind CSS 3.0](https://tailwindcss.com/), but it's fully customizable with slots. Features -------- [](#features) - Auto-fill: auto generates `thead` and `tbody` with support for custom cells - Global Search - Search per field - Select filters - Toggle columns - Sort columns - Pagination (support for Eloquent/API Resource/Simple/Cursor) - Automatically updates the query string (by using [Inertia's replace](https://inertiajs.com/manual-visits#browser-history) feature) Compatibility ------------- [](#compatibility) - [Vue 3](https://v3.vuejs.org/guide/installation.html) - [Laravel 10](https://laravel.com/) - [Inertia.js](https://inertiajs.com/) - [Tailwind CSS v3](https://tailwindcss.com/) + [Forms plugin](https://github.com/tailwindlabs/tailwindcss-forms) - PHP 8.2+ Installation ------------ [](#installation) You need to install both the server-side package and the client-side package. Note that this package is only compatible with Laravel 10, Vue 3.0, and requires the Tailwind Forms plugin. ### Server-side installation (Laravel) [](#server-side-installation-laravel) You can install the package via composer: ``` composer require reyptr27/laravel-inertia-table ``` The package will automatically register the Service Provider which provides a `table` method you can use on an Interia Response. #### Search fields [](#search-fields) With the `searchInput` method, you can specify which attributes are searchable. Search queries are passed to the URL query as a `filter`. This integrates seamlessly with the [filtering feature](https://spatie.be/docs/laravel-query-builder/v5/features/filtering) of the Laravel Query Builder package. Though it's enough to pass in the column key, you may specify a custom label and default value. ``` use ReyPtr27\LaravelQueryBuilderInertiaJs\InertiaTable; Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->searchInput('name'); $table->searchInput( key: 'framework', label: 'Find your framework', defaultValue: 'Laravel' ); }); ``` #### Select Filters [](#select-filters) Select Filters are similar to search fields but use a `select` element instead of an `input` element. This way, you can present the user a predefined set of options. Under the hood, this uses the same filtering feature of the Laravel Query Builder package. The `selectFilter` method requires two arguments: the key, and a key-value array with the options. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->selectFilter('language_code', [ 'en' => 'Engels', 'nl' => 'Nederlands', ]); }); ``` The `selectFilter` will, by default, add a *no filter* option to the array. You may disable this or specify a custom label for it. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->selectFilter( key: 'language_code', options: $languages, label: 'Language', defaultValue: 'nl', noFilterOption: true, noFilterOptionLabel: 'All languages' ); }); ``` #### Boolean Filters [](#boolean-filters) This way, you can present the user a toggle. Under the hood, this uses the same filtering feature of the Laravel Query Builder package. The `toggleFilter` method requires one argument: the key. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->toggleFilter('is_verified'); }); ``` You can specify a custom label for it and a default value. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->toggleFilter( key: 'is_verified', label: 'Is email verified', defaultValue: true, ); }); ``` #### Number range Filters [](#number-range-filters) This way, you can present the user a number range. The `numberRangeFilter` method requires two arguments: the key and the max value. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->numberRangeFilter('invoice_recall_count', 5); }); ``` You can specify a some other params. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->toggleFilter( key: 'invoice_recall_count', max: 5, min: 0, prefix: '', suffix: '', step: 1, label: 'Invoice recall count', defaultValue: [1,4], ); }); ``` You need to use a custom allowed filter for this filter. ``` $users = QueryBuilder::for(/*...*/) ->allowedFilters([NumberRangeFilter::getQueryBuilderFilter('invoice_recall_count')]); ``` #### Custom Filters [](#custom-filters) This way, you can present the user a custom filter. The `customFilter` method requires one argument: the key. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->customFilter('date_range'); }); ``` You can specify a some other params. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->toggleFilter( key: 'date_range', label: 'Date range', params: ['min_date' => '2022-01-01', 'max_date' => '2022-12-31'] defaultValue: ['start' => '2022-01-01', 'end' => '2022-12-31'], ); }); ``` You need to use a custom allowed filter for this filter. ``` $dateRangeFilter = AllowedFilter::custom('date_range', new DateRangeFilter()); $users = QueryBuilder::for(/*...*/) ->allowedFilters([$dateRangeFilter]); ``` For the frontend, you can use the `#custom_filter(>)` slot to add your custom filter. You can access to the filter data (like params), the color and the onFilterChange function. The onFilterChange function is a function that you need to call when you want to update the filter value. You need to pass the key and the new value. ``` ``` The `searchable` option is a shortcut to the `searchInput` method. The example below will essentially call `$table->searchInput('name', 'User Name')`. #### Global Search [](#global-search) You may enable Global Search with the `withGlobalSearch` method, and optionally specify a placeholder. ``` Inertia::render('Page/Index')->table(function (InertiaTable $table) { $table->withGlobalSearch(); $table->withGlobalSearch('Search through the data...'); }); ``` If you want to enable Global Search for every table by default, you may use the static `defaultGlobalSearch` method, for example, in the `AppServiceProvider` class: ``` InertiaTable::defaultGlobalSearch(); InertiaTable::defaultGlobalSearch('Default custom placeholder'); InertiaTable::defaultGlobalSearch(false); // disable ``` #### Example controller [](#example-controller) ```