Data Table for Angular

import { AuiDataTable, AuiDataTableColumnChooser, AuiColumn } from '@absoluteui/angular/data-table';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Data Table page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { dataTable: { ... } } }) (see Configuration).

Example

import { Component, signal } from '@angular/core';
import { AuiDataTable, AuiDataTableColumnChooser } from '@absoluteui/angular/data-table';
import { AuiButton } from '@absoluteui/angular/button';
import type { DataTableColumn, DataTableFilter, DataTableFilterChangeDetail, DataTableSort } from '@absoluteui/components/data-table';

interface User { id: string; name: string; email: string }

/** Server mode: the table reports sort, paging, and filters; the component loads the page. */
@Component({
  selector: 'app-users-table',
  imports: [AuiDataTable, AuiDataTableColumnChooser, AuiButton],
  template: `<button type="button" auiButton [auiDataTableColumnChooser]="users">Columns</button>
    <aui-data-table #users="auiDataTable" caption="Users" mode="server" selection="multiple" [multiSort]="true" [searchable]="true"
      [columns]="columns" [rows]="rows()" [rowId]="rowId" [total]="total()" [loading]="loading()" [pageSizes]="[25, 50, 100]"
      [(sort)]="sort" [(page)]="page" [(pageSize)]="pageSize" [(selected)]="selected"
      (sortChange)="load()" (pageChange)="load()" (pageSizeChange)="load()" (filterChange)="onFilter($event)" />`,
})
export class UsersTableComponent {
  readonly columns: DataTableColumn<User>[] = [
    { id: 'name', header: 'Name', accessor: (u) => u.name, filter: 'text' },
    { id: 'email', header: 'Email', accessor: (u) => u.email, filter: 'text' },
  ];
  readonly rows = signal<User[]>([]);
  readonly total = signal(0);
  readonly loading = signal(true);
  readonly sort = signal<DataTableSort | readonly DataTableSort[] | null>(null);
  readonly page = signal(1);
  readonly pageSize = signal<number | null>(25);
  readonly selected = signal<readonly string[]>([]);
  filters: Readonly<Record<string, DataTableFilter>> = {};
  search = '';
  readonly rowId = (u: User): string => u.id;

  onFilter(change: DataTableFilterChangeDetail): void {
    this.filters = change.filters;
    this.search = change.search;
    this.page.set(1);
    this.load();
  }

  load(): void {
    this.loading.set(true);
    // Request the page for this.sort(), this.page(), this.pageSize(), this.filters, and this.search,
    // then set rows, total, and loading.
  }
}

<aui-data-table>

Class AuiDataTable; template reference #ref="auiDataTable".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
caption	string		Required. Table caption; the accessible name of the table and its scroll region.
hideCaption	boolean	false	Visually hide the caption (it stays the accessible name).
columns	readonly DataTableColumn<Row>[]		Column definitions: id, header, accessor, and optional type, currency, format, render, sortable, compare, align, width, rowHeader; since 0.3.0 also filter, filterOptions, searchable, hideable, resizable, minWidth, maxWidth, exportable, exportValue; since 0.9.0 also aggregate, renderHeader, editable, editor, editOptions, validate, renderEditor.
rows	readonly Row[]		Required. All rows (client mode) or the current page (server mode).
rowId	row: Row) => strin		Required. Stable, unique, non-empty id per row. Duplicates throw DATA_TABLE_ROW_ID.
isRowSelectable	(row: Row) => boolean		Rows returning false get a disabled selection input and are skipped by select all and range selection.
pageSizes	readonly number[]		Render a ‘Rows per page’ select in the composed Pagination.
mode	DataTableMode	'client'	client filters, sorts, and pages rows locally; server renders rows as the current page and only emits events.
total	number		Server mode: total rows across all pages (required when paged).
loading	boolean	false	aria-busy on the region, an announced ‘Loading’ status, skeleton rows when empty, otherwise an overlay over existing rows.
emptyMessage	string	'No results (localized)'	Text shown when there are no rows (also when filters match nothing).
searchable	boolean	false	Since 0.3.0. Render a labelled search field in a role=search toolbar above the table.
filterRow	boolean	true	Since 0.3.0. Render the filter row when a visible column has a filter; false keeps filters programmatic.
resizable	boolean	false	Since 0.3.0. Resize handles (focusable separators) on column headers for pointer drag and arrow keys; a column’s resizable overrides it.
renderDetail	(row: Row, doc: Document) => string | Node		Since 0.3.0. Row detail content; enables a disclosure button per row. Called when a row is first expanded; returned Nodes are consumer-owned, strings are text. Not combinable with virtual.
isRowExpandable	(row: Row) => boolean		Since 0.3.0. Rows returning false get no disclosure button.
virtual	boolean	false	Since 0.3.0. Windowed rendering of the current page inside the scroll region (single-line rows of uniform height); aria-rowcount and aria-rowindex describe the full set.
rowHeight	number	'40'	Since 0.3.0. Virtual mode: initial row height estimate in CSS pixels (16 to 500), replaced by the measured height.
groupBy	readonly string[]		Group rows by these column ids, nested in order (since 0.9.0). Client mode only; not with virtual.
renderGroupHeader	(group: DataTableGroup<Row>, doc: Document) => Node		Custom group header content (since 0.9.0); decorative, released with releaseNode when dropped.
showTotals	boolean	true	Show the totals row when a column aggregates or totals is set (since 0.9.0).
totals	Readonly<Record<string, unknown>>		Server mode: totals by column id, computed by the server (since 0.9.0).
renderEmpty	(doc: Document) => Node		Custom empty-state content (since 0.9.0); replaces emptyMessage, released with releaseNode when dropped.
icons	Partial<DataTableIcons>		Icon slot overrides (expand and collapse since 0.3.0).
selection	DataTableSelection	'none'	Row selection: radios (single) or checkboxes with select all (multiple).
stickyHeader	boolean	true	Keep the header rows (and the filter row) visible while the scroll region scrolls.
sortCycle	DataTableSortCycle	'tri-state'	tri-state: ascending, descending, unsorted. bi-state: ascending, descending.
multiSort	boolean	false	Since 0.3.0. Shift+click or Shift+Enter/Space on a sort button adds the column to the sort (or cycles it in place).
filterDelay	number	'250'	Since 0.3.0. Milliseconds (0 to 5000) between the last keystroke in a text or number filter or the search field and filtering; Enter, blur, and select/date changes apply immediately.
locale	string	'en-US'	Messages, number/date formatting, text collation, and case-insensitive matching.
timezone	string	'UTC'	IANA timezone for datetime columns: formatting and date filters.
density	Density	'comfortable'	Cell padding.
direction	Direction	'ltr'	Passed to the composed Pagination (mirrors its chevrons).

