Table

The Table component is a modern, customizable table component with styled elements for headers, rows, and cells. It provides basic table functionality with additional styles and features.

Usage

Basic Table

Here's a basic table setup:

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Age</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John</Table.Cell>
      <Table.Cell>30</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Mary</Table.Cell>
      <Table.Cell>25</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

Table with Row Headers

For tables that need row headers:

<Table.Root>
  <Table.Header>
    <Table.Row>
      <Table.ColumnHeaderCell></Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Jan</Table.ColumnHeaderCell>
      <Table.ColumnHeaderCell>Feb</Table.ColumnHeaderCell>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.RowHeaderCell>Revenue</Table.RowHeaderCell>
      <Table.Cell>$10,000</Table.Cell>
      <Table.Cell>$15,000</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.RowHeaderCell>Expenses</Table.RowHeaderCell>
      <Table.Cell>$7,000</Table.Cell>
      <Table.Cell>$6,500</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table.Root>

API

Props