Data

Table

Data table with sorting, filters, pagination, server data, selection, editing, row actions, column resize, reorder and settings, frozen columns and rows, row reorder and grouping, row expansion, virtual scroll, CSV export and cards on narrow screens.

Features28

API

Theming

Basic

Pass value and columns; every column sorts by a click on its header (asc → desc → none). Cells show the field value as text and cut long text with an ellipsis.


INV-1042	Northwind Studio	Lviv	1280	Paid
INV-1043	Blue Harbor	Kyiv	640	Pending
INV-1044	Oakline Partners	Odesa	3920	Overdue
INV-1045	Silverleaf	Kharkiv	215	Paid
INV-1046	Maple & Co	Dnipro	1870	Pending
INV-1047	Granite Works	Kyiv	760	Paid

Templates

<ng-template txTableCell="field"> replaces the content of a column; the template gets the row, value, index and column. Cells take any content — pills, amounts, buttons with popovers (the info button next to the client). txTableHeaderCell replaces a header.

			Amount, USD
INV-1042	Northwind Studio	Lviv	$1,280	Paid
INV-1043	Blue Harbor	Kyiv	$640	Pending
INV-1044	Oakline Partners	Odesa	$3,920	Overdue
INV-1045	Silverleaf	Kharkiv	$215	Paid
INV-1046	Maple & Co	Dnipro	$1,870	Pending
INV-1047	Granite Works	Kyiv	$760	Paid

27 lines

<tx-table ariaLabel="Invoices" dataKey="id" [value]="invoices" [columns]="columns">  <ng-template txTableCell="client" let-invoice>    <span class="client">      <strong>{{ invoice.client }}</strong>      <button        txButton        text        rounded        size="small"        severity="secondary"        icon="info-circle"        [attr.aria-label]="'About ' + invoice.client"        [txPopoverTrigger]="about"      ></button>      <tx-popover #about [header]="invoice.client"        >{{ invoice.city }} · invoice {{ invoice.number }}</tx-popover      >    </span>  </ng-template>  <ng-template txTableCell="amount" let-value="value">    <tx-amount [amount]="value" currency="USD" />  </ng-template>  <ng-template txTableCell="status" let-value="value">    <tx-pill [tone]="tones[value]" [value]="value" />  </ng-template>  <ng-template txTableHeaderCell="amount">Amount, USD</ng-template></tx-table>

Sort

[(sortField)] and [(sortOrder)] hold the sort; the header gets aria-sort and the arrow. sortable: false turns sorting off for a column.

				Status
INV-1044	Oakline Partners	Odesa	3920	Overdue
INV-1046	Maple & Co	Dnipro	1870	Pending
INV-1042	Northwind Studio	Lviv	1280	Paid
INV-1047	Granite Works	Kyiv	760	Paid
INV-1043	Blue Harbor	Kyiv	640	Pending
INV-1045	Silverleaf	Kharkiv	215	Paid

Sorted by amount desc

9 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  [value]="invoices"  [columns]="columns"  [(sortField)]="field"  [(sortOrder)]="order"/><p class="status">Sorted by {{ field() ?? 'nothing' }} {{ order() ?? '' }}</p>

Multi sort

With sortMode="multiple" Ctrl / ⌘ + click adds a column to the sort; the numbers show the order. [(multiSortMeta)] holds it.


INV-1046	Maple & Co	Dnipro	1870	Pending
INV-1045	Silverleaf	Kharkiv	215	Paid
INV-1047	Granite Works	Kyiv	760	Paid
INV-1043	Blue Harbor	Kyiv	640	Pending
INV-1042	Northwind Studio	Lviv	1280	Paid
INV-1044	Oakline Partners	Odesa	3920	Overdue

Pagination

paginator shows tx-paginator under the table and pages value; all paginator options are inputs of the table.


ORD-0001	Northwind Studio	40
ORD-0002	Blue Harbor	77
ORD-0003	Oakline Partners	114
ORD-0004	Silverleaf	151
ORD-0005	Maple & Co	188

