Table

React Table components are used to display structured data in rows and columns. They are commonly used for lists, reports, dashboards, admin panels, and data-heavy interfaces where content needs to be easy to scan and compare.

This Table component is built with React and styled using Tailwind CSS. It provides composable table parts, responsive horizontal scrolling, and flexible styling while keeping native table semantics.

Installation

npx @tailgrids/cli add table

Anatomy

Import the table parts and compose them to build the layout.

import {
  TableRoot,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell
} from "@/registry/core/table";

export default TablePreview = () => (
  <TableRoot>
    <TableHeader>
      <TableRow>
        <TableHead />
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableCell />
      </TableRow>
    </TableBody>
  </TableRoot>
);

Usage

import {
  TableRoot,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell
} from "@/registry/core/table";

export default function TableExample() {
  return (
    <TableRoot>
      <TableHeader>
        <TableRow>
          <TableHead>Header</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>Cell</TableCell>
        </TableRow>
      </TableBody>
    </TableRoot>
  );
}

Examples

Full Bleed

The fullBleed prop removes rounded corners and side borders, making the table span the full width of its container. This is useful for edge-to-edge layouts.

Recent Orders

A dashboard widget style table for displaying recent orders with product thumbnails and "See All" navigation.

PreviewCode

Copy to clipboard

Recent Orders

See All

Products	Category	Date	Price	Status
Macbook pro 13” 2 Variants	Laptop	Nov 23, 01:00 PM	$2399.00	Delivered
Apple Watch Ultra 1 Variants	Watch	Nov 22, 09:00 PM	$879.00	Pending
iPhone 15 Pro Max 2 Variants	Smart Phone	Oct 12, 03:54 PM	$1869.00	Delivered
iPad Pro 3rd Gen 2 Variants	Electronics	Sep 09, 02:00 AM	$1699.00	Canceled
Airpods Pro 2nd Gen 1 Variants	Accessories	Feb 35, 08:00 PM	$240.00	Delivered

Order History

An order history table that displays order status with color-coded badges and includes a sorting interface.

Transactions

A financial transactions table including category icons, price formatting, and status indicators.

API Reference

TableRoot

Wraps the entire table and manages layout and overflow behavior. Extends native table element props.

TableHeader

The table header container. Extends thead element props.

TableBody

The table body container. Extends tbody element props.

TableHead

A table header cell. Extends th element props.

TableRow

A table row. Extends tr element props.

TableCell

A table data cell. Extends td element props.

Accessibility

• Uses native table elements (table, thead, tbody, tr, th, td)
• Header cells use <th> for proper screen reader context
• Left-aligned text for better readability
• Horizontal scroll container for responsive behavior
• Supports all standard table HTML attributes