TableA responsive table component to show structured data.

A basic example demonstrating the table with rows and sections.

Invoice	Status	Method	Amount
INV001	Paid	$250.00	Credit Card
INV002	Pending	$150.00	PayPal
INV003	Unpaid	$350.00	Bank Transfer
Section 1
INV001	Paid	$250.00	Credit Card
INV002	Pending	$150.00	PayPal
INV003	Unpaid	$350.00	Bank Transfer
Section 2
INV001	Paid	$250.00	Credit Card
INV002	Pending	$150.00	PayPal
INV003	Unpaid	$350.00	Bank Transfer

Installation

Install the component from your command line.

npm install @raystack/apsara

Anatomy

Import all parts and piece them together.

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

Props

Customize the Table appearance with these configuration options. The Table component is composed of several parts, each with their own props:

Table

The root container for the table.

className: Additional CSS class names

Table.Header

Defines the table’s header row.

className: Additional CSS class names

Table.Body

Wraps the table rows inside the body section.

className: Additional CSS class names

Table.Row

Represents a single row in the table.

className: Additional CSS class names

Table.Head

Represents a header cell inside the Table.Header

Table.Cell

Represents a single cell in a row

className: Additional CSS class names

Table.SectionHeader

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

classNames: Map of className with internal components
- row
- cell
colSpan: number of cells of the row. it ensures the section header spans across all columns of the table