This package provides a DataTables-like experience for Inertia.js with support for searching, filtering, sorting, toggling columns, and pagination. It generates URLs that can be consumed by Spatie's excellent Laravel Query Builder package, with no additional logic needed. The components are styled with Tailwind CSS 2.0, but it's fully customizable and you can bring your own components. The data refresh logic is based on Inertia's Ping CRM demo.

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.

• Global search
• Search per field
• Filters
• Toggle columns
• Sort columns
• Pagination
• Automatically updates the query string (by using Inertia's replace feature)

• Vue 2.6 and Vue 3
• Laravel 8
• Inertia.js
• Tailwind CSS v2 + Forms plugin
• PHP 7.4 + 8.0

• 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

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.

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.

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

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

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();
});

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Inertia\Inertia;
use ProtoneMedia\LaravelQueryBuilderInertiaJs\InertiaTable;
use Spatie\QueryBuilder\AllowedFilter;
use Spatie\QueryBuilder\QueryBuilder;

class UserIndexController
{
    public function __invoke()
    {
        $globalSearch = AllowedFilter::callback('global', function ($query, $value) {
            $query->where(function ($query) use ($value) {
                $query->where('name', 'LIKE', "%{$value}%")->orWhere('email', 'LIKE', "%{$value}%");
            });
        });

        $users = QueryBuilder::for(User::class)
            ->defaultSort('name')
            ->allowedSorts(['name', 'email', 'language_code'])
            ->allowedFilters(['name', 'email', 'language_code', $globalSearch])
            ->paginate()
            ->withQueryString();

        return Inertia::render('Users/Index', [
            'users' => $users,
        ])->table(function (InertiaTable $table) {
            $table->addSearchRows([
                'name' => 'Name',
                'email' => 'Email address',
            ])->addFilter('language_code', 'Language', [
                'en' => 'Engels',
                'nl' => 'Nederlands',
            ])->addColumns([
                'email' => 'Email address',
                'language_code' => 'Language',
            ]);
        });
    }
}

You can install the package via either npm or yarn:

npm install @protonemedia/inertiajs-tables-laravel-query-builder --save

yarn add @protonemedia/inertiajs-tables-laravel-query-builder

To use the Table component and all its related features, you need to add the InteractsWithQueryBuilder mixin to your component and add the Tailwind2.Table component to the components key.

You can use the named #head slot to provide the table header and the named #body slot to provide the table body. You can use the showColumn method to determine if a column should be visible or not. You can use the sortBy method to set the column you want to sort by.

<template>
  <Table
    :filters="queryBuilderProps.filters"
    :search="queryBuilderProps.search"
    :columns="queryBuilderProps.columns"
    :on-update="setQueryBuilder"
    :meta="users"
  >
    <template #head>
      <tr>
        <th @click.prevent="sortBy('name')">Name</th>
        <th v-show="showColumn('email')" @click.prevent="sortBy('email')">Email</th>
        <th v-show="showColumn('language_code')" @click.prevent="sortBy('language_code')">Language</th>
      </tr>
    </template>

    <template #body>
      <tr v-for="user in users.data" :key="user.id">
        <td>{{ user.name }}</td>
        <td v-show="showColumn('email')">{{ user.email }}</td>
        <td v-show="showColumn('language_code')">{{ user.language_code }}</td>
      </tr>
    </template>
  </Table>
</template>

<script>
import { InteractsWithQueryBuilder, Tailwind2 } from '@protonemedia/inertiajs-tables-laravel-query-builder';

export default {
  mixins: [InteractsWithQueryBuilder],

  components: {
    Table: Tailwind2.Table
  },

  props: {
    users: Object
  }
};
</script>

The filters, search, columns, and on-update attributes of the Table component are required, but the the InteractsWithQueryBuilder mixin magically provides the values for those attributes. You just have to specify them like the example template above.

When you pass a meta object to the table, it will automatically provide a pagination component.

The Table.vue has several slots that you can use to inject your own implementations.

Each slot is provided with props to interact with the parent Table component.

<template>
  <Table ...>
    <template v-slot:tableGlobalSearch="slotProps">
      <input
        placeholder="Custom Global Search Component..."
        :value="slotProps.search.global.value"
        @input="slotProps.changeGlobalSearchValue($event.target.value)"
      />
    </template>

    <template #body>
      ...
    </template>
  </Table>
</template>

The templates and logic of the components are entirely separated. This way, you can create new templates while reusing the existing logic.

There are nine components that you can import and use as a mixin for your templates. For example, to write your own TableGlobalSearch component, you can import the base component and use its logic by adding it as a mixin.

<template>
  <input
    class="form-input"
    placeholder="Custom Global Search Component..."
    :value="value"
    @input="onChange($event.target.value)"
  />
</template>

<script>
import { Components } from '@protonemedia/inertiajs-tables-laravel-query-builder';

export default {
  mixins: [Components.TableGlobalSearch],
};
</script>

Available components:

• Components.ButtonWithDropdown
• Components.OnClickOutside
• Components.Pagination
• Components.Table
• Components.TableAddSearchRow
• Components.TableColumns
• Components.TableFilter
• Components.TableGlobalSearch
• Components.TableSearchRows

A good starting point would be to duplicate the js/Tailwind2 folder into your app and start customizing the templates from there.

You can run the PHP test suite with composer:

composer test

You can run the JS test suite with either npm or yarn:

npm run test

yarn test

Please see CHANGELOG for more information what has changed recently.

Please see CONTRIBUTING for details.

• Laravel Analytics Event Tracking: Laravel package to easily send events to Google Analytics.
• Laravel Blade On Demand: Laravel package to compile Blade templates in memory.
• Laravel Cross Eloquent Search: Laravel package to search through multiple Eloquent models.
• Laravel Eloquent Scope as Select: Stop duplicating your Eloquent query scopes and constraints in PHP. This package lets you re-use your query scopes and constraints by adding them as a subquery.
• Laravel Eloquent Where Not: This Laravel package allows you to flip/invert an Eloquent scope, or really any query constraint.
• Laravel FFMpeg: This package provides an integration with FFmpeg for Laravel. The storage of the files is handled by Laravel's Filesystem.
• Laravel Form Components: Blade components to rapidly build forms with Tailwind CSS Custom Forms and Bootstrap 4. Supports validation, model binding, default values, translations, includes default vendor styling and fully customizable!
• Laravel Mixins: A collection of Laravel goodies.
• Laravel Verify New Email: This package adds support for verifying new email addresses: when a user updates its email address, it won't replace the old one until the new one is verified.
• Laravel Paddle: Paddle.com API integration for Laravel with support for webhooks/events.
• Laravel WebDAV: WebDAV driver for Laravel's Filesystem.

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

• Pascal Baljet
• All Contributors

The MIT License (MIT). Please see License File for more information.