Total: 64

11 lines

<tx-table    ariaLabel="Orders"    dataKey="id"    paginator    showTotal    [value]="orders"    [columns]="columns"    [(first)]="first"    [(rows)]="rows"    [rowsPerPageOptions]="[5, 10, 50, 100]"  />

Server

Server data: lazy turns local sorting and paging off and lazyLoad asks for { first, rows, sortField, sortOrder }; totalRecords is the size of the whole list. loading blurs the table while the request runs.


ORD-0001	Northwind Studio	25
ORD-0002	Blue Harbor	78
ORD-0003	Oakline Partners	131
ORD-0004	Silverleaf	184
ORD-0005	Maple & Co	237

Total: 237

14 lines

<tx-table    ariaLabel="Orders"    dataKey="id"    lazy    paginator    showTotal    [value]="page()"    [columns]="columns"    [totalRecords]="total"    [loading]="loading()"    [rows]="5"    [rowsPerPageOptions]="[5, 10, 50]"    (lazyLoad)="load($event)"  />

Filter menu

A column with filter gets a button in its header. The menu holds rules with a match mode for the column type (text, numeric, date), up to two rules joined by Match all / Match any, Clear and Apply; filterOptions gives a multi select and filterType: 'boolean' a yes / no choice. [(filters)] holds the result.


INV-1042	Northwind Studio	1280	Oct 2, 2026	Paid	Yes
INV-1043	Blue Harbor	640	Oct 4, 2026	Pending	No
INV-1044	Oakline Partners	3920	Oct 7, 2026	Overdue	No
INV-1046	Maple & Co	1870	Oct 15, 2026	Pending	No
INV-1047	Granite Works	760	Oct 18, 2026	Paid	Yes

Active filters: amount

13 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  [value]="invoices"  [columns]="columns"  [(filters)]="filters">  <ng-template txTableCell="issued" let-value="value">{{    value | date: 'mediumDate'  }}</ng-template>  <ng-template txTableCell="paid" let-value="value">{{ value ? 'Yes' : 'No' }}</ng-template></tx-table><p class="status">Active filters: {{ active() }}</p>

Filter row

filterDisplay="row" puts the filters in a row under the headers: text fields filter as you type (after filterDelay), the funnel picks the match mode. [(globalFilter)] is a search over every column — bind it to an own field in the toolbar.



INV-1042	Northwind Studio	Lviv	1280
INV-1043	Blue Harbor	Kyiv	640
INV-1044	Oakline Partners	Odesa	3920
INV-1045	Silverleaf	Kharkiv	215
INV-1046	Maple & Co	Dnipro	1870
INV-1047	Granite Works	Kyiv	760

22 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  filterDisplay="row"  toolbar  [value]="invoices"  [columns]="columns"  [(globalFilter)]="search">  <tx-icon-field txTableToolbar>    <tx-input-icon icon="search" />    <input      txInput      type="search"      placeholder="Search invoices"      aria-label="Search invoices"      [value]="search()"      (input)="search.set($any($event.target).value)"    />    <tx-input-clear />  </tx-icon-field></tx-table>

Selection

selectionMode="checkbox" adds a checkbox column with "select all" for the page (mixed when some rows are chosen); selectionMode="radio" picks one row. rowSelectable disables rows — here the paid ones.


INV-1042	Northwind Studio	Lviv	1280	Paid
INV-1043	Blue Harbor	Kyiv	640	Pending
INV-1044	Oakline Partners	Odesa	3920	Overdue
INV-1045	Silverleaf	Kharkiv	215	Paid
INV-1046	Maple & Co	Dnipro	1870	Pending
INV-1047	Granite Works	Kyiv	760	Paid

Selected: INV-1043

10 lines

<tx-table  ariaLabel="Invoices to remind"  dataKey="id"  selectionMode="checkbox"  [value]="invoices"  [columns]="columns"  [rowSelectable]="unpaid"  [(selection)]="selected"/><p class="status">Selected: {{ numbers() }}</p>

