Table

Table displays structured data in rows and columns. Use for data that benefits from comparison across fields.

Code

<Table>
  <TableCaption>Recent product orders.</TableCaption>

  <TableHeader>
    <TableRow>
      <TableHead>Order</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Grower</TableHead>
      <TableHead className="tw:text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>

  <TableBody>
    <TableRow>
      <TableCell className="tw:font-medium">ORD-1042</TableCell>
      <TableCell>
        <Badge variant="default">Confirmed</Badge>
      </TableCell>
      <TableCell>Green Valley Farm</TableCell>
      <TableCell className="tw:text-right">$12,450.00</TableCell>
    </TableRow>

    <TableRow>
      <TableCell className="tw:font-medium">ORD-1043</TableCell>
      <TableCell>
        <Badge variant="secondary">Pending</Badge>
      </TableCell>
      <TableCell>North Ridge Acres</TableCell>
      <TableCell className="tw:text-right">$8,320.00</TableCell>
    </TableRow>
  </TableBody>

  <TableFooter>
    <TableRow>
      <TableCell colSpan={3}>Total</TableCell>
      <TableCell className="tw:text-right">$20,770.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

API

Table

No documented props

TableBody

No documented props

TableCaption

No documented props

TableCell

No documented props

TableFooter

No documented props

TableHead

No documented props

TableHeader

No documented props

TableRow

No documented props