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>

API Reference

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

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
  • Supports aria-label for table identification
  • Header cells use scope attribute for row/column association