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

Data view toolbar

← Components

Toolbar with search input, filter trigger, removable filter chips, and a result count. Pair with a table or card grid below.

Examples

Basic

Standalone toolbar: search input, filter button, chip list with removable filters, result count. Often paired with a table or card grid below.

28 results

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.