DataTable, Asgard Docs

Data display

Display rows of structured data.

A feature-rich data table with built-in sorting, filtering, pagination, and row selection.

Key features:

Columns with custom render functions, sortable/filterable toggles
Column pinning to left or right edges
Variants: default, bordered, striped, borderless
Density settings: compact, comfortable, spacious
stickyHeader for large scrollable datasets

Loading preview…

When to use it

Lists of records (people, files, orders)
Admin tables with sort, search and select
Exportable reports and dashboards
Paginated result sets

Properties

Prop	Type	Default	Description
`data`	`T[]`	—	Array of data objects to display as rows in the table.
`columns`	`DataTableColumn<T>[]`	—	Column definitions controlling headers, rendering, sorting, and filtering. Each column can specify a render function for custom cell content.
`rowKey`	`keyof T \| ((row: T) => string \| number)`	—	Unique key extractor for each row, either a property name or a function returning a unique identifier.
`size`	`'compact' \| 'comfortable' \| 'spacious'`	—	Controls row height and padding density.
`variant`	`'default' \| 'bordered' \| 'striped' \| 'borderless'`	—	Visual style variant for the table layout and cell borders.
`selectable`	`boolean`	—	Enables row selection with checkboxes. Selected rows are tracked and exposed via callback.
`pagination`	`boolean`	—	Enables pagination controls at the bottom of the table.
`pageSize`	`number`	—	Number of rows displayed per page when pagination is enabled.

Notes

Each column supports a render function for custom cell content, as well as individual sortable and filterable boolean flags.
Columns can be pinned to the left or right edge of the table using the pinned property set to "left" or "right".
The stickyHeader prop keeps column headers visible while scrolling through large datasets.

Presets