PHPackages                             ponchrobles/inertiajs-tables-laravel-query-builder - 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. ponchrobles/inertiajs-tables-laravel-query-builder

ActiveLibrary[Utility & Helpers](/categories/utility)

ponchrobles/inertiajs-tables-laravel-query-builder
==================================================

Inertia.js Front-end Components for Spatie's Laravel Query Builder

3.1.2(1y ago)2677↓33.3%3[1 issues](https://github.com/PonchRobles/inertiajs-tables-laravel-query-builder/issues)MITPHPPHP ^8.2

Since May 14Pushed 1y ago1 watchersCompare

[ Source](https://github.com/PonchRobles/inertiajs-tables-laravel-query-builder)[ Packagist](https://packagist.org/packages/ponchrobles/inertiajs-tables-laravel-query-builder)[ Docs](https://github.com/ponchrobles/inertiajs-tables-laravel-query-builder)[ GitHub Sponsors](https://github.com/PonchRobles)[ RSS](/packages/ponchrobles-inertiajs-tables-laravel-query-builder/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (5)Versions (13)Used By (0)

Inertia.js Tables for Laravel Query Builder
===========================================

[](#inertiajs-tables-for-laravel-query-builder)

[![Latest Version on NPM](https://camo.githubusercontent.com/ff89321e0e616b453e46bb7aecb858ce4821f93f8060903cf574a11c5f1deed3/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f40706f6e6368726f626c65735f2f696e65727469616a732d7461626c65732d6c61726176656c2d71756572792d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://npmjs.com/package/@ponchrobles_/inertiajs-tables-laravel-query-builder)[![npm](https://camo.githubusercontent.com/d002656de100d322d05c1d5e862e7605223b53eb49376d3f7265507a3be39b12/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f40706f6e6368726f626c65735f2f696e65727469616a732d7461626c65732d6c61726176656c2d71756572792d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@ponchrobles_/inertiajs-tables-laravel-query-builder)[![Latest Version on Packagist](https://camo.githubusercontent.com/e7041ea16eee33a809ce81b9d4c876e31468d263bdabeb12f6a8ecfd110dc1fa/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f706f6e6368726f626c65732f696e65727469616a732d7461626c65732d6c61726176656c2d71756572792d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ponchrobles/inertiajs-tables-laravel-query-builder)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)

[Fork reason](https://github.com/protonemedia/inertiajs-tables-laravel-query-builder/issues/122)
------------------------------------------------------------------------------------------------

[](#fork-reason)

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. The data refresh logic is based on Inertia's [Ping CRM demo](https://github.com/inertiajs/pingcrm).

[![Inertia.js Table for Laravel Query Builder](https://user-images.githubusercontent.com/8403149/177773377-86c32d69-8f86-47e4-8063-ea227e480d10.mp4)](https://user-images.githubusercontent.com/8403149/177773377-86c32d69-8f86-47e4-8063-ea227e480d10.mp4)

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 11](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 ponchrobles/inertiajs-tables-laravel-query-builder
```

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 ProtoneMedia\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 toggle. Under the hood, this uses the same filtering feature of the Laravel Query Builder package.

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')]);
```

#### Columns

[](#columns)

With the `column` method, you can specify which columns you want to be toggleable, sortable, and searchable. You must pass in at least a key or label for each column.

```
Inertia::render('Page/Index')->table(function (InertiaTable $table) {
	$table->column('name', 'User Name');

	$table->column(
		key: 'name',
		label: 'User Name',
		canBeHidden: true,
		hidden: false,
		sortable: true,
		searchable: true
	);
});
```

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)

```