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

Data list

List of items rendered as rows with cells — semantic alternative to Table for list-shaped data without column headers. Each row can expand for details, support row actions, etc.

Examples

Basic

Rows of cells inside item-content.

Project Apollo
Backend service

Active

2 hours ago
Mercury
Web frontend

Active

5 hours ago
Gemini
Data pipeline

Paused

Yesterday

With headings

Heading cells plus pf-m-no-fill / pf-m-align-right cell modifiers.

Primary content

Secondary content
Secondary content (pf-m-no-fill)

Secondary content (pf-m-align-right pf-m-no-fill)

Compact

pf-m-compact — tighter rows.

user-1@example.com

Admin
user-2@example.com

Member
user-3@example.com

Viewer

Plain

pf-m-plain removes row backgrounds and borders.

Primary content

Secondary content
Second row

More content

Checkboxes, actions and additional cells

__item-control checks plus __item-action buttons; the third row swaps a kebab for buttons at the lg breakpoint via responsive action modifiers.

Row with checkbox

Status: active

Updated 2 hours ago
Second row

Status: paused

Updated yesterday
Responsive actions row

Buttons at the lg breakpoint and up

A kebab menu below it

Actions: single and multiple

A lone action button and a kebab menu of actions.

Single action row

A lone action button
Multiple actions row

A kebab menu of actions

Expandable

A toggle in the item control reveals __expandable-content.

Expandable row 1

Toggle reveals details

Expanded details for Expandable row 1.
Expandable row 2

Collapsed by default

Expanded details for Expandable row 2.

Compact expandable

pf-m-compact combined with live expandable rows.

Compact row 1

Starts expanded

Expanded details for Compact row 1.
Compact row 2

Collapsed by default

Expanded details for Compact row 2.

Nested expandable

The first row’s expandable content holds a nested data list with its own toggles.

Outer row 1
Contains a nested data list

Secondary content
- Nested row 1
  
  Nested row 1 expanded content.
- Nested row 2
  
  Nested row 2 expanded content.
- Nested row 3
  
  Nested row 3 expanded content.
Outer row 2

Plain expandable details

Outer row 2 expanded content.

Mixed expandable

Expandable and plain rows share one list.

Expandable row

Has a toggle and details

Expanded details for the expandable row.
Plain row

No toggle, no expandable content

Width modifiers

pf-m-flex-2/3/4/5 and pf-m-no-fill size individual cells.

default

pf-m-flex-2 takes twice the space

pf-m-flex-3
default

pf-m-flex-4 takes four times the space
default

pf-m-flex-5 takes five times the space
pf-m-no-fill keeps to its content

default fills the remaining space

Clickable rows

pf-m-clickable rows; the active one carries pf-m-selected.

First row

Click or press Enter to select
Second row

The selected row carries pf-m-selected

Clickable expandable rows

Rows select on click and expand via the toggle; both states are live.

First row

Click selects; the toggle expands

Expanded details for the first row.
Second row

The selected row carries pf-m-selected

Expanded details for the second row.

Controlling text

pf-m-break-word / pf-m-truncate / pf-m-nowrap.

pf-m-break-word

ReallyLongWordThatWouldOverflowTheCellWithoutAModifier-ReallyLongWordThatWouldOverflowTheCellWithoutAModifier-
pf-m-truncate

ReallyLongWordThatWouldOverflowTheCellWithoutAModifier-ReallyLongWordThatWouldOverflowTheCellWithoutAModifier-
pf-m-nowrap

This cell refuses to wrap its content onto a second line.

As grid

pf-m-grid stacks each row’s cells into a grid at every width.

Project Apollo

Backend service

Active

2 hours ago
Mercury

Web frontend

Active

5 hours ago

Small grid breakpoint

pf-m-grid-sm stacks cells below the sm breakpoint.

Grid collapses below sm

Cell two

Cell three
Second row

Cell two

Cell three

With no grid

pf-m-grid-none keeps cells on one line at every width.

Project Apollo

Backend service

Active

2 hours ago
Mercury

Web frontend

Active

5 hours ago

Draggable

Draggable rows — the single reorderable list and the multiple drop zones variant — live in the Drag and drop demo, which reorders this same data-list markup with the phaDragDrop pointer model.

Documentation

Data list props

The data list is a template family: data-list is the root and rows compose from data-list-item > data-list-item-row > data-list-item-control / data-list-item-content (> data-list-cell) / data-list-item-action, plus data-list-expandable-content — all main-block includes, no generic slot names.

* required
Name	Type	Description
`id / ariaLabel`	String	DOM id; AT label for the list.
`compact / plain`	Boolean	The matching `pf-m-*` modifier.
`gridBreakpoint`	String	Grid modifier suffix — "sm" renders `pf-m-grid-sm`.
`data-list-item`	Include	`expandable` (owns the `open` state + bound `pf-m-expanded`), `startOpen`, `clickable`, `selectedExpr` (Alpine expression → `pf-m-selected`), `attrs`.
`data-list-item-control`	Include	`expandToggle` renders the toggle wired to `open` (+ `toggleAriaLabel`); otherwise the main block holds e.g. a `__check` checkbox — toggle and custom content are mutually exclusive.
`data-list-cell`	Include	Repeat per column; `id`, `modifiers` (e.g. "pf-m-flex-2", "pf-m-truncate", "pf-m-no-fill").
`data-list-item-action`	Include	Trailing actions; `attrs` for kebab positioning/state.
`data-list-expandable-content`	Include	The region `open` reveals; content lands inside the body wrapper.
`attrs`	String (raw)	Raw attribute passthrough (root and most members). Shadowed inside the family's inserts.

Usage

Data list vs. Table. Data list is a list of items where rows can vary in content; Table is a grid with column headers and consistent shapes per row. Use Data list when rows benefit from rich inner layout.

Edit data-list.html on GitHub