Table Builder
Visually configure your table primitives, preview the grid interactively, and copy the clean Angular code.
Live Preview
Columns 5 / 5 visible
Page 1 of 2
Showing 3 of 6 rows, 5 visible columns. Page 1 of 2.
Use arrow keys to move between cells. A cell whose only content is one control that does not need arrow keys focuses it directly. Elsewhere, press Enter to use the controls in a cell, Tab and Shift+Tab to move between them, and Escape to return to the cell. Press Control+Shift with Left or Right Arrow to reorder a column within its pinned region. Use Command on macOS.
| Alpha Searcher | Analytics | Active | Maya Patel | $4,500 |
|---|---|---|---|---|
| Beta Runner | Infrastructure | Active | Liam Chen | $1,200 |
| Delta Watcher | Security | Alert | Noah Kim | $3,100 |
<nat-table-surface [(state)]="tableState" [enableSorting]="true" [enablePinning]="true" [enableReordering]="true">
<nat-table-toolbar accessibleName="Table controls">
<app-table-search label="Search rows" placeholder="Type here..." showLabel toolbar />
<nat-table-column-visibility natToolbarItemPosition="end" />
</nat-table-toolbar>
<nat-table-pagination [pageSizeOptions]="[3, 5, 10]" />
<nat-table
[columns]="columns"
[data]="data"
accessibleName="Custom configured table preview"
/>
<nat-table-scroll-control />
</nat-table-surface>