Installation v1.x

This is the installation guide for Inertia Table v1.x. For the latest version, see the current Installation page.

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:

composer require inertiaui/table

Tailwind Configuration

Inertia Table uses Tailwind CSS for styling. You need to include the package path in the content array of your tailwind.config.js file:

Vue

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

React

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

Vite Configuration

There's some additional configuration required to use Inertia Table. In the vite.config.js file, add the following config to the root of the configuration object:

Vue

resolve: {
    alias: {'inertiaui/table': '/vendor/inertiaui/table/js'},
    dedupe: ['@inertiajs/vue3']
}

React

resolve: {
    alias: {'inertiaui/table': '/vendor/inertiaui/table/react'},
    dedupe: ['@inertiajs/react']
}

The alias allows you to import the Inertia Table components in your React and Vue files. The dedupe option is required to prevent Inertia from being bundled multiple times. This is highly likely an Inertia-specific issue and we're working on a more elegant solution for this.

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:

import 'inertiaui/table/dist/style.css'