Download the PHP package reyptr27/laravel-inertia-table without Composer

Inertia.js Tables for Laravel Query Builder

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 3.0, but it's fully customizable with slots.

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

Compatibility

• Vue 3
• Laravel 10
• Inertia.js
• Tailwind CSS v3 + Forms plugin
• PHP 8.2+

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)

You can install the package via composer:

The package will automatically register the Service Provider which provides a table method you can use on an Interia Response.

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 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.

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.

The selectFilter will, by default, add a no filter option to the array. You may disable this or specify a custom label for it.

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.

You can specify a custom label for it and a default value.

Number range Filters

This way, you can present the user a number range.

The numberRangeFilter method requires two arguments: the key and the max value.

You can specify a some other params.

You need to use a custom allowed filter for this filter.

Custom Filters

This way, you can present the user a custom filter.

The customFilter method requires one argument: the key.

You can specify a some other params.

You need to use a custom allowed filter for this filter.

For the frontend, you can use the #custom_filter(<< your key >>) slot to add your custom filter. You can access to the filter data (like params), the color and the onFilterChange function. The onFilterChange function is a function that you need to call when you want to update the filter value. You need to pass the key and the new value.

The searchable option is a shortcut to the searchInput method. The example below will essentially call $table->searchInput('name', 'User Name').

Global Search

You may enable Global Search with the withGlobalSearch method, and optionally specify a placeholder.

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:

Example controller

Client-side installation (Inertia)

You can install the package via either npm or yarn:

Add the repository path to the content array of your Tailwind configuration file. This ensures that the styling also works on production builds.

Table component

To use the Table component and all its related features, you must import the Table component and pass the users data to the component.

The resource property automatically detects the data and additional pagination meta data. You may also pass this manually to the component with the data and meta properties:

If you want to manually render the table, like in v1 of this package, you may use the head and body slot. Additionally, you can still use the meta property to render the paginator.

The Table has some additional properties to tweak its front-end behaviour.

The Table has some events that you can use

• rowClicked: this event is fired when the user click on the row. The event give you this informations: event, item, key. Be careful if you use this event with a clickable element inside the row like an action button. Don't forget to use event.stopPropagation() for all other clickable elements

Custom column cells

When using auto-fill, you may want to transform the presented data for a specific column while leaving the other columns untouched. For this, you may use a cell template. This example is taken from the Example Controller above.

Custom header cells

When using auto-fill, you may want to transform the presented data for a specific header while leaving the other columns untouched. For this, you may use a header template. This example is taken from the Example Controller above.

Multiple tables per page

You may want to use more than one table component per page. Displaying the data is easy, but using features like filtering, sorting, and pagination requires a slightly different setup. For example, by default, the page query key is used for paginating the data set, but now you want two different keys for each table. Luckily, this package takes care of that and even provides a helper method to support Spatie's query package. To get this to work, you need to name your tables.

Let's take a look at Spatie's QueryBuilder. In this example, there's a table for the companies and a table for the users. We name the tables accordingly. So first, call the static updateQueryBuilderParameters method to tell the package to use a different set of query parameters. Now, filter becomes companies_filter, column becomes companies_column, and so forth. Secondly, change the pageName of the database paginator.

Then, we need to apply these two changes to the InertiaTable class. There's a name and pageName method to do so.

Lastly, pass the correct name property to each table in the Vue template. Optionally, you may set the preserve-scroll property to table-top. This makes sure to scroll to the top of the table on new data. For example, when changing the page of the second table, you want to scroll to the top of the table, instead of the top of the page.

Pagination translations

You can override the default pagination translations with the setTranslations method. You can do this in your main JavaScript file:

Table.vue slots

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.

Customizations available

You can customize some parts of the table.

Provide an object with the desired customizations in app.js file like this:

You can customize the default style by overiding the default style like that:

Or you can create a new style and using the color prop on the Table.vue

Available customizations

Testing

A huge Laravel Dusk E2E test-suite can be found in the app directory. Here you'll find a Laravel + Inertia application.

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

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

Credits

• Reyptr27
• All Contributors

License

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