# Basic

> Caption, header, and a footer total row.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/table-01).

- Page, with a live preview: https://shadcn.exchange/r/flx/table-01
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/table-01-light-6dd155079555b8bb.png
- Registry item: https://ui.flexnative.com/r/table-01.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/table-01.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `table`

## Files

### `registry/patterns/table/table-01.tsx`

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

const invoices = [
  { id: 'INV-001', method: 'Credit Card', status: 'Paid', amount: '$1,200.00' },
  { id: 'INV-002', method: 'PayPal', status: 'Pending', amount: '$640.00' },
  { id: 'INV-003', method: 'Bank Transfer', status: 'Paid', amount: '$320.00' },
  {
    id: 'INV-004',
    method: 'Credit Card',
    status: 'Overdue',
    amount: '$980.00',
  },
]

export function Table01() {
  return (
    <div className="w-full max-w-2xl">
      <Table>
        <TableCaption>A list of your recent invoices.</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead className="w-28">Invoice</TableHead>
            <TableHead>Method</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.method}</TableCell>
              <TableCell className="text-muted-foreground">
                {invoice.status}
              </TableCell>
              <TableCell className="text-right tabular-nums">
                {invoice.amount}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
        <TableFooter>
          <TableRow>
            <TableCell colSpan={3}>Total</TableCell>
            <TableCell className="text-right tabular-nums">$3,140.00</TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </div>
  )
}
```