Data Display · astro-ui · Table

Table

Semantic table with bordered/striped styles, sizes, and scroll.

Table styles a real <table> — head/body/footer compose through slots so you keep full control of rows and cells. Bordered, striped, aligned, and scrollable modes; caption prop for the accessible name.

← All components

Features

Named slots: head / default body / footer
bordered + striped combinations
4 density sizes
Column alignment control
scrollable for wide tables
caption prop = accessible name

Usage

---
import { Table } from "astro-ui";
---

<Table caption="Team members">
  <tr slot="head"><th class="aui-table__head-cell">Name</th></tr>
  <tr><td class="aui-table__cell">Ada</td></tr>
</Table>

Demos

Basic


Name	Role
Ada Lovelace	Developer
Grace Hopper	Engineer

<Table>
  <tr slot="head">
<th class="aui-table__head-cell">Name</th>
<th class="aui-table__head-cell">Role</th>
  </tr>
  <tr>
<td class="aui-table__cell">Ada Lovelace</td>
<td class="aui-table__cell">Developer</td>
  </tr>
</Table>

Bordered + striped


Name	Status
Ada	Active
Grace	Active
Alan	Inactive

<Table bordered striped>
  <tr slot="head">…</tr>
  <tr><td>…</td></tr>
</Table>

API

Props

Prop	Type	Default	Description
`caption`	`string`	`—`	Renders as <caption>.
`bordered`	`boolean`	`false`	Visible borders + rounded corners.
`striped`	`boolean`	`false`	Zebra rows.
`align`	`"start" \| "center" \| "end"`	`"start"`	Column alignment.
`scrollable`	`boolean`	`false`	Horizontal scroll wrapper.
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Row density.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Slots

Slot	Description
`head`	<tr> with <th> cells (use aui-table__head-cell).
`default`	Body rows.
`footer`	Footer/summary rows.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Why do cells need classes?

The wrapper scopes styles; cells belong to your markup, so applying aui-table__cell / aui-table__head-cell opts them into the theme.

Changelog

Version history mentioning Table.

v0.1.0 — 2026-11-11

added

Data display (10): Badge, Avatar, Attachment, Table, Progress, Bubble, Chart, Empty, Tag, Timeline.