TinyPivot is a lightweight pivot table and data grid component for React and Vue 3. It provides Excel-like functionality including free pivot tables, sorting, filtering, calculated fields, and CSV export, with optional Pro charts and AI-assisted exploration.

Does TinyPivot work with React?

Yes, TinyPivot has a dedicated React package (@smallwebco/tinypivot-react) that works with React 18 and above. It provides the same lightweight pivot table functionality as the Vue version with full TypeScript support.

Does TinyPivot work with Vue 3?

Yes, TinyPivot has a Vue 3 package (@smallwebco/tinypivot-vue) that requires Vue 3.3.0 or higher. It's written in TypeScript and provides full type definitions for a great developer experience.

How small is TinyPivot compared to AG Grid or TanStack Table?

TinyPivot is designed as a focused grid and analytics component. TanStack Table is an excellent headless library for custom table interfaces, while AG Grid is a broad enterprise grid suite. TinyPivot differentiates by including pivot table functionality and a complete UI out of the box.

Is there a free version of TinyPivot?

Yes, TinyPivot offers a generous free tier with core data grid features, free pivot tables with Sum aggregation, row and column totals, and calculated fields. Pro adds advanced aggregations, charts, AI Analyst, and removes the watermark.

What makes TinyPivot a lightweight pivot table solution?

TinyPivot is designed as a focused data grid for React and Vue applications. It includes the analytics workflow teams commonly need: filtering, sorting, CSV export, pivot tables, totals, and calculated fields, with advanced features available in Pro.

Is TinyPivot a good AG Grid alternative?

TinyPivot is a focused AG Grid alternative for React and Vue projects that need data grids and pivot tables without adopting a broad enterprise grid suite. Compare the products carefully if you need advanced server-side workflows, Angular support, or spreadsheet-specific features.

How do I add a pivot table to my React app?

Install the React pivot table component with 'npm install @smallwebco/tinypivot-react', import the DataGrid component and styles, then pass your data array. The drag-and-drop pivot configuration lets users create pivot tables by dragging columns to row, column, and value areas.

Can I use TinyPivot as an Excel component in React?

Yes, TinyPivot provides Excel-like functionality for React applications including cell selection, keyboard navigation (arrow keys, Tab, Enter), column resizing, sorting, and filtering. It's designed to feel familiar to spreadsheet users while remaining lightweight.

How does TinyPivot compare to TanStack Table?

TanStack Table is an outstanding headless library that gives you full control over rendering and is great for custom table implementations. TinyPivot takes a different approach — it's a batteries-included component with pivot tables, aggregations, and styling built-in. Choose TanStack Table for maximum flexibility, or TinyPivot when you want pivot functionality ready to go.

Does TinyPivot include a chart builder?

Yes, TinyPivot Pro includes a drag-and-drop chart builder with 6 chart types: bar, line, area, pie, donut, and radar. Simply drag fields to configure your visualization — dimensions go to the X-axis and measures to the Y-axis. Charts automatically respect any filters applied to your data grid.

What chart types does TinyPivot support?

TinyPivot Pro supports 6 chart types: Bar charts for comparing categories, Line charts for trends over time, Area charts for volume trends, Pie and Donut charts for proportions, and Radar charts for multi-metric comparison.

What is TinyPivot's AI Data Analyst feature?

TinyPivot Pro includes an AI Data Analyst that lets you explore data using natural language queries. Ask questions like 'Show me sales by region' or 'What are the top 10 products?' and the AI generates SQL queries automatically. It uses a Bring Your Own Key (BYOK) model — you provide your own OpenAI or Anthropic API key, giving you full control over costs and data privacy.

What does BYOK (Bring Your Own Key) mean for TinyPivot?

BYOK means you use your own AI provider API key (OpenAI, Anthropic, etc.) with TinyPivot's AI Data Analyst. This gives you complete control over costs, rate limits, and data privacy. Your data never passes through TinyPivot servers — queries go directly from your app to your AI provider.

Can I query my data using natural language with TinyPivot?

Yes, TinyPivot Pro's AI Data Analyst lets you ask questions in plain English. Simply type questions like 'Show revenue trends by month' or 'Which customers have the highest lifetime value?' The AI understands your data schema and generates appropriate SQL queries, displaying results in the data grid where you can further analyze with pivot tables and charts.

Is TinyPivot's AI feature secure for sensitive data?

TinyPivot's BYOK approach means your data stays under your control. The AI only sees your table schema and generates SQL queries — actual data processing happens in your environment. For maximum security, you can run queries against DuckDB in the browser (client-side) so data never leaves the user's device.

React Data Grid with Calculated Fields

What calculated fields are

A calculated field is a virtual column whose value is derived from a formula applied to other columns in each row. Calculated fields appear alongside regular data columns and participate in sorting, filtering, and pivot aggregations.

In TinyPivot, calculated fields are defined using a simple expression syntax that supports standard arithmetic operations. The expressions run client-side, so no backend changes or server-side logic are required.

Calculated fields in the free tier

Calculated fields are included in TinyPivot's free tier. You can define as many calculated fields as your dataset requires at no cost. Common use cases include profit margin (revenue minus cost divided by revenue), period-over-period growth (current minus prior divided by prior), and conversion rate (conversions divided by impressions).

Define derived metrics entirely in the grid — no backend changes
Expressions support arithmetic over any numeric column in the dataset
Calculated fields appear in the pivot table field selector
Participate in sorting and filtering alongside raw columns
No custom cell renderers or schema modifications required

How calculated fields work with pivot tables

Any calculated field you define appears as a selectable metric in the pivot table. Derived metrics — margin, growth rate, ratio — can be aggregated across any row and column grouping exactly like a raw numeric column.

In the free tier, the pivot table aggregates calculated fields using Sum. Upgrading to Pro adds Count, Count Distinct, Average, Min, Max, Median, and Standard Deviation over calculated and raw fields alike.

Install TinyPivot for React

Install @smallwebco/tinypivot-react, import the DataGrid component and its stylesheet, then pass an array of flat objects to the data prop. Calculated fields are configured through a prop that accepts a name and expression string — column keys are derived from your objects automatically.

The React bundle is approximately 40 KB gzipped with no mandatory dependencies beyond React itself. TypeScript types are included.

Upgrade to Pro for advanced analytics

The free tier with calculated fields covers many analytics dashboard needs. Pro adds the full aggregation set over all fields, a drag-and-drop chart builder, pivot drill-through to underlying rows, styled XLSX export, session persistence, and an optional BYOK AI Data Analyst that supports OpenAI, Anthropic, and OpenRouter.

Pro is a one-time perpetual purchase — not a subscription. Tiers: Single ($49), Unlimited ($149), Team ($399). One license covers both @smallwebco/tinypivot-react and @smallwebco/tinypivot-vue.

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