States

Overview

DataTable has built-in rendering paths for loading, empty, and error states so the surrounding layout does not need to branch around the table container.

Loading

Set loading to render skeleton rows. By default the table uses a generic skeleton for each cell.

<DataTable
  columns={columns}
  data={[]}
  loading
  skeletonRowCount={8}
/>

Empty and Error

Pass an emptyState object when the zero-rows case needs product copy or a URL-trigger action. Pass error when loading failed and you want the table to render an error row instead.

<DataTable
  columns={columns}
  data={[]}
  emptyState={{
    title: "No employees found",
    description: "Get started by adding your first employee",
    action: {
      label: "Add employee",
      paramName: "dialog",
      paramSetValue: "add-employee",
    },
  }}
  error={loadError ? "Failed to load employees" : null}
/>

Custom Skeletons

Use ColumnDef.meta.skeleton when a column needs a more realistic placeholder shape.

Component Overrides

For fully custom loading or error rendering, override the table-level state components:

<DataTable
  columns={columns}
  data={data}
  components={{
    LoadingState: ({ colSpan }) => <tr><td colSpan={colSpan}>Loading...</td></tr>,
    ErrorState: ({ colSpan, error }) => <tr><td colSpan={colSpan}>{error}</td></tr>,
  }}
/>

API Reference

Prop / Field	Type	Description
`loading`	`boolean`	Show the loading state with skeleton rows
`error`	`string \| null \| undefined`	Show the error state with the provided message
`skeletonRowCount`	`number \| "auto"`	Number of skeleton rows, or auto-calculate from container height
`emptyState`	object	Empty-state copy, icon, and optional action
`components.LoadingState`	`ComponentType<{ colSpan: number }>`	Replace the default loading row
`components.ErrorState`	`ComponentType<{ colSpan: number; error: string }>`	Replace the default error row
`ColumnDef.meta.skeleton`	`() => ReactNode`	Customize the loading skeleton for one column