Loading state

Pass isLoading: true to render skeleton rows and a progress bar in place of the data. Flip it back to false to reveal the real rows. This is especially useful with server-side data, where you toggle it around each fetch.

Usage

Drive isLoading from your own state and toggle it however you like — here with useState and a button in renderTopToolbarCustomActions:

const [isLoading, setIsLoading] = useState(false)

const table = useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  isLoading,
  renderTopToolbarCustomActions: () => (
    <Button
      variant="outline"
      size="sm"
      onClick={() => setIsLoading((prev) => !prev)}
    >
      {isLoading ? "Show data" : "Show loading"}
    </Button>
  ),
})

return <DataTable table={table} />

Reading the state

You can read the current value back from the table instance:

if (table.dataTable.isLoading) {
  // skeletons + progress bar are showing
}

Saving state

For an in-flight mutation (rather than an initial load), set isSaving: true. It shows the progress bar without replacing rows with skeletons, so the current data stays visible while the save runs.

useDataTable({ data, columns, getRowId: (row) => row.id, isSaving })

Choosing which affordances show

isLoading turns on three affordances together; override any of them independently:

• showProgressBars — the top progress bar (default isLoading || isSaving).
• showSkeletons — skeleton rows while the body is empty (default isLoading). The skeletons are drawn in each column, at the column's width and pinning, with bars of varying length. Pass showSkeletons: true to cover rows already shown too — handy while refetching — instead of dimming them. Style the bars with slotProps.skeleton.
• showLoadingOverlay — a dimming overlay over existing rows (default isLoading).

useDataTable({
  data,
  columns,
  getRowId: (row) => row.id,
  isLoading,
  showSkeletons: false, // keep rows visible, just dim + show the progress bar
})

Relevant options

Related