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.
npm install vendor/inertiaui/table/vue
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.
export default {
content: [
'./vendor/inertiaui/table/vue/src/**/*.vue',
// other paths...
]
}
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.
@import 'tailwindcss';
@plugin '@tailwindcss/forms';
@source '../../vendor/inertiaui/table/vue/src/**/*.{js,vue}';
@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:
import '@inertiaui/table-vue/style.css'
import '@inertiaui/table-react/style.css'