# Custom renderers

> Replace a table region or render a completely different layout.

Source: https://docs.inertiax.dev/table/guide/custom-renderers/

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

**React**

```tsx
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**

```tsx
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](https://docs.inertiax.dev/table/reference/react/#regions) for all regions and prop types.

## Own the whole layout

To replace the table with a list or cards, see [Custom table layouts](https://docs.inertiax.dev/table/guide/custom-layouts/). Replacement children own the controls and request states as well as the rows.