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

Data view overview

Composition pattern — toolbar + table + pagination wired with shared client-side state. The Alpine factory phaDataView() owns search, sort, and page; the page passes rows in via data-rows.

Examples

Basic

Toolbar + table + pagination composed together. The Alpine factory phaDataView() owns search, sort, and page state; rows are seeded into data-rows as JSON.

Name	Vendor	Version	License

No results found.

0 total

Usage

Client-side vs server-side. The phaDataView() factory filters / sorts / paginates client-side — fine for hundreds of rows but not for tens of thousands. For large datasets, drop the factory and have the toolbar inputs emit hx-get against an endpoint that returns the rendered tbody. Pagination links become server-driven links.

Composition over abstraction. The PatternFly data-view "extension" is really a state-management contract over the existing Table, Toolbar, and Pagination components. We don't ship a wrapper component for it; we ship the wiring pattern.

Why no React extension CSS. @patternfly/react-data-view doesn't ship any CSS — it composes existing PF v6 components. So there's nothing to vendor.

Edit data-view/overview on GitHub