Upgrade Guide

This guide covers upgrading between major Inertia Table releases. Find your current version below.

• Upgrading from 1.1 to 1.2
• Upgrading from 1.0 to 1.1

Upgrading from 1.1 to 1.2

Frontend packages moved to npm

In 1.1 the Vue and React frontend packages shipped inside the Composer package and were installed from the local vendor directory (npm install vendor/forjedio/inertia-table/vue). This created a local file: link in your package.json.

In 1.2 the frontend packages are published separately to npm. You install them directly from the registry instead of linking to the vendored copy. This decouples the frontend release cadence from the Composer package and lets npm manage updates like any other dependency.

Steps

1. Remove the old local link
2. Install the package from npm
3. Update your imports
4. Update your Tailwind source paths

Remove the old local link

The 1.1 install registered the frontend package as a local file: dependency that points at the Composer vendor directory. Remove it before installing the npm version, otherwise the local link keeps taking precedence and you'll still be running the vendored copy.

1. Confirm the local link exists. Open package.json and look for the dependency - a vendored install has a file: URL rather than a version number:

{
    "dependencies": {
        "inertia-table-vue": "file:vendor/forjedio/inertia-table/vue"
    }
}

Or check from the terminal:

Vue

npm ls inertia-table-vue

React

npm ls inertia-table-react

A linked package shows the resolved path, for example inertia-table-vue@1.1.0 -> ./vendor/forjedio/inertia-table/vue.

2. Uninstall it. This deletes the node_modules symlink, removes the entry from package.json, and updates package-lock.json:

Vue

npm uninstall inertia-table-vue

React

npm uninstall inertia-table-react

3. Verify it's gone. The command should now report the package is missing:

Vue

npm ls inertia-table-vue
# -> (empty)  /  "npm error code ELSPROBLEMS ... not found"

React

npm ls inertia-table-react
# -> (empty)  /  "npm error code ELSPROBLEMS ... not found"

Manual fallback. If the entry is still listed after uninstalling (some setups pin it under devDependencies or a workspace), delete the line from package.json by hand, then do a clean reinstall so the lockfile and node_modules no longer reference the vendor path:

# delete the "inertia-table-vue" / "inertia-table-react" line from package.json first, then:
rm -rf node_modules
npm install

Install from npm

Vue

npm install @forjedio/inertia-table-vue

React

npm install @forjedio/inertia-table-react

Update imports

The npm package is scoped under @forjedio. Update your imports from the bare inertia-table-vue / inertia-table-react (used while the package was vendored in 1.1) to the scoped name.

Before

Vue

import { InertiaTable } from 'inertia-table-vue';

React

import { InertiaTable } from 'inertia-table-react';

After

Vue

import { InertiaTable } from '@forjedio/inertia-table-vue';

React

import { InertiaTable } from '@forjedio/inertia-table-react';

A project-wide find and replace of 'inertia-table-vue' → '@forjedio/inertia-table-vue' (and the React equivalent) across your frontend covers every import.

Update Tailwind source paths

The package now lives in node_modules instead of the vendor directory. Update your Tailwind source path to point there.

Tailwind v4

Vue

/* Before */
@source '../../vendor/forjedio/inertia-table/vue/src';

/* After */
@source '../../node_modules/@forjedio/inertia-table-vue/dist';

React

/* Before */
@source '../../vendor/forjedio/inertia-table/react/src';

/* After */
@source '../../node_modules/@forjedio/inertia-table-react/dist';

Tailwind v3

// tailwind.config.js
module.exports = {
    content: [
        // Before
        // './vendor/forjedio/inertia-table/vue/src/**/*.{js,vue,ts}',

        // After (Vue)
        './node_modules/@forjedio/inertia-table-vue/dist/**/*.{js,vue,ts}',
        // After (React)
        './node_modules/@forjedio/inertia-table-react/dist/**/*.{js,jsx,ts,tsx}',
    ],
}

