Custom columns

For a different cell appearance, give the column a namespaced type and register a matching renderer. Use built-in formatting when only the value needs to change.

Declare the type

use InertiaX\Components\Table\Columns\TextColumn;

TextColumn::make('role')->type('acme/role');

The key role still selects the source field. The type acme/role selects the React renderer.

Render the cell

import type { TableCellRendererProps, TableCustomizationOptions } from '@inertiax/react';
import { InertiaX } from '@inertiax/react-inertia';

function RoleCell({ cell }: TableCellRendererProps) {
  return <strong>{String(cell.value ?? '')}</strong>;
}

const usersTable = {
  cellRenderers: [
    { operation: 'register', key: 'acme/role', value: RoleCell },
  ],
} satisfies TableCustomizationOptions;

export function UsersIndex() {
  return <InertiaX prop="users" table={usersTable} />;
}

Pass the same customization object to InertiaXProvider to register it across the application. See Registration & diagnostics for scope and missing-renderer behavior.

If the column is searchable, changing its type also requires a searchUsing() callback, even when it is created with TextColumn. Built-in search applies only to columns with type('text').

Add row-specific metadata

Column meta() supplies configuration shared by all rows. A cell decorator can supply metadata for one row:

use InertiaX\Components\Table\Columns\CellPayload;

TextColumn::make('role')
    ->type('acme/role')
    ->meta('compact', true)
    ->decorateUsing(function (CellPayload $cell): CellPayload {
        return $cell->putProperty('emphasized', $cell->value === 'admin');
    });

The renderer reads column.meta and cell.meta respectively. Cell renderer props also include rowId. All metadata reaches the browser; follow the field exposure rules.

See Column API for reusable decorator classes and stage ordering.