Skip to content
RevoGrid [Pro]

Get started with Pivot

Configure access using Installation, then install compatible packages from your authorized registry. Keep one Core version and one Pro aggregate compiler owner in the lockfile. Select the published versions supported by your application and retain the verified lockfile.

Terminal window
pnpm add @revolist/revogrid @revolist/revogrid-pro @revolist/pivot

Render a local grid

Section titled “Render a local grid”
import { defineCustomElements } from '@revolist/revogrid/loader';
import { PivotPlugin, type PivotConfig } from '@revolist/pivot';
import '@revolist/revogrid-pro/dist/revogrid-pro.css';
import '@revolist/pivot/styles.css';


defineCustomElements();
await customElements.whenDefined('revo-grid');
const grid = document.createElement('revo-grid');
grid.style.height = '360px';
grid.source = [
  { region: 'North', sales: 10 },
  { region: 'North', sales: 5 },
  { region: 'South', sales: 20 },
];
grid.plugins = [PivotPlugin];
grid.pivot = {
  rows: ['region'], columns: [],
  values: [{ id: 'sales', prop: 'sales', aggregator: 'sum' }],
  totals: { grandTotal: true },
} satisfies PivotConfig;
document.body.append(grid);

The result has North 15, South 20 and Grand Total 35. Pivot owns the rendered source/columns while active; keep your original facts in the application. Retrieve the installed plugin through await grid.getPlugins() for updates and exports. updatePivotConfig(next) replaces the configuration rather than applying a deep patch. See lifecycle and custom integrations.

For wrappers, pass source, plugins and Pivot configuration through the wrapper’s properties and retrieve the underlying grid after mount. Reuse the existing framework examples. Dispose standalone controllers/subscriptions when the component unmounts. DOM-free headless execution does not certify grid SSR or hydration.

Execute without a grid

Section titled “Execute without a grid”

Download the executable example into an application with Pivot installed and run:

Terminal window
node customer-example.mjs

It imports only @revolist/pivot/headless, prints real tables and asserts strict AVG, nonadditive totals, formulas, ranking, sorting, exports and refusal/recovery. No database or browser is needed. These results use explicit V2 numeric policies, rather than silently changing existing local reports.

import { createPivotController, type PivotReport } from '@revolist/pivot/headless';
const report: PivotReport = {
  kind: 'revogrid:pivot.report', version: 1,
  fields: [
    { id: 'region', sourceProp: 'region' },
    { id: 'sales', sourceProp: 'sales' },
  ],
  rows: ['region'], columns: [], filters: [],
  measures: [{ id: 'total', fieldId: 'sales', aggregator: 'sum' }],
};
const controller = createPivotController({
  report, source: [{ region: 'North', sales: 10 }, { region: 'North', sales: 5 }],
});
try {
  const outcome = await controller.refresh();
  if (outcome.status === 'failed') throw new Error(outcome.error.message);
  console.table(controller.getSnapshot().view?.model.source); // North: 15
} finally {
  controller.dispose();
}

Creation validates metadata synchronously and starts idle (autoLoad defaults to false). Catch validation exceptions as well as failed operation outcomes. During loading/failure, display the retained committed view and the pending/error state separately. Do not save a failed pending report as if it committed.

Next steps

Section titled “Next steps”