Package Exports

@grid-table/pivot
@grid-table/pivot/esm/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@grid-table/pivot) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@grid-table/pivot

Pivot table component with data aggregation and cross-tabulation, built on @grid-table/view.

Install

npm install @grid-table/pivot @grid-table/view @einfach/react @einfach/utils

Usage

import { Pivot } from '@grid-table/pivot'

const dataConfig = {
  fields: {
    rows: ['region'],
    columns: ['category'],
    values: ['sales'],
  },
  data: [
    { region: 'East', category: 'A', sales: 100 },
    { region: 'East', category: 'B', sales: 200 },
    { region: 'West', category: 'A', sales: 150 },
    { region: 'West', category: 'B', sales: 300 },
  ],
}

function App() {
  return <Pivot dataConfig={dataConfig} style={{ width: '100%', height: 500 }} />
}

Props

Prop	Type	Default	Description
dataConfig	`DataConfig`	—	Pivot configuration (required)
rowHeight	`number`	`32`	Row height
overRowCount	`number`	`22`	Overscan row count
style	`CSSProperties`	—	Container styles
className	`string`	—	CSS class
theme	`object`	—	Theme configuration

DataConfig

{
  fields: {
    rows: string[]          // Row dimension fields
    columns: string[]       // Column dimension fields
    values: string[]        // Aggregate value fields
    valueInCols?: boolean   // Place values in columns (default: true)
  },
  data: Record<string, any>[]  // Source data
  meta?: Meta[]                // Field metadata (formatters, renderers)
  sortParams?: SortParams
  filterParams?: FilterParam[]
  treeRow?: TreePropsItem      // Row tree expansion config
  treeColumn?: TreePropsItem   // Column tree expansion config
}

License

MIT