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

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

cav-s-a/inertiajs-tables-laravel-query-builder
==============================================

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

1.4.1(3y ago)05311MITVuePHP ^7.4|^8.0|^8.1

Since Apr 2Pushed 3y agoCompare

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

READMEChangelogDependencies (4)Versions (19)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/workflows/run-tests/badge.svg)](https://github.com/protonemedia/inertiajs-tables-laravel-query-builder/workflows/run-tests/badge.svg)

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 2.0](https://tailwindcss.com/), but it's fully customizable and you can bring your own components. 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/113340981-e3863680-932c-11eb-8017-7a6588916508.mp4)](https://user-images.githubusercontent.com/8403149/113340981-e3863680-932c-11eb-8017-7a6588916508.mp4)

Launcher 🚀
----------

[](#launcher-)

Hey! We've built a Docker-based deployment tool to launch apps and sites fully containerized. You can find all features and the roadmap on our [website](https://uselauncher.com), and we are on [Twitter](https://twitter.com/uselauncher) as well!

Support
-------

[](#support)

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

Features
--------

[](#features)

- Global search
- Search per field
- Filters
- Toggle columns
- Sort columns
- Pagination
- Automatically updates the query string (by using [Inertia's replace](https://inertiajs.com/manual-visits#browser-history) feature)

Compatibility
-------------

[](#compatibility)

- [Vue 2.6](https://vuejs.org/v2/guide/installation.html) and [Vue 3](https://v3.vuejs.org/guide/installation.html)
- [Laravel 8 or 9](https://laravel.com/)
- [Inertia.js](https://inertiajs.com/)
- [Tailwind CSS v2](https://tailwindcss.com/) + [Forms plugin](https://github.com/tailwindlabs/tailwindcss-forms)
- PHP 7.4 + 8.0 + 8.1

Roadmap
-------

[](#roadmap)

- Remove @tailwindcss/forms dependency
- Debounce delay for inputs
- Convert Table.vue styling to proper Tailwind syntax
- Improve styling on really small screens
- Better documentation about customization and move to real renderless components

Installation
------------

[](#installation)

You need to install both the server-side package as well as the client-side package. Note that this package is only compatible with Laravel 8, Vue 2.6 + 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 that you can use on an Interia Response.

#### Search fields

[](#search-fields)

With the `addSearch` 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/v3/features/filtering) of the Laravel Query Builder package.

You need to pass in the attribute and the label as arguments. With the `addSearchRows` method, you can add multiple attributes at once.

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

    $table->addSearchRows([
        'email' => 'Email',
        'job_title' => 'Job Title',
    ]);
});
```

#### Filters

[](#filters)

Filters are similar to search fields, but they use a `select` element instead of an `input` element. This way, you can present the user a pre-defined set of options. Under the hood, this uses the same filtering feature of the Laravel Query Builder package.

This method takes three arguments: the attribute, the label, and a key-value array with the options.

```
Inertia::render('Page/Index')->table(function ($table) {
    $table->addFilter('language_code', 'Language', [
        'en' => 'Engels',
        'nl' => 'Nederlands',
    ]);
});
```

#### Columns

[](#columns)

With the `addColumn` method, you can specify which columns you want to be toggleable. You need to pass in a key and label for each column. With the `addColumns` method, you can add multiple columns at once.

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

    $table->addColumns([
        'email' => 'Email',
        'language_code' => 'Language',
    ]);
});
```

The `addColumn` method has an optional third parameter to disable the column by default:

```
$table->addColumn('name', 'Name', false);
```

#### Disable global search

[](#disable-global-search)

By default, global search is enabled. This query will be applied to the filters by the `global` attribute. If you don't want to use the global search, you can use the `disableGlobalSearch` method.

```
Inertia::render('Page/Index')->table(function ($table) {
    $table->disableGlobalSearch();
});
```

#### Example controller

[](#example-controller)

```