AppDataTable
Page-level data-table view: a header row (title + description and a toolbar), a bordered table surface, and an optional footer for pagination. Layout only — supply the actual table as children. Presentational and theme-driven.
Members
Manage who has access to the Acme workspace.
| Name | Role | Status | |
|---|---|---|---|
| Ada Lovelace | ada@acme.dev | Owner | active |
| Grace Hopper | grace@acme.dev | Admin | active |
| Linus Torvalds | linus@acme.dev | Member | active |
| Margaret Hamilton | margaret@acme.dev | Admin | invited |
| Donald Knuth | donald@acme.dev | Member | suspended |
Showing 5 of 5 members
Installation
pnpm dlx @hex-core/cli add app-data-tableAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | The table itself — typically a <DataTable> or <Table>. |
title | ReactNode | — | Section title above the table. |
description | ReactNode | — | Optional copy under the title. |
toolbar | ReactNode | — | Toolbar region (search field, filters, 'Add' button) aligned right of the title. |
footer | ReactNode | — | Footer region under the table (pagination, row count). |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use to frame a list/table page: a header with search and actions, the table, and pagination. Drop a DataTable or Table into children.
When not to use
Don't use it as the data grid itself — it's the frame; the table comes from the data-table or table component. Don't use for dashboards of metrics (use app-stats).
Common mistakes
- Expecting sorting/filtering from this block — it's layout; that logic lives in the DataTable you pass as children.
- Putting the page <h1> here when AppShell's header already has one — this title is a section <h2>.
- Omitting a footer with pagination on long tables, leaving no way to page.
Accessibility
The section title renders as an <h2>. The block doesn't add table semantics — those come from the Table/DataTable in children. Toolbar controls should carry their own labels (e.g. a search input with an accessible name).
Related components
Token budget: 600
Verified against @hex-core/components@1.12.0