Upgrading from 1.0 to 1.1

Package Changes

The Vue and React frontend packages now ship inside the Composer package instead of being published separately to npm. This simplifies installation and keeps all package versions in sync.

Note: As of 1.2 the frontend packages are published to npm again. If you are jumping straight from 1.0 to 1.2, follow the 1.1 to 1.2 guide for the current install method.

Steps

1. Uninstall the old npm packages
2. Install from the vendor path

Vue

npm uninstall @forjedio/inertia-table-vue
npm install vendor/forjedio/inertia-table/vue

React

npm uninstall @forjedio/inertia-table-react
npm install vendor/forjedio/inertia-table/react

Import Changes

Replace @forjedio/inertia-table-vue with inertia-table-vue in all imports. Replace @forjedio/inertia-table-react with inertia-table-react in all imports.

Before

Vue

import { InertiaTable } from '@forjedio/inertia-table-vue';
import { useTable } from '@forjedio/inertia-table-vue';
import { registerCellComponent } from '@forjedio/inertia-table-vue';

React

import { InertiaTable } from '@forjedio/inertia-table-react';
import { useTable } from '@forjedio/inertia-table-react';
import { registerCellComponent } from '@forjedio/inertia-table-react';

After

Vue

import { InertiaTable } from 'inertia-table-vue';
import { useTable } from 'inertia-table-vue';
import { registerCellComponent } from 'inertia-table-vue';

React

import { InertiaTable } from 'inertia-table-react';
import { useTable } from 'inertia-table-react';
import { registerCellComponent } from 'inertia-table-react';

Date Formatting Changes

Dates are now formatted server-side in PHP instead of on the frontend with dayjs. Format strings use PHP date() syntax instead of dayjs syntax.

Format String Conversion

dayjs (old)	PHP (new)	Description
YYYY	Y	4-digit year
MM	m	Month (01-12)
DD	d	Day (01-31)
HH	H	Hours 24h (00-23)
mm	i	Minutes (00-59)
ss	s	Seconds (00-59)

Update Config

In config/inertia-table.php, update the date_format value from dayjs syntax to PHP syntax:

// Before
'date_format' => 'YYYY-MM-DD HH:mm:ss',

// After
'date_format' => 'Y-m-d H:i:s',

Update Column Format Calls

Update any ->format() calls on DateColumn or DateTimeColumn to use PHP syntax:

// Before
DateColumn::make('created_at', 'Created')->format('DD/MM/YYYY')

// After
DateColumn::make('created_at', 'Created')->format('d/m/Y')

Removed: setDateFormatter

The setDateFormatter() function and the DateFormatter type have been removed from both the Vue and React packages. Date formatting is now handled entirely on the server. Remove any calls to setDateFormatter() from your frontend boot code.

New: Browser-Locale Formatting

Use ->toLocal() on a date column to skip server-side formatting and let the browser format the date according to the user's locale:

DateColumn::make('created_at', 'Created')->toLocal()->sortable()

Tailwind Content Paths

Update your Tailwind content paths to reference the vendor directory instead of node_modules.

Tailwind v4

Vue

/* Before */
@source '../../node_modules/@forjedio/inertia-table-vue/dist';

/* After */
@source '../../vendor/forjedio/inertia-table/vue/src';

React

/* Before */
@source '../../node_modules/@forjedio/inertia-table-react/dist';

/* After */
@source '../../vendor/forjedio/inertia-table/react/src';

Tailwind v3

// tailwind.config.js
module.exports = {
    content: [
        // Before
        // './node_modules/@forjedio/inertia-table-vue/dist/**/*.js',

        // After (Vue)
        './vendor/forjedio/inertia-table/vue/src/**/*.{js,vue,ts}',
        // After (React)
        './vendor/forjedio/inertia-table/react/src/**/*.{js,jsx,ts,tsx}',
    ],
}