Live demo — this example is server-driven; run the showcase locally for the interactive version.

Data list

Use Data list 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.

Templates

data-list

{#include components/data-display/data-list /}
Data list — PatternFly v6. 
 Two modes.
   Model-driven: pass list=<org.sitenetsoft.quarkus.pha.model.DataList> (built via DataList.builder()) —
     rows, cells, checkboxes, expand toggles, actions and click-selection all render from the model.
   Slot shell: omit list and compose data-list-item includes in the main block. 
 Shell params (all optional):
     id        — DOM id on the root.
     ariaLabel — labels the list for AT.
     compact   — pf-m-compact.   plain — pf-m-plain.
     gridBreakpoint — grid modifier suffix, e.g. "sm" renders pf-m-grid-sm.
     modifiers — extra pf-m-* classes (e.g. pf-m-grid / pf-m-grid-none).
     attrs     — raw attribute passthrough on the root.

data-list-cell

{#include components/data-display/data-list-cell /}
Data list cell — repeat per column. Main-block content. 
 Optional: id — DOM id on the cell.
             modifiers — extra pf-m-* classes, e.g. "pf-m-flex-2", "pf-m-no-fill",
             "pf-m-truncate", "pf-m-break-word", "pf-m-nowrap".

data-list-expandable-content

{#include components/data-display/data-list-expandable-content /}
Data list expandable content — revealed by the item's `open` state (data-list-item expandable=true). Main-block
content inside the body wrapper.

data-list-item

{#include components/data-display/data-list-item /}
Data list item — one row (plus optional expandable content). Main-block content:
   a data-list-item-row include, then data-list-expandable-content when expandable. 
 Optional params:
     expandable   — the item owns `open` Alpine state and a bound pf-m-expanded class;
                    pair with data-list-item-control expandToggle=true and
                    data-list-expandable-content.
     startOpen    — expandable items start expanded.
     clickable    — pf-m-clickable + tabindex=0.
     selectedExpr — Alpine expression; while truthy the item carries pf-m-selected.
     attrs        — raw attribute passthrough (e.g. @click for clickable rows).

data-list-item-action

{#include components/data-display/data-list-item-action /}
Data list item action — trailing action area (buttons / kebab menu). Main-block content. 
 Optional: modifiers — pf-m-* classes (e.g. responsive pf-m-hidden pf-m-visible-on-lg).
             attrs — raw attribute passthrough (e.g. x-data + positioning for a kebab).

data-list-item-content

{#include components/data-display/data-list-item-content /}
Data list item content — holds the data-list-cell includes. Main-block content.

data-list-item-control

{#include components/data-display/data-list-item-control /}
Data list item control — leading area for the expand toggle or a checkbox. 
 Optional: expandToggle — render the
toggle wired to the item's `open` state. toggleAriaLabel — aria-label on the toggle (default "Toggle details"). Main
block: rendered after the toggle — e.g. a __check checkbox.

data-list-item-row

{#include components/data-display/data-list-item-row /}
Data list item row — wraps control / content / action areas. Main-block content.