Installation

This is the installation guide for Inertia Table v2.x and v3.x. If you're still using v1.x, consider upgrading to the latest version. For v1.x installation instructions, please refer to the old v1.x installation guide.

Inertia Table v2.x and v3.x are fully compatible and offer the same features. The only difference is that v3.x uses Tailwind CSS v4.x, while v2.x uses Tailwind CSS v3.x.

Composer Authentication

To install Inertia Table, you need a valid license. In the Inertia UI portal, you can find your license key or buy one.

Satis Repository

First, add the Inertia UI Composer repository to your composer.json file:

"repositories": [
    {
        "type": "composer",
        "url": "https://satis.inertiaui.com"
    }
]

Authentication

Then run the following command to authenticate with the Inertia UI Composer repository:

composer config --global --auth http-basic.satis.inertiaui.com "your-email-address" "your-license-key"

This will store your credentials in the auth.json file in your home directory. If you're using Laravel Forge, you can add the credentials on the Composer Package Authentication screen of your server's settings. This will allow you to install our packages without having to run the composer config command on your server.

Installation

Now you can install Inertia Table using Composer. If your project is using Tailwind CSS v3.x, you can install Inertia Table v2.x. If your project is using Tailwind CSS v4.x, you can install Inertia Table v3.x.

composer require inertiaui/table:^2.0

# or for v3.x

composer require inertiaui/table:^3.0

NPM Installation

After installing the package, you can link the React or Vue package into your project. This will create a symlink in your node_modules directory to the package in the vendor directory.

Vue

npm install vendor/inertiaui/table/vue

React

npm install vendor/inertiaui/table/react

Only for Inertia Table v2.x and v3.x

In Inertia Table v1.x, we used an alias in the vite.config.js file to link the package. This is has been replaced with the npm install command in v2.x.

Tailwind CSS Configuration

Inertia Table uses Tailwind CSS for styling. To ensure styles are properly applied, you need to configure Tailwind CSS to include the Inertia Table source files. The configuration depends on the version of Tailwind CSS you're using.

Tailwind CSS Version	Inertia Table Version
v3.4+	v1.x, v2.x
v4.1+	v3.x

Tailwind v3 Configuration

For Tailwind CSS v3, add the Inertia Table package path to the content array in your tailwind.config.js file.

Vue

export default {
    content: [
        './vendor/inertiaui/table/vue/src/**/*.vue',
        // other paths...
    ]
}

React

export default {
    content: [
        './vendor/inertiaui/table/react/src/**/*.jsx',
        // other paths...
    ]
}

If you have a darkMode key in your Tailwind config file, please check out our Dark Mode Strategy documentation.

Tailwind v4 Configuration

For Tailwind CSS v4, use the @source directive in your CSS file to include the Inertia Table package paths.

Vue

@import 'tailwindcss';

@plugin '@tailwindcss/forms';

@source '../../vendor/inertiaui/table/vue/src/**/*.{js,vue}';

React

@import 'tailwindcss';

@plugin '@tailwindcss/forms';

@source '../../vendor/inertiaui/table/react/src/**/*.{js,jsx}';

Vite Configuration

As described in the NPM Installation section, there was some additional Vite configuration required to use Inertia Table in v1.x. This is no longer necessary in v2.x.

Action and Export routes

Inertia Table requires two routes to execute actions and export data. The package registeres a macro on the Route facade to make this easier. Add the following code to your web.php file:

Route::inertiaTable();

Date Picker styling

Inertia Table uses the React DayPicker and Vue datepicker libraries for date filtering. You need to include the CSS file for the date picker in your project. You can do this by adding the following line to your app.js file:

Vue

import '@inertiaui/table-vue/style.css'

React

import '@inertiaui/table-react/style.css'