Table

Tabular data display component for organizing and presenting data in rows and columns.

Import

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

Basic Usage

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Name</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Date</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>Gold Membership</TableCell>
      <TableCell>Active</TableCell>
      <TableCell>2023-05-15</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Silver Membership</TableCell>
      <TableCell>Inactive</TableCell>
      <TableCell>2023-04-22</TableCell>
    </TableRow>
  </TableBody>
</Table>

Name	Status	Date
Gold Membership	Active	2023-05-15
Silver Membership	Inactive	2023-04-22

Usage Guidelines

When to use

Use tables to display structured data in rows and columns
Use tables when users need to compare data across multiple items
Use tables for data that benefits from a grid layout

When not to use

Don't use tables for layout purposes; use CSS grid or flexbox instead
Avoid tables for small screens where horizontal scrolling would be required
Consider alternative visualizations for complex data relationships

Accessibility

The Table component follows WAI-ARIA guidelines for tables:

Uses semantic HTML table elements for proper screen reader support
Includes appropriate scope attributes on table headers
Provides caption support for table descriptions
Maintains proper keyboard navigation