PHPackages                             krismawan4/inertiajs-query-builder-tables - 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. [API Development](/categories/api)
4. /
5. krismawan4/inertiajs-query-builder-tables

ActiveLibrary[API Development](/categories/api)

krismawan4/inertiajs-query-builder-tables
=========================================

Inertia.js Front-end Components for Spatie's Laravel Query Builder, with support for Laravel 12

v1.0.1(9mo ago)023MITPHPPHP ^8.1|^8.2

Since Jul 29Pushed 9mo agoCompare

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

READMEChangelogDependencies (6)Versions (3)Used By (0)

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

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

[![Latest Version on NPM](https://camo.githubusercontent.com/f7d1eff6319e899dd3acac55e9549aef386b299c69af06b8f88822ee648d8496/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f4070726f746f6e656d656469612f696e65727469616a732d7461626c65732d6c61726176656c2d71756572792d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://npmjs.com/package/@protonemedia/inertiajs-tables-laravel-query-builder)[![npm](https://camo.githubusercontent.com/6c6a13070c15d00ddbc31a6f4bb7ddf52be9f3b4d86da4af4279933801f7fecf/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f4070726f746f6e656d656469612f696e65727469616a732d7461626c65732d6c61726176656c2d71756572792d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://www.npmjs.com/package/@protonemedia/inertiajs-tables-laravel-query-builder)[![Latest Version on Packagist](https://camo.githubusercontent.com/200982856cf8f201601bd133fd674c287417bae904519e1e416f51d0afacf9c6/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f70726f746f6e656d656469612f696e65727469616a732d7461626c65732d6c61726176656c2d71756572792d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/protonemedia/inertiajs-tables-laravel-query-builder)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)[![run-tests](https://github.com/protonemedia/inertiajs-tables-laravel-query-builder/actions/workflows/php.yml/badge.svg?branch=main)](https://github.com/protonemedia/inertiajs-tables-laravel-query-builder/actions/workflows/php.yml)

---

This package is not maintained anymore, but it has a successor: [Inertia Table](https://inertiaui.com/inertia-table) 🚀
======================================================================================================================

[](#this-package-is-not-maintained-anymore-but-it-has-a-successor-inertia-table-)

**Inertia Table** is a brand new, premium package that's built from the ground up. It combines the best of this package with all the enhancements and new features of the Splade variant. The package in this repository is considered legacy and won't be updated anymore. It has some architectural flaws that are fixed in the new one.

The new package has a modern foundation and many requested features like **date filters**, **bulk actions**, **exports**, **dark mode**, **built-in query builder**, and **better customization**. There's also a React version coming. Check out all the features of the new package in the documentation:

---

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)

Support this package!
---------------------

[](#support-this-package)

❤️ We proudly support the community by developing Laravel packages and giving them away for free. If this package saves you time or if you're relying on it professionally, please consider [sponsoring the maintenance and development](https://github.com/sponsors/pascalbaljet). Keeping track of issues and pull requests takes time, but we're happy to help!

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/protonemedia/inertiajs-tables-laravel-query-builder/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 protonemedia/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 Krismawan4\InertiaTables\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)

```