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 rows across 5 visible columns. Page 1 of 2.
Use arrow keys to move between cells. A cell whose only content is a single button or link focuses it directly. In cells with several controls, press Enter to interact with them, Tab to move forward between them, Shift+Tab to move backward, and Escape to return to the cell. Press Control+Shift+Left Arrow or Control+Shift+Right Arrow to reorder columns within their current pinned region. On macOS, press Command+Shift+Left Arrow or Command+Shift+Right Arrow.
| 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>