Table

A semantic table for rows and columns.

Overview

Table renders a native table. It sets spacing, type, borders, and a horizontal scroll wrapper. It does not sort, filter, paginate, or store column state.

TableHead is a th. TableCaption is a caption. The other parts map to thead, tbody, tfoot, tr, and td.

Preview

Name	Role
Ada Lovelace	Writer
Grace Hopper	Scientist

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add table

Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

export function Team() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Ada Lovelace</TableCell>
          <TableCell>Writer</TableCell>
        </TableRow>
        <TableRow>
          <TableCell>Grace Hopper</TableCell>
          <TableCell>Scientist</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Examples

Basic

Headers name the columns. Cells stay in the body.

Name	Role
Ada Lovelace	Writer
Grace Hopper	Scientist

Caption

TableCaption is a native caption and names the table.

Team
Name	Role
Ada Lovelace	Writer
Grace Hopper	Scientist

Footer

TableFooter is a native tfoot for a summary row.

Name	Role
Ada Lovelace	Writer
Grace Hopper	Scientist
2 people

Resizable columns

Add resize: horizontal and overflow: hidden to TableHead to let the user drag column widths.

Name	Role	Department
Ada Lovelace	Writer	Computing
Grace Hopper	Scientist	Engineering
Alan Turing	Mathematician	Computing

Responsive

A wide table scrolls inside its wrapper. The page itself does not scroll sideways.

Name	Role
Ada Lovelace	Writer
Grace Hopper	Scientist

In practice

A team directory pairs Avatar, Badge status, search, and a row menu. The table stays semantic; the page owns filtering and actions.

Team members

People with access to this workspace.

User	Role	Status
AS Aarav Sharma aarav@example.com	Admin	Active
PS Priya Singh priya@example.com	Editor	Pending
AM Aarav Mehta aarav.mehta@example.com	Viewer	Disabled

API

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`className`	string	—	Merged onto the underlying table, row, cell, or caption.
`children`	ReactNode	—	The table sections, rows, and cells.

Accessibility

The parts are native table elements. The component does not add ARIA roles.

Give each column a TableHead.
Use TableCaption when the table needs an accessible name.
A wide table scrolls in its wrapper.