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.
copyemptyMessage and loadingLabel. Optional noResultsMessage and pagination words.
aria-label or aria-labelledbyOne is required.
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 and bulkActions show the selection toolbar.
  • detail opens the record in a drawer. onRowClick and selectedRowId are for a drawer you render yourself, with horizontalScrollSpacing or scrollRoomElement.
  • 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