Data table

Search, sort, select and paginate rows.


Ada Lovelace	[email protected]	Owner
Grace Hopper	[email protected]	Admin
Alan Turing	[email protected]	Member
Edsger Dijkstra	[email protected]	Member
Linus Torvalds	[email protected]	Admin

7 row(s)

Page 1 of 2

import { BuiDataTable } from 'ng-blatui';

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

Toolbar, page size and column visibility


Ada Lovelace	[email protected]	Owner
Grace Hopper	[email protected]	Admin
Alan Turing	[email protected]	Member
Edsger Dijkstra	[email protected]	Member
Linus Torvalds	[email protected]	Admin

7 row(s)

Page 1 of 2

<!-- perPageOptions renders a page-size select; toggleableColumns a visibility menu.
     buiDataTableToolbar drops your own filters into the same row. -->
<bui-data-table
  [columns]="columns"
  [rows]="rows"
  [perPageOptions]="[5, 10, 25]"
  [(pageSize)]="pageSize"
  [toggleableColumns]="true"
  [(visibleColumns)]="visible"
>
  <button buiButton buiDataTableToolbar variant="outline" size="sm">Export</button>
</bui-data-table>
// columns = [{ key: 'name', label: 'Name', hideable: false }, …]  ← always on screen
// visible = signal<string[] | null>(null)  ← null means "show everything"

API reference

Inputs

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.
`perPageOptions`	`readonly number[] \| Record<number, string>`	`[]`	Page sizes offered in the toolbar. A plain list (`[10, 25, 50]`) labels each option with its own number; a map (`{ 10: '10 per page' }`) uses your labels. Empty renders no select.
`toggleableColumns`	`boolean`	`false`	Whether to offer the column-visibility menu in the toolbar.
`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.
`columnsLabel`	`string`	—	Label override for the column-visibility menu's trigger.
`perPageLabel`	`string`	—	Accessible label override for the page-size select.

Two-way models

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`pageSize`	`number`	`5`	Number of rows displayed per page. Two-way bindable with `[(pageSize)]`.
`visibleColumns`	`readonly string[] \| null`	`null`	Which columns are on screen, by key. `null` means "not controlled, show everything"; an empty array means every hideable column is hidden, which is a state the menu can reach. Columns marked `hideable: false` are always shown whatever this holds. Two-way bindable, so the state is yours to keep.

Types

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.
`hideable`?	`false \| true`	Whether the column may be hidden from the `toggleableColumns` menu. `false` keeps it out of the menu and always on screen — for the one column a row is unreadable without.

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