TableA responsive table component.

A list of your recent invoices.
Invoice	Status	Method	Amount
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;

<Table>
  <Table.Caption>A list of your recent invoices.</Table.Caption>
  <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.Body>
</Table>