Table

A collection of components for displaying data in a tabular format.

Usage


import { Table } from "@rhinolabs/ui"
 
export default function TableDemo() {
  return (
    <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 className="text-right">Amount</Table.Head>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        <Table.Row>
          <Table.Cell>INV001</Table.Cell>
          <Table.Cell>Paid</Table.Cell>
          <Table.Cell>Credit Card</Table.Cell>
          <Table.Cell className="text-right">$250.00</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
  )
}

Examples

Basic Table

A simple data table with headers.


<Table>
  <Table.Header>
    <Table.Row>
      <Table.Head>Name</Table.Head>
      <Table.Head>Email</Table.Head>
      <Table.Head>Role</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>John Doe</Table.Cell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>Admin</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Jane Smith</Table.Cell>
      <Table.Cell>[email protected]</Table.Cell>
      <Table.Cell>User</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

With Footer

Table with summary footer.


<Table>
  <Table.Header>
    <Table.Row>
      <Table.Head>Item</Table.Head>
      <Table.Head>Quantity</Table.Head>
      <Table.Head className="text-right">Price</Table.Head>
    </Table.Row>
  </Table.Header>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Product A</Table.Cell>
      <Table.Cell>2</Table.Cell>
      <Table.Cell className="text-right">$100.00</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Product B</Table.Cell>
      <Table.Cell>1</Table.Cell>
      <Table.Cell className="text-right">$75.00</Table.Cell>
    </Table.Row>
  </Table.Body>
  <Table.Footer>
    <Table.Row>
      <Table.Cell colSpan={2}>Total</Table.Cell>
      <Table.Cell className="text-right">$175.00</Table.Cell>
    </Table.Row>
  </Table.Footer>
</Table>

Props

All table components accept their respective HTML table element attributes.

Table

Prop	Type	Description
`className`	`string`	Additional CSS classes

TableRow

Prop	Type	Description
`data-state`	`"selected"`	Selected state styling

Design Considerations

Use consistent column widths
Align content appropriately
Handle responsive layouts
Show loading states
Consider empty states

Accessibility

Uses semantic markup
Provides column headers
Maintains data relationships
Supports keyboard navigation
Handles screen readers