Upgrade Guide

This guide covers upgrading from Inertia Table 1.0.x to 1.1.x.

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.

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}',
    ],
}