Table

A responsive table component to show structured data.

1<Table>
2  <Table.Header>
3    <Table.Row>
4      <Table.Head>Invoice</Table.Head>
5      <Table.Head>Status</Table.Head>
6      <Table.Head>Method</Table.Head>
7      <Table.Head>Amount</Table.Head>
8    </Table.Row>
9  </Table.Header>
10  <Table.Body>
11    <Table.Row>
12      <Table.Cell>INV001</Table.Cell>
13      <Table.Cell>Paid</Table.Cell>
14      <Table.Cell>$250.00</Table.Cell>
15      <Table.Cell>Credit Card</Table.Cell>

Anatomy

Import and assemble the component:

1import { Table } from "@raystack/apsara";
2

3<Table>
4  <Table.Header>
5    <Table.Row>
6      <Table.Cell />
7    </Table.Row>
8  </Table.Header>
9  <Table.Body>
10    <Table.Row>
11      <Table.Cell />
12    </Table.Row>
13  </Table.Body>
14</Table>

Usage

Rows and cells are composed by hand, so a table is whatever markup you give it. Two things go beyond that: rows that respond to a click, and headers that span every column.

Basic usage

Compose a table from its parts: Header and Body wrap Rows, with Head for column titles and Cell for each value. Table renders static markup — for sorting, filtering, or pagination, use DataView.

1<Table>
2  <Table.Header>
3    <Table.Row>
4      <Table.Head>Invoice</Table.Head>
5      <Table.Head>Status</Table.Head>
6      <Table.Head>Method</Table.Head>
7      <Table.Head>Amount</Table.Head>
8    </Table.Row>
9  </Table.Header>
10  <Table.Body>
11    <Table.Row>
12      <Table.Cell>INV001</Table.Cell>
13      <Table.Cell>Paid</Table.Cell>
14      <Table.Cell>$250.00</Table.Cell>
15      <Table.Cell>Credit Card</Table.Cell>

Interactive rows

Set interactive on a Row to make it respond to hover and keyboard focus. Pair it with onClick when the whole row opens something — the row becomes the target, so people don't have to hit a link inside a cell.

1<Table>
2  <Table.Header>
3    <Table.Row>
4      <Table.Head>Invoice</Table.Head>
5      <Table.Head>Status</Table.Head>
6      <Table.Head>Amount</Table.Head>
7    </Table.Row>
8  </Table.Header>
9  <Table.Body>
10    <Table.Row interactive onClick={() => alert("INV001")}>
11      <Table.Cell>INV001</Table.Cell>
12      <Table.Cell>Paid</Table.Cell>
13      <Table.Cell>$250.00</Table.Cell>
14    </Table.Row>
15    <Table.Row interactive onClick={() => alert("INV002")}>

Section headers

Table.SectionHeader groups rows under a label that spans the table. Set colSpan to the number of columns so the label stretches the full width.

1<Table>
2  <Table.Header>
3    <Table.Row>
4      <Table.Head>Name</Table.Head>
5      <Table.Head>Role</Table.Head>
6    </Table.Row>
7  </Table.Header>
8  <Table.Body>
9    <Table.SectionHeader colSpan={2}>Engineering</Table.SectionHeader>
10    <Table.Row>
11      <Table.Cell>Maya Chen</Table.Cell>
12      <Table.Cell>Staff engineer</Table.Cell>
13    </Table.Row>
14    <Table.SectionHeader colSpan={2}>Design</Table.SectionHeader>
15    <Table.Row>

API Reference

Header and body, with rows, cells, and a full-width section header.

Root

Customize the Table appearance with these configuration options.

The Table component is composed of several parts, each with their own props

Prop

Type

Header

Defines the table’s header row.

Prop

Type

Body

Wraps the table rows inside the body section.

Prop

Type

Row

Represents a single row in the table.

Prop

Type

Cell

Represents a single cell in a row

Prop

Type

SectionHeader

Represents a section heading, grouping different rows of the table.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
tableThe <table> element
table-header<thead>
table-body<tbody>
table-row<tr>
table-head<th>
table-cell<td>
table-section-headerSectionHeader's row
table-section-header-cellSectionHeader's cell

Accessibility

  • Uses semantic table, thead, tbody, tr, th, and td elements.
  • Table.Head applies scope="col" by default — override to "row", "colgroup", or "rowgroup" for non-standard layouts. SectionHeader uses scope="colgroup".
  • Supports aria-label and aria-labelledby for table identification.