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>

API Reference

Root

Customize the Table appearance with these configuration options.

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

Header

Defines the table’s header row.

Body

Wraps the table rows inside the body section.

Row

Represents a single row in the table.

Cell

Represents a single cell in a row

SectionHeader

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

Examples

Basic Usage

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>

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".
• Use Table.Caption as the first child of Table to give the table an accessible name visible to all users (recommended over aria-label when the description is short and benefits everyone).
• Supports aria-label and aria-labelledby for table identification when a visible caption isn't appropriate.