Row selection

selectionMode="single" or multiple selects rows by a click. Arrow keys move between rows, Space / Enter selects; in multiple Ctrl / ⌘ + click adds a row and Shift + click or Shift + arrows select a range.


INV-1042	Northwind Studio	Lviv	1280	Paid
INV-1043	Blue Harbor	Kyiv	640	Pending
INV-1044	Oakline Partners	Odesa	3920	Overdue
INV-1045	Silverleaf	Kharkiv	215	Paid
INV-1046	Maple & Co	Dnipro	1870	Pending
INV-1047	Granite Works	Kyiv	760	Paid

Selected: 0

9 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  selectionMode="multiple"  [value]="invoices"  [columns]="columns"  [(selection)]="selected"/><p class="status">Selected: {{ count() }}</p>

Row actions

Row actions go into <ng-template txTableActions> as tx-table-actions with buttons marked *txTableAction="{ label }". actionsInlineCount actions stay in the row, the rest open from …; a right-click on a row shows all of them as a menu. With actionsSettings the gear lets the user reorder and pin actions.


INV-1042	Northwind Studio	Lviv	1280	Paid
INV-1043	Blue Harbor	Kyiv	640	Pending
INV-1044	Oakline Partners	Odesa	3920	Overdue
INV-1045	Silverleaf	Kharkiv	215	Paid
INV-1046	Maple & Co	Dnipro	1870	Pending
INV-1047	Granite Works	Kyiv	760	Paid

52 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  actionsSettings  [value]="invoices()"  [columns]="columns"  [actionsInlineCount]="2">  <ng-template txTableActions let-invoice>    <tx-table-actions>      <button        *txTableAction="{ label: 'Open' }"        txButton        size="small"        icon="eye"        txTooltip="Open"        aria-label="Open"        (click)="toast.info('Opened ' + invoice.number)"      ></button>      <button        *txTableAction="{ label: 'Download' }"        txButton        size="small"        severity="secondary"        icon="download"        txTooltip="Download"        aria-label="Download"        (click)="toast.success('Downloaded ' + invoice.number)"      ></button>      <button        *txTableAction="{ label: 'Send reminder' }"        txButton        size="small"        severity="info"        icon="send"        txTooltip="Send reminder"        aria-label="Send reminder"        (click)="toast.success('Reminder sent for ' + invoice.number)"      ></button>      <button        *txTableAction="{ label: 'Delete' }"        txButton        size="small"        severity="danger"        icon="trash"        txTooltip="Delete"        aria-label="Delete"        (click)="remove(invoice)"      ></button>    </tx-table-actions>  </ng-template></tx-table>

Cell edit

editMode="cell" with editable columns: click a cell or press Enter / F2 on it, Enter or Tab saves (Tab goes to the next editable cell), Escape cancels. editType picks the editor, editOptions a select, <ng-template txTableEditor> an own one. The table writes the value into the row and emits cellEditComplete.


INV-1042	Northwind Studio	1280	Paid
INV-1043	Blue Harbor	640	Pending
INV-1044	Oakline Partners	3920	Overdue
INV-1045	Silverleaf	215	Paid

Click a client, an amount or a status

Row edit

editMode="row" adds an edit column: the pencil opens every editable cell of the row, the check saves, the cross cancels. [(editingRowKeys)] holds the rows in edit; rowEditSave gets the changed fields and the old values.


INV-1042	Northwind Studio	Oct 2, 2026	Yes
INV-1043	Blue Harbor	Oct 4, 2026	No
INV-1044	Oakline Partners	Oct 7, 2026	No
INV-1045	Silverleaf	Oct 11, 2026	Yes

14 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  editMode="row"  [value]="invoices"  [columns]="columns"  [(editingRowKeys)]="editing"  (rowEditSave)="saved($event)">  <ng-template txTableCell="issued" let-value="value">{{    value | date: 'mediumDate'  }}</ng-template>  <ng-template txTableCell="paid" let-value="value">{{ value ? 'Yes' : 'No' }}</ng-template></tx-table>

