Table

Installation

npx shadcn@latest add @uqudo/table

Usage

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

<Table>
  <TableCaption>A list of your recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>INV001</TableCell>
      <TableCell>Paid</TableCell>
    </TableRow>
  </TableBody>
</Table>

Each component is a thin wrapper around the matching HTML element, so anything you know about <table> applies: colSpan, scope, align, event handlers and so on pass straight through.

Table wraps the <table> in a div with data-slot="table-container" and overflow-x-auto, so a wide table scrolls horizontally inside its parent instead of breaking the page layout. Constrain the width of that parent, not the table itself.

API Reference

Every component forwards className (merged through cn()) and all other props of the element it renders.

Table

TableRow

Data attributes