Table

import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@hanzo/ui'

Invoices

A caption, a header row, body rows and a footer total.

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
Total			$750.00

export function Invoices() {
  return (
    <Table>
      <TableCaption>A list of your recent invoices.</TableCaption>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
          <TableHead>Method</TableHead>
          <TableHead>Amount</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {invoices.map((row) => (
          <TableRow key={row.invoice}>
            <TableCell>{row.invoice}</TableCell>
            <TableCell>{row.status}</TableCell>
            <TableCell>{row.method}</TableCell>
            <TableCell>{row.amount}</TableCell>
          </TableRow>
        ))}
      </TableBody>
      <TableFooter>
        <TableRow>
          <TableCell colSpan={3}>Total</TableCell>
          <TableCell>$750.00</TableCell>
        </TableRow>
      </TableFooter>
    </Table>
  )
}

Selected row

`selected` marks a row's `data-state` and gives it a hover-toned background.

Invoice	Status
INV001	Paid
INV002	Pending

export function SelectedRow() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Invoice</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>INV001</TableCell>
          <TableCell>Paid</TableCell>
        </TableRow>
        <TableRow selected>
          <TableCell>INV002</TableCell>
          <TableCell>Pending</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Narrow viewport

The table scrolls horizontally as one unit inside a fixed-width frame.

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

export function ScrollsHorizontally() {
  return (
    <YStack width={240} borderWidth={1} borderColor="$borderColor" rounded="$3">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>Invoice</TableHead>
            <TableHead>Status</TableHead>
            <TableHead>Method</TableHead>
            <TableHead>Amount</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {invoices.map((row) => (
            <TableRow key={row.invoice}>
              <TableCell>{row.invoice}</TableCell>
              <TableCell>{row.status}</TableCell>
              <TableCell>{row.method}</TableCell>
              <TableCell>{row.amount}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </YStack>
  )
}

Types

export type TableProps = React.ComponentProps<typeof TableFrame>

export type TableHeaderProps = React.ComponentProps<typeof TableHeaderFrame>

export type TableBodyProps = React.ComponentProps<typeof TableBodyFrame>

export type TableFooterProps = React.ComponentProps<typeof TableFooterFrame>

export type TableRowProps = React.ComponentProps<typeof TableRowFrame> & { selected?: boolean }

export type TableHeadProps = React.ComponentProps<typeof TableHeadFrame>

export type TableCellProps = React.ComponentProps<typeof TableCellFrame> & {
  colSpan?: number
  rowSpan?: number
}

export type TableCaptionProps = React.ComponentProps<typeof TableCaptionFrame>

Exports

TableTableBodyTableCaptionTableCellTableFooterTableHeadTableHeaderTableRowtype TableBodyPropstype TableCaptionPropstype TableCellPropstype TableFooterPropstype TableHeadPropstype TableHeaderPropstype TablePropstype TableRowProps