Fluxo UIFluxo UIv0.1.1

PivotTable

An interactive pivot table with drag-and-drop configuration, inline editing, custom plugins, cell templates, and 15+ aggregate functions.

Interactive Pivot Table

Drag fields between zones (Available, Rows, Columns, Values, Filters). Change aggregation functions inline. Double-click leaf cells to edit values.

Interactive Pivot

Drag fields between zones. Double-click leaf cells to edit. Change aggregation functions on value chips.

Pivot Configuration
Available Fields6
Categorystring
Citystring
Productstring
Profitnumber
Quarterstring
Salespersonstring
Row Fields2
Regionstring
Countrystring
Column Fields0
Drop fields here
Value Fields2
Revenuenumber
Quantitynumber
Filter Fields0
Drop fields here to filter
40 records | Double-click to edit
region / country
Revenue
Qty
North America
$371,800
735
USA
$248,800
494
Canada
$123,000
241
Subtotal: North America$371,800735
Europe
$339,000
702
UK
$150,600
295
Germany
$188,400
407
Subtotal: Europe$339,000702
Asia Pacific
$268,000
776
Japan
$134,500
496
Australia
$133,500
280
Subtotal: Asia Pacific$268,000776
Grand Total
$978,800
2213
import { PivotTable } from 'fluxo-ui';
import type { PivotConfig, FieldDefinition, PivotPlugin } from 'fluxo-ui';

const [config, setConfig] = useState<PivotConfig>({
  rows: ['region'],
  columns: [],
  values: [{ field: 'revenue', label: 'Revenue', aggregateFunction: 'sum' }],
});

<PivotTable
  data={data}
  config={config}
  onConfigChange={setConfig}
  showConfigPanel
  editable
  showToolbar
  exportable
  fieldDefinitions={fieldDefs}
  plugins={myPlugins}
  disabledFunctions={['product', 'variance']}
/>

Basic Usage

A simple pivot table grouping sales data by region with sum aggregations.

Simple Pivot Table

Sales data pivoted by region showing revenue, quantity, and profit totals.

40 records
region
Revenue
Quantity
Profit
North America
$371,800
735
$116,900
Europe
$339,000
702
$106,100
Asia Pacific
$268,000
776
$85,900
Grand Total
$978,800
2,213
$308,900
import { PivotTable } from 'fluxo-ui';
import type { PivotConfig } from 'fluxo-ui';

const config: PivotConfig = {
    rows: ['region'],
    columns: [],
    values: [
        { field: 'revenue', label: 'Revenue', aggregateFunction: 'sum', format: currencyFormat },
        { field: 'quantity', label: 'Quantity', aggregateFunction: 'sum', format: numberFormat },
        { field: 'profit', label: 'Profit', aggregateFunction: 'sum', format: currencyFormat },
    ],
};

<PivotTable data={salesData} config={config} showToolbar />

Aggregate Functions

Use different aggregate functions on value fields: sum, average, min, max, count, median, and distinctCount.

Aggregate Functions

Demonstrates sum, average, min, max, count, median, and distinctCount aggregations on sales data by category.

category
Total Revenue (Sum)
Avg Revenue
Min Revenue
Max Revenue
Orders (Count)
Median Profit
Unique Sellers
Electronics
$902,500
$34,712
$18,000
$56,000
26
$10,350
1.00
Accessories
$76,300
$5,450
$3,200
$8,400
14
$2,675
1.00
Grand Total
$978,800
$24,470
$3,200
$56,000
40
$7,650
1.00
import { PivotTable } from 'fluxo-ui';
import type { PivotConfig } from 'fluxo-ui';

const config: PivotConfig = {
    rows: ['category'],
    columns: [],
    values: [
        { field: 'revenue', label: 'Total Revenue (Sum)', aggregateFunction: 'sum', format: currencyFormat },
        { field: 'revenue', label: 'Avg Revenue', aggregateFunction: 'average', format: currencyFormat },
        { field: 'revenue', label: 'Min Revenue', aggregateFunction: 'min', format: currencyFormat },
        { field: 'revenue', label: 'Max Revenue', aggregateFunction: 'max', format: currencyFormat },
        { field: 'quantity', label: 'Orders (Count)', aggregateFunction: 'count', format: numberFormat },
        { field: 'profit', label: 'Median Profit', aggregateFunction: 'median', format: currencyFormat },
        { field: 'salesperson', label: 'Unique Sellers', aggregateFunction: 'distinctCount' },
    ],
};

<PivotTable data={salesData} config={config} striped />

Multi-Level Pivot

Specify multiple fields in the rows array to create nested drill-down grouping.

Multi-Level Row Pivot