Columns

resizableColumns adds drag handles between headers. reorderableColumns lets any header be dragged along the header row by the grip that shows on hover (Alt + arrows on a header from the keyboard) and turns the column list of the gear into a sortable list — drag a row or press Alt + Arrow Up / Down on its checkbox. A column with reorderable: false stays in place, hideable: false keeps it visible (Invoice here). With stateKey widths, order, hidden columns and the sort are saved in local storage — reload the page to see them back.


INV-1042	Northwind Studio	Lviv	1280
INV-1043	Blue Harbor	Kyiv	640
INV-1044	Oakline Partners	Odesa	3920
INV-1045	Silverleaf	Kharkiv	215
INV-1046	Maple & Co	Dnipro	1870
INV-1047	Granite Works	Kyiv	760

13 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  stateKey="docs-table-columns"  resizableColumns  reorderableColumns  columnSettings  toolbar  [value]="invoices"  [(columns)]="columns">  <span txTableToolbar class="hint">Drag headers, edges and use the gear</span></tx-table>

Frozen columns

frozen: 'start' and frozen: 'end' keep columns in place while a wide table scrolls sideways; the row actions column is frozen at the end by default.


INV-1042	Northwind Studio	Lviv	Paid	1	1280
INV-1043	Blue Harbor	Kyiv	Pending	2	640
INV-1044	Oakline Partners	Odesa	Overdue	3	3920
INV-1045	Silverleaf	Kharkiv	Paid	4	215
INV-1046	Maple & Co	Dnipro	Pending	5	1870
INV-1047	Granite Works	Kyiv	Paid	6	760

Frozen rows

frozenValue pins rows above the body — they stay under the header while the rows scroll.


Main account	48210
Account 1	100
Account 2	237
Account 3	374
Account 4	511
Account 5	648
Account 6	785
Account 7	922
Account 8	1059
Account 9	1196
Account 10	1333
Account 11	1470
Account 12	1607
Account 13	1744
Account 14	1881
Account 15	2018
Account 16	2155
Account 17	2292
Account 18	2429
Account 19	2566
Account 20	2703
Account 21	2840
Account 22	2977
Account 23	3114
Account 24	3251

Row reorder

reorderableRows adds a handle: drag a row up or down (only along the column), or focus the handle and press Alt + Arrow Up / Down. rowReorder gets the new order — set it as value.

	Task	Owner
	Write release notes	Olena
	Fix the login form	Andrii
	Review the API	Iryna
	Update screenshots	Marta
	Speed up the search	Bohdan

Order: 1, 2, 3, 4, 5

9 lines

<tx-table  ariaLabel="Tasks"  dataKey="id"  reorderableRows  [value]="tasks()"  [columns]="columns"  (rowReorder)="reorder($event)"/><p class="status">Order: {{ order() }}</p>

Row group

groupRowsBy groups the rows: subheader mode adds a header row per group (here collapsible with expandableRowGroups) and txTableGroupFooter a row after it; rowGroupMode="rowspan" spans the group cell over its rows instead.


Core2 rows
Review the API	Iryna	2
Speed up the search	Bohdan	8
Core: 10 h
Docs2 rows
Write release notes	Olena	3
Update screenshots	Marta	1
Docs: 4 h
Web2 rows
Fix the login form	Andrii	5
Polish the settings page	Olena	4
Web: 9 h


Core	Review the API	Iryna
Core	Speed up the search	Bohdan
Docs	Write release notes	Olena
Docs	Update screenshots	Marta
Web	Fix the login form	Andrii
Web	Polish the settings page	Olena

20 lines

<tx-table  ariaLabel="Tasks by team"  dataKey="id"  groupRowsBy="team"  expandableRowGroups  [value]="tasks"  [columns]="columns">  <ng-template txTableGroupFooter let-rows="rows" let-value="value">    <span class="total">{{ value }}: {{ hours(rows) }} h</span>  </ng-template></tx-table><tx-table  ariaLabel="Tasks by team, spanned"  dataKey="id"  groupRowsBy="team"  rowGroupMode="rowspan"  [value]="tasks"  [columns]="spanColumns"/>

