Table

Basic Table

With Caption

Use TableCaption to add a visible description of the table.

With Footer

Use TableFooter for summary rows such as totals.

Installation

npx visor add table

This copies two files into your project:

• components/ui/table/table.tsx — the component
• components/ui/table/table.module.css — the styles

Usage

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

export default function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Alice</TableCell>
          <TableCell>alice@example.com</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

API Reference

TableProps

Sub-components

Accessibility

• Uses native semantic HTML elements (<table>, <thead>, <tbody>, <th>, <td>) for maximum screen reader compatibility.
• TableHead renders <th> with scope="col" by default. Pass scope="row" for row headers.
• Add a TableCaption to give the table a programmatically associated description — this is especially important for data tables.
• For complex tables, use colSpan and rowSpan props on TableHead / TableCell as needed.
• The outer scroll container ensures the table remains accessible on small viewports.