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>john@example.com</Table.Cell>
      <Table.Cell>Admin</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Jane Smith</Table.Cell>
      <Table.Cell>jane@example.com</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