DataPage
Full data-table page envelope: PageHeader + Toolbar + Table + Pagination slots.
Interactive-mode
Examples
With toolbar, table and pagination
Users
Manage user accounts.
| Name | Status | |
|---|---|---|
| Alice Martin | alice@example.com | Active |
| Bob Chen | bob@example.com | Pending |
| Clara Singh | clara@example.com | Inactive |
Showing 1–3 of 3
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| DataPage | Full data-table page envelope. Composes a borderless PageHeader at the top, then optional Toolbar, Table, and Pagination slots stacked vertically with gap-4. The Table slot is wrapped in a bordered rounded container. |
DataPage
Full data-table page envelope. Composes a borderless PageHeader at the top, then optional Toolbar, Table, and Pagination slots stacked vertically with gap-4. The Table slot is wrapped in a bordered rounded container.
| Property | Type | Required | Description |
|---|---|---|---|
| Title | string | Page title forwarded to the inner PageHeader. | |
| Description | string? | Sub-title forwarded to the inner PageHeader. | |
| Toolbar | RenderFragment? | Slot rendered above the table — typically a DataToolbar. | |
| Table | RenderFragment? | Slot rendered inside a bordered rounded container — typically an HTML <table> or a data-grid chunk. | |
| Pagination | RenderFragment? | Slot rendered below the table — typically a DataPagination. |