# Table shell

> A data table with its toolbar and pagination.

URL: https://apogee.avaui.dev/docs/sections/table-shell
Last updated: 2026-10-15

A data table with its toolbar and pagination.

Last updated October 15, 2026

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.

```astro
<TableShell heading="Customers" searchable columns={[{ key, label, sortable?, align? }]} rows={[…]} currentPage={1} totalPages={4}>
<Button slot="actions" size="small">Add customer</Button>
</TableShell>
```

## Add

```sh
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

```astro
<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.