PHPackages                             starfolksoftware/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. starfolksoftware/inertia-table

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

starfolksoftware/inertia-table
==============================

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

v2.5.0(1y ago)2160MITPHPPHP ^8.1|^8.2

Since May 31Pushed 1y agoCompare

[ Source](https://github.com/starfolksoftware/inertia-table)[ Packagist](https://packagist.org/packages/starfolksoftware/inertia-table)[ Docs](https://github.com/starfolksoftware/inertia-table)[ RSS](/packages/starfolksoftware-inertia-table/feed)WikiDiscussions v2.x Synced 1mo ago

READMEChangelog (3)Dependencies (5)Versions (4)Used By (0)

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

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

[![Latest Version on NPM](https://camo.githubusercontent.com/45c09d275300fc3e9bc6c4ad21cc29c9f616cfcc50cef32a534e6a894cbd7755/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4073746172666f6c6b736f6674776172652f696e65727469612d7461626c652e7376673f7374796c653d666c61742d737175617265)](https://npmjs.com/package/@starfolksoftware/inertia-table)[![npm](https://camo.githubusercontent.com/203a2defe71cef74633478e80d16efb0b51f33f4c9c49254462baffa19747729/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f4073746172666f6c6b736f6674776172652f696e65727469612d7461626c652e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@starfolksoftware/inertia-table)[![Latest Version on Packagist](https://camo.githubusercontent.com/47150bb5eaf8f7e5acc93d76ab02f1dfea813e043680d385f7b03f23c215d1e1/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f73746172666f6c6b736f6674776172652f696e65727469612d7461626c652e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/starfolksoftware/inertia-table)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![run-tests](https://github.com/starfolksoftware/inertia-table/actions/workflows/php.yml/badge.svg?branch=main)](https://github.com/starfolksoftware/inertia-table/actions/workflows/php.yml)

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 9](https://laravel.com/)
- [Inertia.js](https://inertiajs.com/)
- [Tailwind CSS v3](https://tailwindcss.com/) + [Forms plugin](https://github.com/tailwindlabs/tailwindcss-forms)
- PHP 8.0+

**Note**: There is currently an [issue](https://github.com/starfolksoftware/inertia-table/issues/69) with using this package with Vite!

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 9, 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 starfolksoftware/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 InertiaTable\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'
    );
});
```

#### 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)

```