Table

v1.1.2

Documentation Under Review

The Product Table component provides a fully styled, accessible table solution optimized for product/application experiences. Built with semantic HTML and CVA with support for custom brand styling via className overrides.

Installation

Install the Table component from the Catalyst component library:

npm install '@pmi/catalyst-table'

Examples

Basic Table

A complete table with header, body, and footer displaying invoice data.

Custom Brand Styling

Apply custom brand colors using CVA variants and className overrides.

Table Header Variants (Custom Styled)

Demonstration of transparent and colored headers with custom brand colors.

Table Cell Variants (Custom Styled)

Demonstration of transparent and colored cells with custom brand colors.

Table Footer Variants (Custom Styled)

Demonstration of transparent and colored footers with custom brand colors.

API Reference

TableRoot

The root table container element.

Default Styles:

• Border: border rounded-xl
• Background: bg-pmi-neutral-50, dark:bg-pmi-off-black-800
• Border Color: border-pmi-neutral-100, dark:border-pmi-off-black-700

TableHeader

Table header section (<thead>).

TableBody

Table body section (<tbody>).

Default Styles:

• Group: group with data-section="tbody" for styling context

TableFooter

Table footer section (<tfoot>).

Default Styles:

• Group: group with data-section="tfoot" for styling context

TableRow

Table row element (<tr>).

TableHead

Table header cell (<th>).

Default Styles:

• Typography: text-base font-medium
• Color: text-pmi-off-black-600, dark:text-pmi-off-black-200
• Padding: px-4 py-0
• Height: h-[40px]
• Border: border-r border-b
• Transparent: border-pmi-neutral-100
• Colored: bg-pmi-neutral-100 border-pmi-neutral-200

TableCell

Table cell element (<td>).

Default Styles:

• Typography: text-base (footer: font-medium)
• Color: text-pmi-off-black-800, dark:text-white
• Padding: px-4 py-0
• Height: h-[40px]
• Border: border-r border-b
• Body Transparent: border-pmi-neutral-100
• Body Colored: bg-white border-pmi-neutral-100
• Footer Colored: bg-pmi-neutral-100 border-pmi-neutral-200

TableCaption

Table caption element (<caption>).

Design Tokens

The Product Table uses Tailwind design tokens with full customization support:

• Default Table Background: bg-pmi-neutral-50, dark:bg-pmi-off-black-800
• Default Table Border: border-pmi-neutral-100, dark:border-pmi-off-black-700
• Default Header Text: text-pmi-off-black-600, dark:text-pmi-off-black-200
• Default Cell Text: text-pmi-off-black-800, dark:text-white
• Custom Colors: Any Tailwind color via className overrides
• Typography: text-base font-medium (headers), text-base (cells)
• Cell Height: h-[40px] (40px)
• Cell Padding: px-4 (16px horizontal)

Custom Styling Pattern

The Product variant supports extensive customization via CVA:

import { cva } from 'class-variance-authority'

const tableHeadStyles = cva('text-neutral-600 dark:text-neutral-200', {
  variants: {
    coloration: {
      transparent: 'border-r-neutral-200 border-b-neutral-200 dark:border-r-neutral-700 dark:border-b-neutral-700',
      colored: 'bg-neutral-200 dark:bg-neutral-950 border-r-neutral-300 border-b-neutral-300',
    },
  },
})

const tableCellStyles = cva('text-neutral-800 dark:text-neutral-50', {
  variants: {
    coloration: {
      transparent: 'border-r-neutral-200 border-b-neutral-200',
      colored: 'group-data-[section=tbody]:bg-white dark:group-data-[section=tbody]:bg-neutral-800',
    },
  },
})

// Apply to table
<TableRoot className="bg-neutral-100 border-neutral-200">
  <TableHead className={tableHeadStyles({ coloration: 'colored' })}>
    Header
  </TableHead>
  <TableCell className={tableCellStyles({ coloration: 'colored' })}>
    Cell
  </TableCell>
</TableRoot>

Accessibility

The Product Table component follows WCAG 2.1 AA accessibility standards:

• Semantic HTML: Proper <table>, <thead>, <tbody>, <tfoot> structure
• Table Headers:
  • Use <th> with scope attribute
  • scope="col" for column headers
  • scope="row" for row headers
• Table Caption:
  • Always provide <TableCaption>
  • Use className="sr-only" for screen reader only
  • Describes table purpose and content
• Color Contrast: Default colors meet 4.5:1 contrast ratio minimum
• Custom Theme Testing: Validate custom colors meet WCAG AA standards
• Responsive Tables: Consider horizontal scrolling for mobile
• Keyboard Navigation: Native table navigation support
• Screen Reader Support:
  • Headers properly associated with cells
  • Caption announces table purpose
  • Data relationships clear

Best Practices

• Always include TableCaption for screen readers
• Use scope attribute on TableHead for accessibility
• Use coloration="colored" for zebra striping (alternating rows)
• Set textAlign="right" for numeric columns
• Use colSpan and rowSpan for merged cells
• Provide clear, descriptive headers
• Use TableFooter for totals and summaries
• Consider ScrollArea for tables with many rows
• Test with screen readers
• When using custom CVA styles, verify color contrast meets WCAG AA (4.5:1)
• Test custom brand colors in both light and dark modes

Differences from Marketing Table

The Product Table variant differs from the Marketing Table in the following ways:

Related Components

• Table - Marketing-focused variant
• ScrollArea - For scrollable tables
• Pagination - For paginated tables
• Badge - For status indicators in cells

See Also

• MDN Table Element - Table element reference
• WCAG Table Guidelines - Accessibility best practices
• Table UX Patterns - Nielsen Norman Group
• CVA Documentation - Class variance authority
• WCAG Color Contrast - Contrast requirements