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 Pivot Table Without Watermark

What the free tier includes

The free tier of TinyPivot for React is a complete data grid with a built-in pivot workflow. It is not a crippled trial: sorting, filtering, search, pagination, column resize, calculated fields, and CSV export are all available at no cost.

The pivot table in the free tier supports Sum aggregation with row and column totals. The free tier also includes 22 built-in themes, so the component can match your application's design without writing custom CSS.

Sort, filter, search, and paginate any array of records
Sum aggregation with row and column totals in the pivot view
Calculated fields for derived metrics such as margin or variance
CSV export and column resize included
22 built-in themes including dark and light variants

How the watermark works

The free tier renders a small "TinyPivot" watermark inside the component. It does not obscure your data or prevent interaction. It is visible to your users and signals that the free edition is in use.

The watermark is removed as soon as a valid Pro license key is applied. No rebuild or code change is needed beyond supplying the key.

Remove the watermark with a Pro license

TinyPivot Pro is a one-time perpetual purchase — not a subscription. Licenses are available at three tiers: Single ($49), Unlimited ($149), and Team ($399). A license covers both the React and Vue packages.

Single ($49): one production domain, watermark removed
Unlimited ($149): unlimited domains, watermark removed
Team ($399): unlimited domains plus team seat coverage

What else Pro unlocks

Removing the watermark is one benefit of Pro. The license also 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, and session persistence that remembers a user's pivot configuration across page loads.

Pro also includes an optional AI Data Analyst. It follows a bring-your-own-key model, so you configure the provider — OpenAI, Anthropic, or OpenRouter — and TinyPivot routes natural-language queries through your own API key.

Install TinyPivot in a React project

TinyPivot for React ships as @smallwebco/tinypivot-react. The bundle is approximately 40 KB gzipped. Pass an array of flat objects to the DataGrid component and it derives columns automatically — no schema definition required for a basic integration.

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