Custom renderers

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

React

import type { TableStateRegionProps } from '@inertiax/react-table';
import { AppTable } from '@/components/app-table';

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

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

Loading, empty, and request-error regions render inside the table body, so return valid row markup. The problemState region replaces the whole table and does not require row markup.

Add a control above the toolbar

React

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

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

<AppTable prop="users" customization={{ regions: { beforeToolbar: ClearSelection } }} />;

Successful-table region props include the definition, controller, state, request status, and TanStack table. The problemState region instead receives the problem, controller, request status, and whether reset is available. See React customization API for all regions and prop types.

Own the whole layout

To replace the table with a list or cards, see Custom table layouts. Replacement children own the controls and request states as well as the rows.