orb-pivot

Pivot grid JavaScript library with React 18 rendering.

Latest version: 4.0.0

Install

npm install orb-pivot react react-dom

Quick Start

Browser (UMD)

<link rel="stylesheet" href="node_modules/orb-pivot/dist/orb.css" />
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="node_modules/orb-pivot/dist/orb.min.js"></script>

<div id="pivot-container"></div>

<script>
  var widget = new orb.pgridwidget({
    dataSource: [
      ['US', 'Laptops', 120, 89999.99],
      ['US', 'Phones', 200, 159800.00],
      ['UK', 'Laptops', 90, 67499.99],
      ['UK', 'Phones', 180, 143820.00],
    ],
    fields: [
      { name: '0', caption: 'Country' },
      { name: '1', caption: 'Product' },
      { name: '2', caption: 'Quantity' },
      { name: '3', caption: 'Revenue', dataSettings: { aggregateFunc: 'sum' } }
    ],
    rows: ['Country'],
    columns: ['Product'],
    data: ['Quantity', 'Revenue']
  });
  widget.render(document.getElementById('pivot-container'));
</script>

ES Module / Bundler

import orb from 'orb-pivot';
import 'orb-pivot/dist/orb.css';

const pgrid = new orb.pgrid(config);
const query = pgrid.query();

// Query aggregation results
const result = query.Country('US').val('Revenue');
console.log(result.Revenue); // => 249799.99

Features

Interactivity

• Drag and drop to move fields between axes
• Click to sort columns and rows
• Visual filters with expression operators
• Drill down (cell double-click)
• Multiple data fields support
• Grand totals and sub totals
• Sub totals expand/collapse
• Enhanced scrolling (fixed headers)
• Export to Excel
• Fast rendering using React 18

Customization

• Configure via code and/or toolbar
• Data headers location (rows or columns)
• Grand totals visibility per axis
• Sub totals visibility and collapsed state
• Custom aggregate and format functions
• Theming: built-in themes (red, blue, green, orange, flower, gray, black, white) and Bootstrap

Data Query API

Query aggregation results with a fluent API:

const orb = require('orb-pivot');
const pgrid = new orb.pgrid(config);

// Query with field filters
const q = pgrid.query()
  .Manufacturer('Adventure Works')
  .Class('Economy');

Single field

q.Amount()
// => 1185.17

Multiple fields

q.val('Amount', 'Q')
// => { Amount: 1185.17, Q: 44 }

Built-in aggregation

q.stdev('Amount', 'Q');
// => { Amount: 1377.58, Q: 3.9 }

Custom aggregation

q.val({
  aggregateFunc: function(datafield, intersection, datasource) {
    return intersection.length;
  },
  fields: ['Amount', 'Q']
});
// => { Amount: 7, Q: 7 }

Array Query (no pivot grid needed)

const result = orb.query(dataArray, {
  '2': { caption: 'Manufacturer' },
  '3': { caption: 'Class' },
  '6': { toAggregate: true, caption: 'Amount', aggregateFunc: 'avg' }
})
  .Manufacturer('Adventure Works')
  .Amount();
// => 1185.17

Built-in Aggregation Functions

| Function | Description | |----------|-------------| | sum | Sum (default) | | avg | Average | | count | Count | | min | Minimum | | max | Maximum | | prod | Product | | stdev | Sample standard deviation | | stdevp | Population standard deviation | | var | Sample variance | | varp | Population variance |

Development

nvm use              # Use Node 24 LTS (see .nvmrc)
npm install          # Install dependencies
npm run dev          # Start dev server (Vite, port 3000)
npm run build        # Build dist/ (Rollup)
npm test             # Run tests (Jest, 146 tests)
npm run test:coverage # Run tests with coverage
npm run lint         # Lint (ESLint 9, flat config)
npm run format       # Format (Prettier)

Requirements

• Node.js >= 18 (recommended: 24 LTS)
• React 18 and React DOM 18 (peer dependencies)

Compatibility

| Node.js | Status | |---------|--------| | 18 | Supported | | 20 | Supported | | 22 | Supported | | 24 LTS | Recommended |

License

MIT

Credits

Originally forked from nnajm/orb. Modernized and maintained by David Pelayo.