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>
16    </Table.Row>
17    <Table.Row>
18      <Table.Cell>INV002</Table.Cell>
19      <Table.Cell>Pending</Table.Cell>
20      <Table.Cell>$150.00</Table.Cell>
21      <Table.Cell>PayPal</Table.Cell>
22    </Table.Row>
23    <Table.Row>
24      <Table.Cell>INV003</Table.Cell>
25      <Table.Cell>Unpaid</Table.Cell>
26      <Table.Cell>$350.00</Table.Cell>

Usage

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

Table Props

Customize the Table appearance with these configuration options.

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

Prop

Type

Table.Header Props

Defines the table’s header row.

Prop

Type

Table.Body Props

Wraps the table rows inside the body section.

Prop

Type

Table.Row Props

Represents a single row in the table.

Prop

Type

Table.Cell Props

Represents a single cell in a row

Prop

Type

Table.SectionHeader Props

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>
16    </Table.Row>
17    <Table.Row>
18      <Table.Cell>INV001</Table.Cell>
19      <Table.Cell>Paid</Table.Cell>
20      <Table.Cell>$250.00</Table.Cell>
21      <Table.Cell>Credit Card</Table.Cell>
22    </Table.Row>
23  </Table.Body>
24</Table>