Expansion

<ng-template txTableExpansion> adds a toggle column; an expanded row shows the template under it. [(expandedRowKeys)] holds the dataKey values of the open rows.

Expand row
	INV-1042	Northwind Studio	Lviv	1280	Paid
	INV-1043	Blue Harbor	Kyiv	640	Pending
	INV-1044	Oakline Partners	Odesa	3920	Overdue
Oakline PartnersOdesa · OverdueAmount due: $3,920
	INV-1045	Silverleaf	Kharkiv	215	Paid
	INV-1046	Maple & Co	Dnipro	1870	Pending
	INV-1047	Granite Works	Kyiv	760	Paid

15 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  [value]="invoices"  [columns]="columns"  [(expandedRowKeys)]="expanded">  <ng-template txTableExpansion let-invoice>    <div class="details">      <strong>{{ invoice.client }}</strong>      <span>{{ invoice.city }} · {{ invoice.status }}</span>      <span>Amount due: <tx-amount currency="USD" [amount]="invoice.amount" /></span>    </div>  </ng-template></tx-table>

Cards

Below breakpoint (64rem) every row becomes a card: header labels on the left, the first column (or cardTitle) as the title, the checkbox in the corner and the actions at the bottom. This example uses breakpoint="200rem" so the cards show on any screen; <ng-template txTableCard> draws an own card instead.


INV-1042	Northwind Studio	Lviv	1280	Paid
INV-1043	Blue Harbor	Kyiv	640	Pending
INV-1044	Oakline Partners	Odesa	3920	Overdue
INV-1045	Silverleaf	Kharkiv	215	Paid

29 lines

<tx-table  ariaLabel="Invoices"  dataKey="id"  breakpoint="200rem"  selectionMode="checkbox"  [value]="invoices"  [columns]="columns"  [(selection)]="selected">  <ng-template txTableActions let-invoice>    <tx-table-actions>      <button        *txTableAction="{ label: 'Open' }"        txButton        size="small"        icon="eye"        label="Open"      ></button>      <button        *txTableAction="{ label: 'Download' }"        txButton        size="small"        severity="secondary"        icon="download"        label="Download"      ></button>    </tx-table-actions>  </ng-template></tx-table>

Footer

A column footer or <ng-template txTableFooterCell="field"> adds a footer row — totals, for example.


INV-1042	Northwind Studio	Lviv	1280
INV-1043	Blue Harbor	Kyiv	640
INV-1044	Oakline Partners	Odesa	3920
INV-1045	Silverleaf	Kharkiv	215
INV-1046	Maple & Co	Dnipro	1870
INV-1047	Granite Works	Kyiv	760
Total			8685

Scroll height

scrollHeight limits the height; the header stays on top while the rows scroll.


09:00	Signed in
09:02	Exported a report
09:04	Changed a password
09:06	Invited a member
09:08	Archived a project
09:10	Signed in
09:12	Exported a report
09:14	Changed a password
09:16	Invited a member
09:18	Archived a project
09:20	Signed in
09:22	Exported a report
09:24	Changed a password
09:26	Invited a member
09:28	Archived a project
09:30	Signed in
09:32	Exported a report
09:34	Changed a password
09:36	Invited a member
09:38	Archived a project
09:40	Signed in
09:42	Exported a report
09:44	Changed a password
09:46	Invited a member
09:48	Archived a project
09:50	Signed in
09:52	Exported a report
09:54	Changed a password
09:56	Invited a member
09:58	Archived a project

Virtual scroll

virtualScroll renders only the rows in view (plus virtualScrollTolerance around them) — 10 000 rows scroll like 20. It needs scrollHeight and rows of one height (virtualScrollItemSize, 50px by default). Arrow keys, Home and End still reach every row.


