Table shell

A data table with its toolbar and pagination.

Last updated

Uses JavaScript

DataGrid adds a small island for column sorting and row selection.

Without JS: Sort buttons are hidden and the header shows plain labels; search still submits as a GET form.

Customers

Accounts and their plans.

PlanStatus
OakmerePro24Active
LarkspurAgency120Active
FernhillStarter3Trial
BrightwellPro18Past due
HalcyonAgency64Active
Show code
<TableShell heading="Customers" searchable columns={[{ key, label, sortable?, align? }]} rows={[…]} currentPage={1} totalPages={4}>
<Button slot="actions" size="small">Add customer</Button>
</TableShell>

Add

npx @ava-ui/apogee add table-shell

API

Prop Type Default Category Description
heading, description string — content heading required.
searchable, searchLabel boolean, string false, 'Search' content A GET form that submits ?q=.
columns, rows, selectable content Passed to DataGrid.
headerStyle 'normal' | 'caps' 'normal' layout Passed to DataGrid.
currentPage, totalPages number — content Shows Pagination when both are set and there is more than one page.
actions slot content Toolbar buttons.
layout 'simple' 'simple' layout
spacing, headingLevel, id spacing is small layout

Variants

Selectable, caps header

PlanStatus
OakmerePro24Active
LarkspurAgency120Active
FernhillStarter3Trial
BrightwellPro18Past due
HalcyonAgency64Active
Show code
<TableShell heading="Selectable, caps header" selectable headerStyle="caps" columns={…} rows={…} />

Accessibility

  • Labelled region; the search is a role="search" form with a visually hidden label; the grid and pagination keep their own semantics.