Data Display

Table

A responsive table component for displaying structured data.

Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00
INV-003	Paid	Bank transfer	$350.00
INV-004	Failed	Credit Card	$450.00
Total			$1,200.00

Installation

npx benflux-ui add table

Usage

import {
  Table, TableBody, TableCaption, TableCell,
  TableFooter, TableHead, TableHeader, TableRow,
} from "@/components/ui/table"

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {invoices.map((invoice) => (
      <TableRow key={invoice.id}>
        <TableCell className="font-medium">{invoice.id}</TableCell>
        <TableCell>{invoice.status}</TableCell>
        <TableCell className="text-right">{invoice.amount}</TableCell>
      </TableRow>
    ))}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total</TableCell>
      <TableCell className="text-right">$1,200.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>