Custom cells with React

A role column may need to show a short explanation alongside its value. That is a rendering concern: the application knows what each role means, and React owns how to present it.

That need does not require a second table definition in React. Laravel still owns the table’s query behavior; React owns the application-specific rendering. A custom type connects one backend column to a React cell.

Name the rendering contract

Use a namespaced type for the role column:

use InertiaX\Components\Table\Columns\TextColumn;

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

role is the source field. acme/role is the rendering key. Keeping those names distinct lets another field use the same renderer without adopting the same database column name.

Keep presentation in React

The cell uses the stored role value to choose application copy:

import type { TableCellRendererProps } from '@inertiax/react';

const roleDescriptions: Record<string, string> = {
  admin: 'Workspace administration',
  member: 'Day-to-day access',
};

export function RoleCell({ cell }: TableCellRendererProps) {
  const role = typeof cell.value === 'string' ? cell.value : '';
  const description = roleDescriptions[role];

  return (
    <div className="role-cell">
      <strong>{role || 'Unassigned'}</strong>
      {description && <small>{description}</small>}
    </div>
  );
}

Keeping this copy beside the markup lets the interface explain a role without changing the value Laravel sends.

Register it on the page

Register the same key through TableCustomizationOptions and pass the object to the Inertia adapter:

import type { TableCustomizationOptions } from '@inertiax/react';
import { InertiaX } from '@inertiax/react-inertia';
import { RoleCell } from '../../components/RoleCell';

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

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

The matching acme/role key connects the renderer to the Laravel column. The page adds presentation to the existing users table without redefining its fields or query controls. The custom columns guide covers registration details.

Keep query behavior in Laravel

A custom renderer changes presentation only. If you make this custom-type column searchable, supply a Laravel searchUsing() callback. Displaying “Workspace administration” beside admin does not make those words searchable.

The role cell’s copy and layout can now change in React while the rules for finding and accessing users stay with the Laravel query.