React Tutorial

Add a Data Grid with Pivot Tables to React

TinyPivot is designed to make a common dashboard requirement pleasantly short: pass your records to one React component, then let users search, filter, export, and build pivot tables.

Install the React package

Install @smallwebco/tinypivot-react, import DataGrid and the stylesheet, then pass an array of flat objects. Object keys become columns automatically, so a basic integration does not need a column schema.

What users get in the free tier

The free tier includes the core grid and pivot workflow: sorting, filtering, search, CSV export, keyboard navigation, Sum aggregation, row and column totals, and calculated fields.

Upgrade when the product needs more

Pro adds advanced aggregations, a drag-and-drop chart builder, an optional AI Data Analyst, and watermark removal. The same React component exposes the upgraded capabilities after license activation.

Try TinyPivot in your framework

Both packages expose the same product behavior and include TypeScript support.

React

pnpm add @smallwebco/tinypivot-react

Vue 3

pnpm add @smallwebco/tinypivot-vue

Start free. Upgrade when your analytics surface grows.

Free pivot tables for React and Vue 3, with lifetime Pro licensing for advanced features.

Open the Demo