Command Menu

Search documentation, components, and switch theme.

Atoms

Table

A table component for displaying data.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/table

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
<Table>
  <TableCaption>Recent transactions.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>ID</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>TXN001</TableCell>
      <TableCell>Completed</TableCell>
      <TableCell>$250.00</TableCell>
    </TableRow>
  </TableBody>
</Table>