1	00:00	Request served
2	00:01	Cache refreshed
3	00:02	Job queued
4	00:03	Job finished
5	00:04	User signed in
6	00:05	Request served
7	00:06	Cache refreshed
8	00:07	Job queued
9	00:08	Job finished
10	00:09	User signed in
11	00:10	Request served
12	00:11	Cache refreshed
13	00:12	Job queued
14	00:13	Job finished
15	00:14	User signed in
16	00:15	Request served
17	00:16	Cache refreshed
18	00:17	Job queued
19	00:18	Job finished
20	00:19	User signed in

Export

exportCSV() downloads the visible columns of the filtered and sorted rows (or { selectionOnly: true }) as a CSV file that opens in spreadsheets: UTF-8 with a BOM, quoted cells, formulas written as text. cellTooltip shows the full text of cut cells.


Olena Kovalenko	olena@example.com	Prefers calls in the morning, before the weekly planning meeting
Andrii Melnyk	andrii@example.com	Sends invoices at the end of the month
Iryna Bondar	iryna@example.com	=Ask about the new contract

30 lines

<tx-table  #table  ariaLabel="Contacts"  dataKey="id"  selectionMode="checkbox"  exportFilename="contacts"  toolbar  cellTooltip  [value]="contacts"  [columns]="columns"  [(selection)]="selected">  <div txTableToolbar class="buttons">    <button      txButton      size="small"      icon="file-export"      label="Export CSV"      (click)="table.exportCSV()"    ></button>    <button      txButton      size="small"      severity="secondary"      label="Export selected"      [disabled]="!count()"      (click)="table.exportCSV({ selectionOnly: true })"    ></button>  </div></tx-table>

Appearance

size changes the cell padding (small drops the minimum row height), stripedRows tints every second row, [showGridlines]="false" keeps only the lines between rows.


INV-1042	Northwind Studio	Lviv	1280
INV-1043	Blue Harbor	Kyiv	640
INV-1044	Oakline Partners	Odesa	3920
INV-1045	Silverleaf	Kharkiv	215


INV-1042	Northwind Studio	Lviv	1280
INV-1043	Blue Harbor	Kyiv	640
INV-1044	Oakline Partners	Odesa	3920
INV-1045	Silverleaf	Kharkiv	215

14 lines

<tx-table  ariaLabel="Small striped invoices"  size="small"  stripedRows  [value]="invoices"  [columns]="columns"/><tx-table  ariaLabel="Large invoices without grid lines"  size="large"  [showGridlines]="false"  [value]="invoices"  [columns]="columns"/>

States

loading blurs the table and shows a spinner. An empty table shows emptyMessage (translated "No results found" by default) or <ng-template txTableEmpty>.


INV-1042	Northwind Studio	Lviv	1280
INV-1043	Blue Harbor	Kyiv	640
INV-1044	Oakline Partners	Odesa	3920
INV-1045	Silverleaf	Kharkiv	215

No archived invoices yet.

11 lines

<tx-toggle-switch label="Loading" [(ngModel)]="loading" /><tx-table  ariaLabel="Invoices"  dataKey="id"  [loading]="loading()"  [value]="invoices"  [columns]="columns"/><tx-table ariaLabel="Archived invoices" [value]="[]" [columns]="columns">  <ng-template txTableEmpty>No archived invoices yet.</ng-template></tx-table>

Design tokens

dt changes the tokens of one table — a tinted header and taller rows.


INV-1042	Northwind Studio	Lviv	1280
INV-1043	Blue Harbor	Kyiv	640
INV-1044	Oakline Partners	Odesa	3920
INV-1045	Silverleaf	Kharkiv	215

Pass through

pt adds classes and styles to the parts — here a rounded frame and a muted header row.


INV-1042	Northwind Studio	Lviv	1280
INV-1043	Blue Harbor	Kyiv	640
INV-1044	Oakline Partners	Odesa	3920
INV-1045	Silverleaf	Kharkiv	215