Base table: Column headers with light background, bottom borders on rows. Default size with comfortable padding.

Striped rows: Alternating row backgrounds improve readability for wide tables or long lists.

Full borders: Borders on all cells. Use when clear cell separation is important.

No borders: Clean, minimal appearance. Use for simple data displays or inside cards.

Hover state: Row highlights on mouse over. Use to indicate that rows are scannable or interactive.

Combine modifiers: Striped + Hover for interactive data tables with improved readability.

Sizes: Small for dense data, default for general use, large for spacious layouts.

Interactive rows: Add .table-row-clickable to <tr> for cursor pointer and hover state. Use .table-row-selected for selected state.

Horizontal scroll: Wrap table in .table-responsive for horizontal scroll on small screens. Negative margins break out of tw-card padding.

Cell utilities: .table-cell-fit for auto-width columns, .table-cell-actions for right-aligned action buttons.

No data: Use .table-empty class for empty state messaging.

While data loads: keep the real <thead> and render .tw-table-skeleton-row rows in the body — one .tw-table-skeleton-bar per cell, sized with a width utility to echo the column's content shape (.tw-table-skeleton-circle for avatar columns). Mark the skeleton body aria-hidden="true", set aria-busy="true" on the wrapper, and announce loading with a tw:sr-only live region.

CELL PATTERNS: 15 standard content types for table cells
COMPOSES: Avatar | Badge | Tag | Progress | Form Switch | Typography Tokens

Recommended HTML patterns for common cell content. Built entirely from existing design system components and Tailwind utilities — no additional CSS classes needed (except .table-cell-check and .table-cell-truncate).

SORT: .table-sortable | .table-sort-icon | .table-sort-asc | .table-sort-desc

Add .table-sortable to <th> for a clickable header. Use .table-sort-asc or .table-sort-desc to indicate the active sort direction. The icon is always fa-arrow-up — CSS handles rotation for descending.

SELECT: .table-cell-check + .form-check-input + .table-row-selected

Use .table-cell-check on <th> and <td> for narrow checkbox columns. Combine with .table-row-selected to highlight checked rows.

Expandable rows: a summary row reveals the .tw-table-row-detail row beneath it via the table-expand controller. The toggle is a real button with aria-expanded + aria-controls; clicking the row also works, but links inside cells stay clickable.

Animated disclosure: wrap the detail cell's content in a .tw-collapsible-content (inside a tw:overflow-hidden div) and the same table-expand controller animates the open instead of snapping — it detects the wrapper and toggles .tw-show rather than the row's hidden attribute. Do not also set hidden here: a hidden row has no height to animate from. Added 2026-08-12, because both screens in the product that expand table rows animate.

TINTED HEADER: .tw-table-tinted-header — one class on the <table>

The product's blue header treatment, as a single class on the table instead of tw:bg-table-header tw:text-primary-700 repeated on every <th> (30 per-cell copies across 10 files before this was promoted). Use it where the header needs to read as a band — reference tables, printable summaries, tables sitting directly on a page ground. A table already inside a .tw-card toolbar usually does not need it.

A row that needs attention: a red tint plus a left accent on the first cell — two carriers, so the row still reads as flagged when the tint is invisible (projector, print, colour-vision deficiency). It survives .tw-table-hover, deepening rather than disappearing on hover. Colour is never the only carrier: pair it with a badge or wording in the row that says what is wrong — a red row nobody can explain is noise. Reserve it for genuine blockers, a handful of rows at most; tint everything and nothing stands out.