Data table

Search, sort, select and paginate rows.

7 row(s)

Page 1 of 2

import { BuiDataTable } from 'ng-blatui';

<bui-data-table [columns]="columns" [rows]="rows" [pageSize]="5" />

API reference

Prop	Type	Default	Description
`columns`	`readonly DataTableColumn[]`	`[]`	Column definitions that drive the headers, cell lookup and sort/search keys.
`rows`	`readonly DataRow[]`	`[]`	Source data rows; each is a key/value map indexed by column keys.
`searchable`	`boolean`	`true`	Whether to show the search box that filters rows across all columns.
`searchPlaceholder`	`string`	`'Search...'`	Placeholder text for the search input.
`selectable`	`boolean`	`true`	Whether to render row checkboxes and the select-all header checkbox.
`pageSize`	`number`	`5`	Number of rows displayed per page.
`searchLabel`	`string`	—	Accessible label override for the search input.
`selectAllLabel`	`string`	—	Accessible label override for the select-all checkbox.
`selectRowLabel`	`string`	—	Accessible label override for each row's select checkbox.

DataRow

Record<string, unknown>

DataTableColumn

Field	Type	Description
`key`	`string`	Row property key whose value is rendered and used for sorting/searching.
`label`	`string`	Column header text shown in the table head.
`sortable`?	`false \| true`	Whether the header is a sort toggle; `false` disables sorting for this column.
`align`?	`"center" \| "left" \| "right"`	Horizontal text alignment for the column's header and cells.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.