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.

Add a Data Grid with Pivot Tables to Vue 3

Install the Vue package

Install @smallwebco/tinypivot-vue, import DataGrid and the stylesheet, then bind your array of flat records to the data prop. TinyPivot derives columns from the objects by default.

Start with free pivot tables

Users can search, sort, filter, export, and build pivot tables with Sum aggregation and totals in the free tier. Calculated fields support common derived metrics such as profit margin.

Use Pro for richer analytics

Pro adds advanced aggregations, charts, an optional BYOK AI Data Analyst, and watermark removal. A TinyPivot license works with both the Vue and React packages.

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