TableNew

Interaction Type

Hover a row to highlight it; cell text sharpens to full contrast on the active row.

Props

Options you can pass to customize this component.

Installation

How to use

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

export function Demo() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow isBodyRow>
          <TableCell>Ada Lovelace</TableCell>
          <TableCell>Engineer</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

• •Free for personal and commercial use
• •No attribution required
• •Cannot be resold as a standalone product
• •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use