Live demo — this example is server-driven; run the showcase locally for the interactive version.
Table
Use Table straight from a Qute template — parameters and slots instead of Java builders. This reference is generated
from the runtime template sources: each template documents its parameters and slots in the header comment shown
beneath its include line.
Row-selection cell (pure Qute) for the table component's slot mode.
Required: one of ariaLabel / ariaLabelledby — accessible name for the checkbox.
Optional: name — input name (e.g. "checkrow-1"; radios in one table share a name);
radio — render a radio instead of a checkbox (single-select tables);
checked — initially selected;
modelExpr — x-model an Alpine boolean instead of plain checked state.
Select-all header cell (pure Qute) for the table component's slot mode: checking it drives every tbody row checkbox
(and fires their change events), exactly like the model-driven header.
Optional: ariaLabel (default "Select all
rows").
Expandable detail row (pure Qute) for the table component's slot mode. Rendered inside a
table-tbody-expandable, after the data row whose table-toggle-td flips the shared expr.
Required: colspan — data columns the detail cell spans.
Optional: pad — leading empty cells before the detail cell (default 1 for the toggle column;
use 2 when a selection column follows the toggle); expr — the Alpine boolean
(default 'open'); noPadding — pf-m-no-padding on the detail cell; noBackground —
pf-m-no-background on the detail content.
Slot: {#detail} — the expanded content.
Sortable column header (pure Qute) for the table component's slot mode.
Required: label.
Optional: sort — 'asc' | 'desc' (omit for an unsorted column: aria-sort="none", double-arrow icon);
attrs — verbatim attributes on the button wiring the actual sort action, e.g.
attrs='hx-get="/api/htmx/table-sort?col=name&dir=desc" hx-target="#my-table" hx-swap="outerHTML"'
or an Alpine @click. The header renders the state; sorting stays server-driven (HTMX)
or consumer-wired (Alpine).
Expandable row group (pure Qute) for the table component's slot mode: one tbody per expandable row, owning the Alpine
open state. Put the data row (with a table-toggle-td) and its table-expandable-tr inside the {#rows} slot; all three
default to the same 'open' expr.
Optional: expr — the Alpine boolean name (default 'open'); expanded — initially
open (default false).
Expand-toggle cell (pure Qute) for the table component's slot mode: the chevron button flipping an Alpine boolean.
Pair with table-tbody-expandable + table-expandable-tr sharing the same expr.
Required: ariaLabel.
Optional:
expr — the Alpine boolean to toggle (default 'open').
Tree-table row (pure Qute) for the table component's slot mode (treeView=true shell, treeGrid=true
for parent-bearing trees). The consumer owns the Alpine expansion state — put it on the tbody
(x-data="{ g1: false, ... }") and reference the booleans from toggleVar / showExpr.
Required: name — the title-cell text.
Optional: level, setSize, posInSet — aria treegrid bookkeeping (pass all three on treeGrid trees;
omit on flat trees, matching the model); toggleVar — Alpine boolean for this parent's
expansion (its presence marks the row as a parent and renders the toggle);
showExpr — Alpine visibility expression for child rows (e.g. 'g1' or 'g1 && g2');
toggleAriaLabel (default "Expand row {name}"); icon — fa-* glyph classes for the row icon
(e.g. 'fa-folder'); iconExpanded — swap glyph while expanded (parents only).
Slot: {#dataCells} — the remaining plain <td> data cells.