Data

Data Table

A TanStack Table integration for sorting, paging, and optional row virtualization.

idle

Usage

import { DataTable } from "@mizen-labs/ui";

Guidance	Practice
Do	Keep search and filters near the records they affect.
Do	State whether bulk selection covers a page or all filtered matches.
Do	Keep data, columns, and feature configuration stable between renders.
Do	Mark the identifying column as a row header so it freezes while the grid scrolls sideways.
Do	Enable column resizing for wide working tables so people can fit columns to their data.

Guidance	Boundary
Scope	Use Table for static records that do not need managed state.
Scope	Keep remote queries and destructive mutations in the application.
Scope	Sorting needs a configured TanStack sorting feature and row model.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`DataTable.table`	`TanStack Table instance`	`Required`	The caller owns columns, records, sorting, filtering, and pagination state.
`DataTable.caption`	`string`	`Required`	Names the table. The grid itself is the single tab stop; its scroll region is not.
`Keyboard grid`	`ARIA grid`	`Always on`	Arrows move between cells; Home and End reach row ends, Ctrl+Home and Ctrl+End the corners, Page Up and Page Down jump 10 rows. A cell with one control focuses that control.
`Column resizing`	`columnResizingFeature`	`Off`	Add TanStack's columnResizingFeature (columnResizeMode: "onChange") to drag column edges or press Shift+Left/Right on a header; double-click a handle to reset.
`DataTable.virtualized`	`boolean`	`false`	Renders a measured window of rows. Use paging when every row must remain searchable or available to assistive tools.
`ColumnMeta.mizen`	`{ numeric?: boolean; rowHeader?: boolean; sticky?: boolean }`	`—`	Keeps column presentation explicit while preserving the TanStack model. Row-header columns freeze by default; set sticky: false to opt out.
`DataTablePagination.table`	`TanStack Table instance`	`Required`	Uses native buttons to navigate the caller-owned page model.

Data

A TanStack Table integration for sorting, paging, and optional row virtualization.

idle

import { DataTable } from "@mizen-labs/ui";

Guidance	Practice
Do	Keep search and filters near the records they affect.
Do	State whether bulk selection covers a page or all filtered matches.
Do	Keep data, columns, and feature configuration stable between renders.
Do	Mark the identifying column as a row header so it freezes while the grid scrolls sideways.
Do	Enable column resizing for wide working tables so people can fit columns to their data.

Guidance	Boundary
Scope	Use Table for static records that do not need managed state.
Scope	Keep remote queries and destructive mutations in the application.
Scope	Sorting needs a configured TanStack sorting feature and row model.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`DataTable.table`	`TanStack Table instance`	`Required`	The caller owns columns, records, sorting, filtering, and pagination state.
`DataTable.caption`	`string`	`Required`	Names the table. The grid itself is the single tab stop; its scroll region is not.
`Keyboard grid`	`ARIA grid`	`Always on`	Arrows move between cells; Home and End reach row ends, Ctrl+Home and Ctrl+End the corners, Page Up and Page Down jump 10 rows. A cell with one control focuses that control.
`Column resizing`	`columnResizingFeature`	`Off`	Add TanStack's columnResizingFeature (columnResizeMode: "onChange") to drag column edges or press Shift+Left/Right on a header; double-click a handle to reset.
`DataTable.virtualized`	`boolean`	`false`	Renders a measured window of rows. Use paging when every row must remain searchable or available to assistive tools.
`ColumnMeta.mizen`	`{ numeric?: boolean; rowHeader?: boolean; sticky?: boolean }`	`—`	Keeps column presentation explicit while preserving the TanStack model. Row-header columns freeze by default; set sticky: false to opt out.
`DataTablePagination.table`	`TanStack Table instance`	`Required`	Uses native buttons to navigate the caller-owned page model.