Two-way bindings

Model	Type	Change output	Description
[(sort)]	DataTableSort | readonly DataTableSort[] | null	(sortChange)	Current sort; each column must be sortable and appear once. An array (since 0.3.0) sorts by several columns, first entry first.
[(selected)]	readonly string[]	(selectedChange)	Selected row ids.
[(page)]	number	(pageChange)	Current page, 1-based; clamped to the page count.
[(filters)]	Readonly<Record<string, DataTableFilter>>	(filtersChange)	Since 0.3.0. Active column filters by column id; each filter type must match the column’s filter kind (text, number, date, enum). JSON-safe.
[(search)]	string	(searchChange)	Since 0.3.0. Global search text: every whitespace-separated term must appear in the displayed text of some visible, searchable column (case-insensitive).
[(hiddenColumns)]	readonly string[]	(hiddenColumnsChange)	Since 0.3.0. Hidden column ids; at least one column stays visible.
[(columnOrder)]	readonly string[]	(columnOrderChange)	Since 0.3.0. Display order by column id; unlisted columns follow in definition order.
[(columnWidths)]	Readonly<Record<string, number>>	(columnWidthsChange)	Since 0.3.0. Border-box column widths in CSS pixels, clamped to each column’s minWidth/maxWidth. Any entry switches the table to a fixed layout.
[(pinnedColumns)]	DataTablePinnedColumns	(pinnedColumnsChange)	Since 0.3.0. Sticky columns at the inline start and end edges, outermost first (logical edges, so right-to-left layouts mirror). Pinned columns move to their edge; start pins also pin the selection and disclosure columns.
[(expanded)]	readonly string[]	(expandedChange)	Since 0.3.0. Expanded row ids (pruned like the selection).
[(collapsedGroups)]	readonly string[]	(collapsedGroupsChange)	Collapsed group keys; groups are expanded by default (since 0.9.0).
[(pageSize)]	number | null	(pageSizeChange)	Rows per page (1 to 1,000,000); null renders all rows without pagination.

Outputs

Output	Payload	Description
(selectionChange)	DataTableSelectionChangeDetail	The user changed the selection (row input, select all, or Shift+click range). Re-emits aui-selection-change.
(filterChange)	DataTableFilterChangeDetail	Since 0.3.0. The user changed a column filter or the global search. The page returns to 1. In server mode load matching rows (read table.getState() for the full query). Re-emits aui-filter-change.
(columnsChange)	DataTableColumnsChangeDetail	Since 0.3.0. The user showed or hid a column (column chooser) or resized one (on release, or per resize key). Re-emits aui-columns-change.
(expandChange)	DataTableExpandChangeDetail	Since 0.3.0. The user expanded or collapsed a row. Re-emits aui-expand-change.
(groupToggled)	DataTableGroupToggleDetail	The user expanded or collapsed a group (since 0.9.0). Re-emits aui-group-toggle.
(cellEdit)	DataTableCellEditDetail<Row>	The user committed an inline edit (since 0.9.0); update rows with value. Re-emits aui-cell-edit.

Read-only state

