Inertia Table Docs

Appearance

Overriding Cells ​

Per-Column Cell Override ​

tsx
<InertiaTable
    tableData={servers}
    cellRenderers={{
        status: ({ row, value }) => (
            <MyCustomBadge status={value} color={row._status_enum_color} />
        ),
        name: ({ row, value }) => (
            <div className="flex items-center gap-2">
                <Avatar name={value} />
                <span className="font-medium">{String(value)}</span>
            </div>
        ),
    }}
/>
vue
<!-- Coming soon -->

Each renderer receives:

tsx
interface CellRenderProps {
    row: Row;           // full row data including hidden columns
    value: unknown;     // the column's resolved value
    column: DynamicColumnDef;
    displays: CellDisplay[];
    rowIndex: number;
}

Per-Column Header Override ​

tsx
<InertiaTable
    tableData={servers}
    headerRenderers={{
        name: ({ column, sortState, onSort }) => (
            <div onClick={() => onSort(column.sort_key)} className="cursor-pointer">
                {column.header}
                {sortState.active && (sortState.direction === 'asc' ? ' ↑' : ' ↓')}
            </div>
        ),
    }}
/>
vue
<!-- Coming soon -->

Global Cell Override ​

tsx
<InertiaTable
    tableData={servers}
    renderCell={({ row, value, column, defaultRender }) => {
        if (column.name === 'status') {
            return <MyStatusBadge status={value} />;
        }
        return defaultRender();  // fall back to default pipeline
    }}
/>
vue
<!-- Coming soon -->

Override Priority ​

  1. cellRenderers.{columnName} - highest, per-column
  2. renderCell - global override with defaultRender escape hatch
  3. Built-in display pipeline - from PHP column configuration