Table

<Table>
  <Table.Header>
    <Table.Row>
      <Table.Head>Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head>Method</Table.Head>
      <Table.Head>Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>$250.00</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>INV002</Table.Cell>
      <Table.Cell>Pending</Table.Cell>
      <Table.Cell>$150.00</Table.Cell>
      <Table.Cell>PayPal</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>INV003</Table.Cell>
      <Table.Cell>Unpaid</Table.Cell>
      <Table.Cell>$350.00</Table.Cell>
      <Table.Cell>Bank Transfer</Table.Cell>
    </Table.Row>
    <Table.SectionHeader colSpan={4}>Section 1</Table.SectionHeader>
    <Table.Row>
      <Table.Cell>INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>$250.00</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>INV002</Table.Cell>
      <Table.Cell>Pending</Table.Cell>
      <Table.Cell>$150.00</Table.Cell>
      <Table.Cell>PayPal</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>INV003</Table.Cell>
      <Table.Cell>Unpaid</Table.Cell>
      <Table.Cell>$350.00</Table.Cell>
      <Table.Cell>Bank Transfer</Table.Cell>
    </Table.Row>
    <Table.SectionHeader colSpan={4}>Section 2</Table.SectionHeader>
    <Table.Row>
      <Table.Cell>INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>$250.00</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>INV002</Table.Cell>
      <Table.Cell>Pending</Table.Cell>
      <Table.Cell>$150.00</Table.Cell>
      <Table.Cell>PayPal</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>INV003</Table.Cell>
      <Table.Cell>Unpaid</Table.Cell>
      <Table.Cell>$350.00</Table.Cell>
      <Table.Cell>Bank Transfer</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Usage

import { 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	Default
`className`	`string`	-

Table.Header Props

Defines the table’s header row.

Prop	Type	Default
`className`	`string`	-

Table.Body Props

Wraps the table rows inside the body section.

Prop	Type	Default
`className`	`string`	-

Table.Row Props

Represents a single row in the table.

Prop	Type	Default
`className`	`string`	-

Table.Cell Props

Represents a single cell in a row

Prop	Type	Default
`className`	`string`	-

Table.SectionHeader Props

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

Prop	Type	Default
`classNames`	`{ row?: string \| undefined; cell?: string \| undefined; }`	-
`colSpan`	`number`	-

Examples

Basic Usage

<Table>
  <Table.Header>
    <Table.Row>
      <Table.Head>Invoice</Table.Head>
      <Table.Head>Status</Table.Head>
      <Table.Head>Method</Table.Head>
      <Table.Head>Amount</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>$250.00</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>INV001</Table.Cell>
      <Table.Cell>Paid</Table.Cell>
      <Table.Cell>$250.00</Table.Cell>
      <Table.Cell>Credit Card</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Table

On this page