PivotViewer - Configuration

Props

Required Props

• data: Array of items to display
• dimensions: Array of dimension configurations for grouping
• cardRenderer: Function to render card view for an item

Optional Props

• filters: Array of filter configurations
• detailRenderer: Function to render detail view for an item
• getItemId: Function to extract unique ID from an item
• defaultDimensionKey: Initial dimension to group by
• searchFields: Array of accessor functions returning the values to include in text search
• className: CSS class for the container
• emptyContent: React node to show when no data matches filters
• isLoading: Show loading state
• colors: Custom color scheme configuration

Example Configuration

<PivotViewer
    data={items}
    dimensions={dimensions}
    filters={filters}
    defaultDimensionKey="status"
    cardRenderer={renderCard}
    detailRenderer={renderDetails}
    getItemId={(item) => item.id}
    searchFields={[item => item.title, item => item.description, item => item.assignee]}
    className="my-pivot-viewer"
    emptyContent={<div>No items match your filters</div>}
    isLoading={isLoadingData}
    colors={{
        primaryColor: '#4CAF50',
        surfaceGround: '#1a1a1a',
        surfaceCard: '#2d2d2d'
    }}
/>

Color Customization

Customize the color scheme:

const customColors = {
    primaryColor: '#0066cc',     // Primary accent color
    surfaceGround: '#ffffff',    // Main background
    surfaceCard: '#f5f5f5',      // Card backgrounds
    textColor: '#333333',        // Text color
    surfaceBorder: '#e0e0e0'     // Border color
};

<PivotViewer
    colors={customColors}
    // ... other props
/>

Loading State

Show a loading indicator while data is being fetched:

const [data, setData] = useState([]);
const [loading, setLoading] = useState(true);

useEffect(() => {
    fetchData().then(result => {
        setData(result);
        setLoading(false);
    });
}, []);

<PivotViewer
    data={data}
    isLoading={loading}
    // ... other props
/>

Empty State

Customize the message when filters return no results:

<PivotViewer
    emptyContent={
        <div className="empty-state">
            <i className="pi pi-inbox" style={{ fontSize: '3rem' }} />
            <h3>No results found</h3>
            <p>Try adjusting your filters</p>
        </div>
    }
    // ... other props
/>

Search Configuration

Specify which fields should be searchable by passing accessor functions:

<PivotViewer
    searchFields={[item => item.title, item => item.description, item => item.tags, item => item.author]}
    // ... other props
/>

The global search will look for matches in all specified fields.