Table

HTML table with consistent styling

Default

Usage

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

<div className="w-[600px]">
  <Table>
    <TableCaption>A list of recent invoices.</TableCaption>
    <TableHeader>
      <TableRow>
        <TableHead>Invoice</TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Method</TableHead>
        <TableHead className="text-right">Amount</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {invoices.map((inv) => (
        <TableRow key={inv.id}>
          <TableCell className="font-medium">{inv.id}</TableCell>
          <TableCell>{inv.status}</TableCell>
          <TableCell>{inv.method}</TableCell>
          <TableCell className="text-right">{inv.amount}</TableCell>
        </TableRow>
      ))}
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableCell colSpan={3}>Total</TableCell>
        <TableCell className="text-right">$1,750.00</TableCell>
      </TableRow>
    </TableFooter>
  </Table>
</div>

Examples

Default

Default

<div className="w-[600px]">
  <Table>
    <TableCaption>A list of recent invoices.</TableCaption>
    <TableHeader>
      <TableRow>
        <TableHead>Invoice</TableHead>
        <TableHead>Status</TableHead>
        <TableHead>Method</TableHead>
        <TableHead className="text-right">Amount</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {invoices.map((inv) => (
        <TableRow key={inv.id}>
          <TableCell className="font-medium">{inv.id}</TableCell>
          <TableCell>{inv.status}</TableCell>
          <TableCell>{inv.method}</TableCell>
          <TableCell className="text-right">{inv.amount}</TableCell>
        </TableRow>
      ))}
    </TableBody>
    <TableFooter>
      <TableRow>
        <TableCell colSpan={3}>Total</TableCell>
        <TableCell className="text-right">$1,750.00</TableCell>
      </TableRow>
    </TableFooter>
  </Table>
</div>

Simple

Simple

<div className="w-96">
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Name</TableHead>
        <TableHead className="text-right">Value</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Temperature</TableCell>
        <TableCell className="text-right">0.7</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Max Tokens</TableCell>
        <TableCell className="text-right">4096</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Top P</TableCell>
        <TableCell className="text-right">0.9</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</div>

API Reference

Table

Also accepts all props from table.

TableHeader

Also accepts all props from thead.

TableBody

Also accepts all props from tbody.

TableFooter

Also accepts all props from tfoot.

TableRow

Also accepts all props from tr.

TableHead

Also accepts all props from th.

TableCell

Also accepts all props from td.

TableCaption

Also accepts all props from caption.

Data Attributes

Component	data-slot
Table	"table"
TableHeader	"table-header"
TableBody	"table-body"
TableFooter	"table-footer"
TableRow	"table-row"
TableHead	"table-head"
TableCell	"table-cell"
TableCaption	"table-caption"