Registries

Component Registry

Register custom components for use with ComponentColumn::create() or Column::component() in PHP.

React

// app.tsx (at boot)
import { registerCellComponent } from '@forjedio/inertia-table-react';

registerCellComponent('StatusIndicator', ({ row }) => (
    <div className="flex items-center gap-2">
        <div className={`h-2 w-2 rounded-full ${row.is_online ? 'bg-green-500' : 'bg-gray-300'}`} />
        <span>{row.is_online ? 'Online' : 'Offline'}</span>
    </div>
));

Vue

<!-- Coming soon -->

// PHP
ComponentColumn::create('online', 'Status', 'StatusIndicator')

Components receive { row } - the full row data including hidden columns.

Icon Registry

Register icons from any icon library:

React

// app.tsx
import { registerIcons } from '@forjedio/inertia-table-react';
import { Server, Database, Globe } from 'lucide-react';

registerIcons({ server: Server, database: Database, globe: Globe });

Vue

<!-- Coming soon -->

// PHP
Column::make('type', 'Type')->icon('server')
// or
IconColumn::make('type_icon', 'Type')

Date Formatter

Replace the default dayjs formatter:

React

// app.tsx
import { setDateFormatter } from '@forjedio/inertia-table-react';
import { format } from 'date-fns';

setDateFormatter((value, fmt) =>
    format(new Date(String(value)), fmt ?? 'yyyy-MM-dd HH:mm:ss')
);

Vue

<!-- Coming soon -->