Table

Default rows — three users with a name, status, role and edit action.

modifiers="pf-m-plain" — no borders or hover treatment, with a table <caption>.

Header cells carry info tooltips and popovers via pf-v6-c-table__column-help; plus a centered column, secondary-row backgrounds and a colspan cell.

compact=true — denser padding for info-heavy tables.

compact=true expandable=true — dense rows that still expand to a detail row.

striped=true — alternating row background for easier horizontal scanning.

With striped=true expandable=true PF stripes whole odd <tbody> groups instead of odd rows.

pf-m-striped / pf-m-striped-even set per tbody keep the stripe pattern continuous across body groups.

pf-m-striped on individual rows for full manual control.

borderless=true — removes row dividers; pairs well with striped on dashboards.

borderless=true compact=true — the densest, quietest layout.

borderless=true expandable=true — row expansion without row dividers.

Borderless with per-cell compound expansion toggles.

Column headers post to /api/htmx/table-sort and swap the table; no client-side sorting logic.

A toolbar select drives the sort instead of clickable headers — each choice hits /api/htmx/table-sort-custom and swaps the server-sorted table.

Per-row toggle reveals a detail row beneath; state lives in x-data on the <tbody>.

pf-m-animate-expand fades and slides the detail row; rows stay rendered so CSS can animate.

pf-m-width-30/pf-m-width-20 on header cells fix column proportions while rows expand.

The expanded detail row hosts a compact, borderless inner table in a pf-m-no-background wrapper.

A leading pf-v6-c-table__check control column with per-row checkboxes and a select-all in the header.

Live tri-state select-all: checked when every row is selected, indeterminate when only some are.

Single-row selection — radio inputs sharing one name in the pf-v6-c-table__check column, no select-all.

A trailing pf-v6-c-table__action cell with a kebab overflow menu (Alpine); the last row shows the inline-action alternative.

A pf-v6-c-overflow-menu action cell: a button group on large screens that collapses to a kebab below lg.

A single full-width body cell (colspan) holding the empty-state component for a table with no rows.

pf-m-width-{pct} pins a column's width; pf-m-truncate, pf-m-fit-content and pf-m-nowrap control cell text overflow.

Per-cell text behavior: pf-m-truncate, pf-m-break-word, pf-m-wrap, pf-m-fit-content and pf-m-nowrap.

Wrapping cell content in pf-v6-c-table__text keeps text modifiers working in the grid layout and composes with PF layouts.

No modifiers on purpose — a long string shrinks adjacent columns, the failure mode the width and text modifiers fix.

pf-m-width-40 caps the column; the second body adds pf-m-truncate on the cell.

Columns show and hide per breakpoint with pf-m-hidden(-on-*) / pf-m-visible-on-* — resize to see them swap.

A leading pf-v6-c-table__favorite star column; pf-m-favorited colours the star (Alpine toggles it).

The favorite column header is a live sort control — clicking it reorders rows by their current favorited state.

Clicking (or Enter/Space on) a row selects it — pf-m-selected on the grid-variant table highlights the current row.

Clicking a row selects its tbody; the toggle expands the detail row without changing the selection.

pf-m-nested-column-header groups sub-columns (pf-v6-c-table__subhead) under a shared parent header via rowspan/colspan.

Control columns span both header rows (rowspan=2) while grouped columns keep their subheads; rows expand as usual.

Both nested header rows pin while the body scrolls inside the bounded wrapper.

Each row toggles between a read view and inline inputs; Save commits the draft, Cancel discards it (Alpine). The action cell uses pf-v6-c-table__inline-edit-action.

Each cell is its own toggle (pf-v6-c-table__compound-expansion-toggle); opening one expands a detail row scoped to that cell, one per row at a time.

A compound toggle cell whose detail row contains a nested compact table.

pf-m-animate-expand with per-cell rows; switching between open cells is instant via pf-m-no-animate-expand.

In a scroll wrapper, pf-m-sticky-header pins the header and pf-v6-c-table__sticky-cell pf-m-left pins the first column — scroll the table to see both.

pf-m-sticky-footer pins the totals row to the bottom of the scroll container.

Two left columns pin while scrolling right; the second offsets its inset and carries pf-m-border-right.

The trailing column pins to the right edge with pf-m-border-left marking the boundary.

pf-m-tree-view with role="treegrid"; parent rows toggle their children, indented automatically by aria-level.

Row checkboxes with a live cascade: parents check their children and show indeterminate for partial selections.

Adds a tree-view-icon per row — folders for parents (open while expanded) and leaves for children.

pf-m-no-inset removes the indent; all rows are leaves so the role stays grid.

Drag a row by its grip to reorder; the dragged row shows pf-m-ghost-row and drops into place by the pointer's midpoint.

A summary row in pf-v6-c-table__tfoot (PatternFly 6.6+) — the th uses scope="row" so assistive tech announces the total's label.

Cell alignment defaults to baseline, which drifts next to images — the first cell tops-aligns a 36px brand icon against the text block with pf-m-align-self-flex-start inside a nowrap flex. Sort headers reorder the rows live; the ? buttons open column-help popovers.

The drawer panel declares container-type: inline-size with container-name: pf-v6-contain-table, so its pf-m-grid-md table switches between stacked and grid layout from the panel's width; the main table (pf-m-grid-lg) responds to the viewport. Close and re-open the panel with the toolbar's Toggle drawer button.

The base/stuck sticky-header pattern inside an offset scroll container.

Sticky header in a scrollable region, sort headers and row selection — assembled from the slot-mode shell plus the table-sort-th, table-check-th and table-check-td includes. No Java model: the sort headers render the states; wire their attrs to HTMX to make them live.

Expandable rows from table-tbody-expandable + table-toggle-td + table-expandable-tr, each tbody owning its own Alpine open state.

A treegrid built from table-tree-tr bricks; the tbody owns the expansion booleans that toggleVar and showExpr reference.