Table

The Table component provides a structured way to present data in rows and columns. It's designed for displaying datasets, statistics, lists, and any information that benefits from a tabular layout.

Table wraps content in a scrollable container for responsive behavior on small screens.

Features

Responsive horizontal scrolling
Header, body, and footer sections
Caption support for table descriptions
Hover states on rows
Selected row state support
Semantic HTML structure

Usage

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from '@loke/design-system/table';

export default function Example() {
  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>Name</TableHead>
          <TableHead>Email</TableHead>
          <TableHead>Role</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        <TableRow>
          <TableCell>John Doe</TableCell>
          <TableCell>john@example.com</TableCell>
          <TableCell>Admin</TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}

Tips:

Use TableHeader for column headers.
Use TableFooter for summary rows.
Use TableCaption to describe the table's purpose.

Components

Table

The root wrapper component that provides scrolling behavior.

TableHeader

Container for table header rows (typically column names).

TableBody

Container for the main data rows.

TableFooter

Container for footer rows (typically summaries or totals).

TableRow

A single row in the table. Supports data-state="selected" for selection.

TableHead

A header cell (<th>) for column labels.

TableCell

A data cell (<td>) for row content.

TableCaption

A caption element describing the table.

Examples

Basic table

Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00
INV005	Paid	PayPal	$550.00

<Table>
  <TableHeader>
    <TableRow>
      <TableHead className="w-[100px]">Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead>Method</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell className="font-medium">INV001</TableCell>
      <TableCell>Paid</TableCell>
      <TableCell>Credit Card</TableCell>
      <TableCell className="text-right">$250.00</TableCell>
    </TableRow>
    {/* More rows... */}
  </TableBody>
</Table>

With caption

A list of your recent invoices.
Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00
INV003	Unpaid	$350.00

<Table>
  <TableCaption>A list of recent invoices.</TableCaption>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {/* Rows... */}
  </TableBody>
</Table>

Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00
INV003	Unpaid	$350.00
INV004	Paid	$450.00
INV005	Paid	$550.00
Total		$1750.00

<Table>
  <TableHeader>
    <TableRow>
      <TableHead>Invoice</TableHead>
      <TableHead>Status</TableHead>
      <TableHead className="text-right">Amount</TableHead>
    </TableRow>
  </TableHeader>
  <TableBody>
    {/* Rows... */}
  </TableBody>
  <TableFooter>
    <TableRow>
      <TableCell colSpan={2}>Total</TableCell>
      <TableCell className="text-right">$2,500.00</TableCell>
    </TableRow>
  </TableFooter>
</Table>

Selectable rows

Invoice	Status	Amount
INV001	Paid	$250.00
INV002	Pending	$150.00
INV003	Unpaid	$350.00
INV004	Paid	$450.00
INV005	Paid	$550.00

<TableRow data-state={selected ? "selected" : undefined}>
  <TableCell>
    <Checkbox checked={selected} onCheckedChange={setSelected} />
  </TableCell>
  <TableCell>Content</TableCell>
</TableRow>

Accessibility

Uses semantic HTML table elements (table, thead, tbody, tfoot, tr, th, td).
Caption provides context for screen readers.
Header cells are properly associated with data cells.
Hover and selected states have visible indicators.
Supports keyboard navigation when combined with interactive elements.

Best practices

Always provide column headers with TableHead.
Use TableCaption to describe the table's content.
Keep tables simple—avoid excessive columns.
Consider pagination or virtualization for large datasets.
Use right-alignment for numeric data.
Ensure sufficient contrast for text readability.
Consider alternative views (cards, lists) for mobile.

Table

Table

Features

Usage

Components

Table

TableHeader

TableBody

TableFooter

TableRow

TableHead

TableCell

TableCaption

Examples

Basic table

With caption

With footer

Selectable rows

Accessibility

Best practices

On this page