Inertia Table Documentation

Appearance

Upgrading from v1.x to v2.x ​

There are three differences between v1.x and v2.x:

  • The installation process has changed.
  • The React and Vue NPM packages now have separate names.
  • The Vue package is now located in the vue directory instead of the js directory.

Below, you'll find more information on each of these changes, but you may also want to jump straight to the upgrade steps.

Installation process ​

In v1.x, we used an alias in the vite.config.js file to link the NPM package. This has been replaced with the npm install command in v2.x. Using the npm install command results in a symlink being created in your node_modules directory to the package in the vendor directory. This makes it easier for Vite to tree-shake the package, resulting in a smaller bundle size. It's also more future-proof, as it doesn't rely on Vite-specific configuration.

NPM package names ​

In v1.x, both the Vue and React packages were named inertiaui/table. In v2.x, the Vue package is named @inertiaui/table-vue, and the React package is named @inertiaui/table-react. This change was made because inertiaui/table is actually not a valid NPM package name, as it's missing the @ symbol. This was not an issue in v1.x, as the package was aliased in the vite.config.js file. However, in v2.x, we've decided to use valid NPM package names to avoid any potential issues in the future. It's also more consistent with the Inertia Modal package, which uses the @inertiaui/modal-vue and @inertiaui/modal-react package names.

Vue package location ​

In v1.x, the Vue package was located in the js directory. In v2.x, it has been moved to the vue directory. At the initial release, there was only a Vue package, and the React package was added later. To avoid breaking changes at that time, we decided to keep the Vue package in the js directory. However, now that we have separate package names for Vue and React, we've decided to move the Vue package to the vue directory to make it more consistent with the React package.

Upgrade steps ​

Upgrading from v1.x to v2.x is a fairly straightforward process and should only take a few minutes.

Remove the custom configuration from vite.config.js ​

The alias and dedupe configurations in the vite.config.js file are no longer necessary. You can remove them from your configuration file.

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

Upgrade the composer package ​

You can upgrade the composer package using the following command:

bash
composer require inertiaui/table:^2.0

Install the NPM package ​

After upgrading the composer package, you can install the NPM package using the following command:

bash
npm install vendor/inertiaui/table/vue
bash
npm install vendor/inertiaui/table/react

Update your imports ​

You'll need to update your imports to use the new package names:

js
import { Table } from 'inertiaui/table'
import { Table } from '@inertiaui/table-vue'
js
import { Table } from 'inertiaui/table'
import { Table } from '@inertiaui/table-react'

The styles have also been moved to the new package names, and there's no need to include the dist directory in the import path:

js
import 'inertiaui/table/dist/style.css'
import '@inertiaui/table-vue/style.css'
js
import 'inertiaui/table/dist/style.css'
import '@inertiaui/table-react/style.css'

Update your Tailwind configuration (Vue only) ​

You need to include the new package path in the content array of your tailwind.config.js file:

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

That's it! There's no need to update anything on the PHP side, and except for updating the imports, there should be no other changes required on the front end either.