Property	Type	Description
rowCount	Signal<number>	Since 0.3.0. Rows matching the filters and search across all pages (client mode), or total (server mode).

Methods

Call them through a viewChild query or a template reference.

Method	Description
setRows(rows: readonly Row[], total?: number | undefined): void	Replace rows (and the server-mode total).
getSelected(): string[] | undefined	Selected row ids.
setSelected(ids: readonly string[]): void	Replace the selection without events. Unknown (client mode) and unselectable ids are dropped.
clearSelection(): void	Clear the selection without events.
getState(): DataTableState | undefined	Since 0.3.0. JSON-safe snapshot: { version: 1, sort, filters, search, columns: { order, hidden, widths, pinned }, page, pageSize, collapsedGroups (since 0.9.0) }.
setState(state: DataTableStateInput): void	Since 0.3.0. Restore a snapshot or any subset of it (omitted parts are unchanged). Validates untrusted input (DATA_TABLE_STATE on malformed structure, state unchanged); unknown column ids and values a column cannot take are dropped. Emits nothing.
toCsv(options?: DataTableCsvOptions | undefined): string | undefined	Since 0.3.0. RFC 4180 CSV of visible/all/named columns and filtered/page/selected/all rows, formatted or raw values, with formula-injection protection. No side effects.
toCsvBlob(options?: DataTableCsvOptions | undefined): Blob | undefined	Since 0.3.0. toCsv() as a text/csv;charset=utf-8 Blob.

Templates

Customize rendering with AuiCell, AuiRowDetail, AuiHeader, AuiEmpty, AuiGroupHeader, AuiEditor from @absoluteui/angular/templates.

Test harness

AuiDataTableHarness from @absoluteui/angular/testing. <aui-data-table>: rows are the rendered data rows of the current page (or virtual window).

button[auiDataTableColumnChooser]

Class AuiDataTableColumnChooser; template reference #ref="auiDataTableColumnChooser".

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
auiDataTableColumnChooser	AuiDataTable<Row>		Required. The table whose columns the menu shows and hides: a #table="auiDataTable" reference.
menuLabel	string		Accessible name of the menu (default “Columns”).
placement	"bottom" | "top" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end"		Menu position relative to the button.
direction	Direction	'ltr'	Passed to the composed Pagination (mirrors its chevrons).

<aui-column>

Class AuiColumn.

Server rendering: Renders on the server; the browser re-creates it after hydration.

Inputs

Input	Type	Default	Description
id	string		Column id; defaults to field.
field	string		Row property shown in the column (when no accessor is bound).
header	string		Required. Header text and the column’s accessible name.
accessor	(row: Row) => unknown		Raw value used for sorting and default rendering (instead of field).
type	DataTableColumnType		Typed formatting and sorting: text (default), number, currency (needs currency), date (PlainDate), datetime (Instant, shown in the configured time zone), or boolean.
currency	string		ISO 4217 code for type="currency", for example EUR.
format	(value: unknown, row: Row) => string		Cell text (rendered as text, never HTML); overrides typed formatting.
sortable	boolean		Whether users can sort by this column (default true).
compare	(a: Row, b: Row) => number		Custom comparator (ascending).
align	DataTableAlign		Cell alignment; default end for number and currency columns, otherwise start.
width	string		CSS length: a number followed by px, rem, em, %, or ch.
rowHeader	boolean		Render cells as row headers (th scope="row"); default: the first column.
filter	DataTableFilterKind		Filter kind: text, number, date, or enum (number needs a number or currency column, date a date or datetime column, enum filterOptions or a boolean column).
filterOptions	readonly DataTableFilterOption[]		Options of an enum filter (default for boolean columns: Yes / No).
searchable	boolean	false	Since 0.3.0. Render a labelled search field in a role=search toolbar above the table.
hideable	boolean		Whether the column chooser may hide the column (default true).
resizable	boolean	false	Since 0.3.0. Resize handles (focusable separators) on column headers for pointer drag and arrow keys; a column’s resizable overrides it.
minWidth	number		Minimum resize width in pixels (default 64).
maxWidth	number		Maximum resize width in pixels (default 960).
exportable	boolean		Include the column in CSV exports (default true).
exportValue	(row: Row) => string | number | boolean | null		CSV cell value; overrides the formatted or raw value.
aggregate	DataTableAggregate<Row>		Aggregate shown in group headers and the totals row: sum, avg, min, max, count, or a function of the values and rows.
editable	oolean | ((row: Row) => boolean		Inline editing: editable (bare attribute) or a function of the row.
editor	DataTableEditorKind		Built-in inline editor: text, number, date, select, or checkbox (default from type).
editOptions	readonly DataTableFilterOption[]		Choices of the select editor.
validate	(value: unknown, row: Row) => string | null		Validate an edited value; return a message to keep the editor open with an error.

Templates

Customize rendering with AuiCell, AuiRowDetail, AuiHeader, AuiEmpty, AuiGroupHeader, AuiEditor from @absoluteui/angular/templates.