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

The Tabs component provides a way to organize content into multiple sections, displaying one section at a time.

import { Table } from  @raystack/apsara/v1;
 
  <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 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

Defines the table’s header row.

Prop	Type	Default
`className`	`string`	-

Table.Body

Wraps the table rows inside the body section.

Prop	Type	Default
`className`	`string`	-

Table.Row

Represents a single row in the table.

Prop	Type	Default
`className`	`string`	-

Table.Cell

Represents a single cell in a row

Prop	Type	Default
`className`	`string`	-

Table.SectionHeader

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

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