Custom renderers

Use a region to replace one part of the table UI. For example, customize the empty row:

import type { TableStateRegionProps } from '@inertiax/react';
import { InertiaX } from '@inertiax/react-inertia';

function EmptyUsers({ colSpan }: TableStateRegionProps) {
  return (
    <tr>
      <td colSpan={colSpan}>No users match these filters.</td>
    </tr>
  );
}

export function UsersIndex() {
  return <InertiaX prop="users" table={{ regions: { emptyState: EmptyUsers } }} />;
}

State regions render inside the table body, so return valid row markup.

Add a control above the toolbar

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

function ClearSelection({ controller, state }: TableRegionProps) {
  return (
    <button
      type="button"
      disabled={state.selection.length === 0}
      onClick={() => controller.clearSelection()}
    >
      Clear selection
    </button>
  );
}

<InertiaX prop="users" table={{ regions: { beforeToolbar: ClearSelection } }} />;

Region props include the definition, controller, state, request status, and TanStack table. See React customization API for all regions and prop types.

Own the whole layout

Pass children when your application needs a different layout. Hooks inside that content use the same table session:

import { useTableEnvelope } from '@inertiax/react';

function NameList() {
  const { component } = useTableEnvelope();
  return (
    <ul>
      {component.data.rows.map((row) => (
        <li key={String(row[component.data.rowKey].value)}>
          {String(row.name.value ?? '')}
        </li>
      ))}
    </ul>
  );
}

<InertiaX prop="users"><NameList /></InertiaX>;

This example expects a name column. Custom children replace the built-in UI, including its controls and loading/error states. Use the controller and hooks to implement those interactions. A render-function child can also receive the session directly.