Skip to content
Cratis Cratis Cratis

PivotViewer

The PivotViewer component provides an interactive, high-performance visualization for exploring large datasets with dynamic grouping, filtering, and zooming capabilities.

Purpose

Section titled “Purpose”

PivotViewer enables users to explore and analyze collections of data items through an intuitive, visual interface with pivot-style grouping and filtering.

Key Features

Section titled “Key Features”
  • High-performance rendering using Web Workers
  • Columnar data storage for efficient filtering
  • Dynamic grouping by configurable dimensions
  • Multiple filter types (categorical, range, search)
  • Smooth zoom and pan interactions
  • Responsive card-based layout
  • Collection and detail view modes
  • Custom card and detail renderers

Quick Start

Section titled “Quick Start”
import { PivotViewer } from '@cratis/components/PivotViewer';


interface Product {
    id: string;
    name: string;
    category: string;
    price: number;
}


function ProductViewer() {
    const dimensions = [
        { key: 'category', label: 'Category', getValue: (item: Product) => item.category }
    ];


    const filters = [
        { key: 'category', label: 'Category', type: 'string', getValue: (item: Product) => item.category }
    ];


    return (
        <PivotViewer
            data={products}
            dimensions={dimensions}
            filters={filters}
            defaultDimensionKey="category"
            cardRenderer={(item) => ({ title: item.name, labels: ['Category'], values: [item.category] })}
            detailRenderer={(item) => <ProductDetails product={item} />}
            getItemId={(item) => item.id}
            searchFields={[item => item.name, item => item.category]}
        />
    );
}

Core Concepts

Section titled “Core Concepts”
  • Dimensions: Properties to group data by
  • Filters: Options to narrow down the dataset
  • Cards: Visual representation of items in collection view
  • Details: Full information shown when item is selected

See Also

Section titled “See Also”