Apsara

Documentation

Playground

Icons

Table

A responsive table component to show structured data.

<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

PropTypeDefault
className
string
-

Table.Header Props

Defines the table’s header row.

PropTypeDefault
className
string
-

Table.Body Props

Wraps the table rows inside the body section.

PropTypeDefault
className
string
-

Table.Row Props

Represents a single row in the table.

PropTypeDefault
className
string
-

Table.Cell Props

Represents a single cell in a row

PropTypeDefault
className
string
-

Table.SectionHeader Props

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

PropTypeDefault
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>

Previous

Switch

Next

Tabs

On this page