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.

Vue 3 Pivot Table Component — Free Tier Guide

What is free in TinyPivot for Vue 3

The free tier is not a restricted preview — it is a production-ready Vue 3 data grid and pivot table. You get sorting, filtering, search, pagination, column resize, calculated fields, CSV export, and 22 built-in themes at no cost.

The pivot workflow in the free tier supports Sum aggregation with row and column totals. Users can drag fields to build pivot views interactively, and the component derives columns from your array of records without a schema definition.

Sort, filter, search, and paginate any data source
Sum aggregation with row and column totals in the pivot view
Calculated fields for metrics like margin, ratio, or growth
CSV export and column resize built in
22 themes including dark and light variants — no custom CSS needed

Install in a Vue 3 project

Install @smallwebco/tinypivot-vue, import the DataGrid component and its stylesheet, then bind your data array to the data prop. The component is built for Vue 3 Composition API and ships with TypeScript types.

The bundle is approximately 50 KB gzipped for the Vue package. It has no mandatory peer dependencies beyond Vue 3 itself.

Free tier watermark

The free tier renders a small "TinyPivot" watermark inside the component. It does not block data or interactions — it signals that the free edition is active. A Pro license removes it immediately without requiring a code change beyond supplying the key.

What Pro adds

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

Pro unlocks the full aggregation set (Count, Count Distinct, Average, Min, Max, Median, Standard Deviation), 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.

Nuxt 3 compatibility

TinyPivot renders client-side. In a Nuxt 3 project, wrap the DataGrid in a <ClientOnly> tag or use the component inside a client-only plugin to avoid SSR hydration issues. No additional configuration is required.

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