Three levels of row grouping: Region > Country > City. Use the toolbar to expand or collapse all rows.

40 records
region / country / city
Revenue
Quantity
Profit
North America
$371,800
735
$116,900
USA
$248,800
494
$78,400
New York
$134,300
335
$42,750
Chicago
$114,500
159
$35,650
Subtotal: USA$248,800494$78,400
Canada
$123,000
241
$38,500
Toronto
$71,200
148
$22,000
Vancouver
$51,800
93
$16,500
Subtotal: Canada$123,000241$38,500
Subtotal: North America$371,800735$116,900
Europe
$339,000
702
$106,100
UK
$150,600
295
$47,100
London
$125,800
133
$38,900
Manchester
$24,800
162
$8,200
Subtotal: UK$150,600295$47,100
Germany
$188,400
407
$59,000
Berlin
$113,200
266
$35,000
Munich
$75,200
141
$24,000
Subtotal: Germany$188,400407$59,000
Subtotal: Europe$339,000702$106,100
Asia Pacific
$268,000
776
$85,900
Japan
$134,500
496
$43,950
Tokyo
$110,900
326
$36,050
Osaka
$23,600
170
$7,900
Subtotal: Japan$134,500496$43,950
Australia
$133,500
280
$41,950
Sydney
$70,600
161
$21,900
Melbourne
$62,900
119
$20,050
Subtotal: Australia$133,500280$41,950
Subtotal: Asia Pacific$268,000776$85,900
Grand Total
$978,800
2,213
$308,900
import { PivotTable } from 'fluxo-ui';
import type { PivotConfig } from 'fluxo-ui';

const config: PivotConfig = {
    rows: ['region', 'country', 'city'],
    columns: [],
    values: [
        { field: 'revenue', label: 'Revenue', aggregateFunction: 'sum', format: currencyFormat },
        { field: 'quantity', label: 'Quantity', aggregateFunction: 'sum', format: numberFormat },
        { field: 'profit', label: 'Profit', aggregateFunction: 'sum', format: currencyFormat },
    ],
};

<PivotTable
    data={salesData}
    config={config}
    expandAll
    showSubTotals
    showToolbar
    bordered
/>

Column Pivot

Add fields to the columns array to pivot values into column headers for cross-tabulation.

Column Pivoting by Quarter

Revenue by region with quarterly columns. Each quarter becomes a column header, creating a cross-tabulation view.

region
Q1
Q2
Q3
Q4
Total
Revenue
Revenue
Revenue
Revenue
Total Revenue
North America
$123,500
$87,000
$92,500
$68,800
$371,800
Europe
$93,800
$89,000
$55,000
$101,200
$339,000
Asia Pacific
$82,100
$91,400
$71,400
$23,100
$268,000
Grand Total
$299,400
$267,400
$218,900
$193,100
$978,800
import { PivotTable } from 'fluxo-ui';
import type { PivotConfig } from 'fluxo-ui';

const config: PivotConfig = {
    rows: ['region'],
    columns: ['quarter'],
    values: [
        { field: 'revenue', label: 'Revenue', aggregateFunction: 'sum', format: currencyFormat },
    ],
};

<PivotTable
    data={salesData}
    config={config}
    showGrandTotal
    showColumnTotals
    compact
/>

Filtering

Apply filters via the config.filters array to narrow down displayed data dynamically.

Filtered Pivot Data

Apply filters to narrow pivot table data. Select a region and/or category to see filtered results.

40 records
country / product
Revenue
Quantity
Profit
USA
$248,800
494
$78,400
Laptop Pro
$140,000
94
$42,000
Wireless Mouse
$4,500
150
$2,250
Desktop Elite
$38,000
20
$11,400
Monitor Ultra
$52,000
87
$15,600
Keyboard Mech
$14,300
143
$7,150
Subtotal: USA$248,800494$78,400
Canada
$123,000
241
$38,500
Laptop Pro
$36,000
24
$10,800
Wireless Mouse
$3,200
107
$1,600
Desktop Elite
$61,000
32
$18,300
Monitor Ultra
$18,000
30
$5,400
Keyboard Mech
$4,800
48
$2,400
Subtotal: Canada$123,000241$38,500
UK
$150,600
295
$47,100
Laptop Pro
$89,000
59
$26,700
Desktop Elite
$31,000
16
$9,300
Keyboard Mech
$5,800
58
$2,900
Wireless Mouse
$3,800
127
$1,900
Monitor Ultra
$21,000
35
$6,300
Subtotal: UK$150,600295$47,100
Germany
$188,400
407
$59,000
Laptop Pro
$92,000
61
$27,600
Desktop Elite
$34,000
18
$10,200
Wireless Mouse
$5,200
173
$2,600
Monitor Ultra
$50,000
83
$15,000
Keyboard Mech
$7,200
72
$3,600
Subtotal: Germany$188,400407$59,000
Japan
$134,500
496
$43,950
Laptop Pro
$56,000
37
$16,800
Desktop Elite
$41,000
22
$12,300
Keyboard Mech
$8,400
84
$4,200
Wireless Mouse
$9,600
320
$4,800
Monitor Ultra
$19,500
33
$5,850
Subtotal: Japan$134,500496$43,950
Australia
$133,500
280
$41,950
Laptop Pro
$74,000
49
$22,200
Desktop Elite
$28,000
15
$8,400
Wireless Mouse
$3,600
120
$1,800
Monitor Ultra
$22,000
37
$6,600
Keyboard Mech
$5,900
59
$2,950
Subtotal: Australia$133,500280$41,950
Grand Total
$978,800
2,213
$308,900
import { PivotTable } from 'fluxo-ui';
import type { PivotConfig, PivotFilter } from 'fluxo-ui';

