## Overview [#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 [#loading] Set `loading` to render skeleton rows. By default the table uses a generic skeleton for each cell. ```tsx ``` ## Empty and Error [#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. ```tsx ``` ## Custom Skeletons [#custom-skeletons] Use `ColumnDef.meta.skeleton` when a column needs a more realistic placeholder shape. ## Component Overrides [#component-overrides] For fully custom loading or error rendering, override the table-level state components: ```tsx Loading..., ErrorState: ({ colSpan, error }) => {error}, }} /> ``` ## API Reference [#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 |