@stolostron/react-data-view

A reusable React component library for rendering data as sortable, filterable tables or catalog card views. Built on PatternFly 6 with virtualized table rendering, fuzzy search via Fuse.js, and automatic URL query string persistence for search and filter state.

Used by stolostron/console, the UI for Red Hat Advanced Cluster Management (ACM) and MultiCluster Engine (MCE).

DEMO

Installation

npm i @stolostron/react-data-view

Peer Dependencies

This library requires the following peer dependencies:

| Package | Version | | --- | --- | | @patternfly/react-core | ^6 | | @patternfly/react-table | ^6 | | @patternfly/react-drag-drop | ^6 | | @patternfly/react-icons | ^6 | | react | >=17 | | react-dom | >=17 | | react-router-dom-v5-compat | ^6 |

Exported Components

| Export | Description | | --- | --- | | ItemView | Dual-mode container switching between table and catalog views with search and filtering | | ItemTable | Virtualized table with sorting, selection, row actions, and pagination | | TableColumn | Interface defining table column structure (header, cell renderer, type, sort) | | Catalog | Grid-based catalog view displaying filterable items with selection and actions | | CatalogCard | Card component displaying item details with selection checkbox and context menu | | Toolbar | Toolbar with search, filters, view toggle, bulk actions, and overflow menu | | useItemFilter | Hook for building filter configuration with label, options, and filter predicates | | BulkSelector | Dropdown control for selecting none, page, or all items in bulk | | PageHeader | Header with breadcrumbs, title, description, and optional actions | | Theme | Provider managing light/dark theme state with localStorage persistence | | useBreakPoint | Hook providing responsive breakpoint detection and window size queries | | StringContext | Context providing localized strings for UI labels across the library |

Goals

The following features are planned but not yet implemented:

• Persist column configuration to localStorage
• Save and switch between multiple column configurations
• Virtualized catalog rendering for large datasets

Development

Prerequisites

• Node.js
• npm

Getting Started

npm ci                # Install dependencies
npm start             # Start the demo dev server (opens browser)
npm run build         # Build the library to lib/

Quality Checks

npm test              # Run all checks (tsc, eslint, prettier, pages build)
npm run tsc           # Type checking only
npm run eslint        # Linting only
npm run prettier      # Formatting check
npm run prettier:fix  # Auto-fix formatting

Available Scripts

| Script | Description | | --- | --- | | build | Build library to lib/ (cleans, compiles, copies assets) | | start | Start demo dev server with hot reload | | start:quiet | Start demo dev server without opening browser | | pages | Build demo for GitHub Pages deployment | | test | Run tsc, eslint, prettier, and pages concurrently | | tsc | TypeScript type checking (no emit) | | eslint | Lint src/ and demo/ | | prettier | Check formatting in src/ and demo/ | | prettier:fix | Auto-fix formatting in src/ and demo/ | | upgrade | Upgrade dependencies (minor versions, with doctor mode) |

Project Structure

react-data-view/
├── src/           # Library source code (published to npm via lib/)
├── demo/          # Development demo app (not published)
├── lib/           # Build output (generated by npm run build)
└── assets/        # Static assets

Tech Stack

• TypeScript 4.9
• PatternFly 6 (React components, table, drag-and-drop, icons)
• Fuse.js — fuzzy search
• Luxon — date/time formatting
• Webpack 5 — demo bundling and GitHub Pages build

License

Apache-2.0