Axon 911 Frontend DocsAxon 911 Frontend Docs
Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Blocks
  2. Data Table
  3. API and Development

Data table

API and Development

View SourceOpens in a new tabSubmit IssueOpens in a new tab
DataTable from @prepared911/ui/data-table is the interactive table. Columns are DataTableColumn<T>[]. Each row needs a stable id.
Required props
PropMeaning
columnsaccessorKey or accessorFn plus id. cell renders something other than text.
dataThe current rows.
copyOptional. Omitted strings use localized defaults for en, he, es, fr and de. Override emptyMessage, loadingLabel, noResultsMessage, pagination, selection labels, and the rest as needed.
aria-label, aria-labelledbyOptional. Omitting both applies a safe default name and logs a one-time development warning.
Behavior
  • enableSorting on a column makes the header a button. manualSorting keeps the server's order.
  • globalFilter narrows by column text. manualFiltering means the server already filtered.
  • actionMenu ends every row with one "more" button. A row does not list actions inline.
  • multiSelect enables checkboxes and selection state. Pass bulkActions for the floating selection toolbar; omit it when bulk UI lives outside the table.
  • detail opens the record in a drawer. Pass required detail.layout (DataTableDrawerLayout.Inline or Overlaid). Hand-wired drawers beside the table are not supported.
  • virtualizeRows windows a very long page. Most tables should page instead.
  • copy.pagination shows the footer. manualPagination uses pages or rowCount.
Import
The filter bar is Filters from @prepared911/ui/blocks/filters. The table does not import it.
Previous
Data Table / Usage
Next
Data Table / Accessibility
On this page
Required props
Behavior
Import