DataTable states

The same three states every collection in this group shows in place of its rows: nothing to show, loading and a blocking error.

DataTable

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, DataTable states

Invoice	Client
No invoices match these filters.

Invoice	Client
Loading invoices

Invoice	Client
Could not load invoices. Check the connection and try again.

Dark theme, DataTable states

Invoice	Client
No invoices match these filters.

Invoice	Client
Loading invoices

Invoice	Client
Could not load invoices. Check the connection and try again.

High contrast theme, DataTable states

Invoice	Client
No invoices match these filters.

Invoice	Client
Loading invoices

Invoice	Client
Could not load invoices. Check the connection and try again.

UsageLink to the section Usage

tsx

import { DataTable } from '@skribly/ui/data'

tsx

<DataTable aria-label="Invoices" columns={columns} items={[]} rowKey={(i) => i.id}
  isLoading={isLoading} loadingLabel="Loading invoices"
  error={failed ? 'Could not load invoices.' : undefined}
  emptyState="No invoices match these filters." />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Loading is a polite status with a spinner that stops under reduced motion.
An error is an assertive alert with an icon and its own words, never colour alone.
The empty state may hold a button, which stays reachable inside the grid.

This demo runs through axe in all three themes on every test run. See what the tests check.