const filters: PivotFilter[] = [
    { field: 'region', operator: 'eq', value: 'Europe' },
    { field: 'category', operator: 'eq', value: 'Electronics' },
];

const config: PivotConfig = {
    rows: ['country', 'product'],
    columns: [],
    values: [
        { field: 'revenue', label: 'Revenue', aggregateFunction: 'sum', format: currencyFormat },
        { field: 'quantity', label: 'Quantity', aggregateFunction: 'sum', format: numberFormat },
        { field: 'profit', label: 'Profit', aggregateFunction: 'sum', format: currencyFormat },
    ],
    filters,
};

<PivotTable data={salesData} config={config} expandAll />

Import

import { PivotTable } from 'fluxo-ui';
import type {
  PivotConfig, PivotField, PivotFilter, AggregateFunction,
  FieldDefinition, PivotPlugin, PivotPermissions,
  CellEditorProps, CellTemplateProps, CustomAggregatePlugin,
} from 'fluxo-ui';

Props

datareq
T[]

Array of data objects to pivot.

configreq
PivotConfig

Configuration with rows, columns, values, and optional filters.

fieldDefinitions
FieldDefinition[]

Defines field types, labels, editors, templates, and validators.

onConfigChange
(config: PivotConfig) => void

Called when user changes pivot configuration via drag-drop.

onDataChange
(data: T[], rowIndex, field, newValue) => void

Called after inline cell edits.

showConfigPanel
boolean"false"

Show the interactive drag-and-drop configuration panel.

configPanelPosition
'left' | 'right' | 'top'"'left'"

Position of the config panel.

configPanelCollapsible
boolean"true"

Allow collapsing the config panel.

editable
boolean"false"

Enable inline cell editing on double-click.

onCellEdit
(row, field, oldVal, newVal) => boolean | void

Validate or intercept cell edits. Return false to cancel.

plugins
PivotPlugin[]

Array of plugin objects for custom functions, renderers, and editors.

disabledFunctions
BuiltInAggregateFunction[]

Remove specific built-in aggregate functions.

permissions
PivotPermissions

Fine-grained control over what users can do (drag, edit, filter, export).

cellTemplate
ComponentType<CellTemplateProps> | function

Global custom cell renderer for all value cells.

headerTemplate
(field, label) => ReactNode

Custom renderer for column headers.

rowHeaderTemplate
(label, depth, node) => ReactNode

Custom renderer for row headers.

exportable
boolean"false"

Show CSV/JSON export buttons in toolbar.

onExport
(format: 'csv' | 'json') => void

Custom export handler.

loading
boolean"false"

Show loading spinner.

height
string | number

Max height for scrollable area.

expandAll
boolean"false"

Expand all row groups on initial render.

showGrandTotal
boolean"true"

Show a grand total row at the bottom.

showSubTotals
boolean"true"

Show subtotal rows for expanded groups.

sortable
boolean"true"

Enable column header sorting.

striped
boolean"false"

Apply alternating row backgrounds.

bordered
boolean"true"

Show cell borders.

compact
boolean"false"

Reduce cell padding for a denser layout.

showToolbar
boolean"false"

Show toolbar with expand/collapse, export, and record count.

Features

Multi-Level Grouping

Group rows by multiple fields to create a hierarchical drill-down structure.

Column Pivoting

Pivot field values into column headers for cross-tabulation analysis.

Aggregate Functions

Sum, average, count, min, max, product, median, distinct, and distinctCount.

Data Filtering

Apply filters with operators like eq, neq, gt, lt, contains, and in.

Sortable Columns

Click column headers to sort data ascending, descending, or reset.

Custom Formatting

Apply custom format functions to display values as currency, percentages, or any format.