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 CSV Export

CSV export in the free tier

TinyPivot ships a CSV export button in the grid toolbar at no cost. No plugin, extra package, or configuration is required — install the component, pass your data, and the export action is immediately available to users.

The export reflects the current view. If the user has filtered the data or sorted a column, the downloaded CSV contains the filtered and sorted rows rather than the raw unfiltered dataset.

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. Column definitions are derived automatically from your object keys — a minimal integration requires no schema.

The React bundle is approximately 40 KB gzipped. TinyPivot has no mandatory runtime dependencies beyond React itself.

What else the free tier includes

CSV export is one part of a broader free analytics workflow. The free tier also includes sorting, filtering, full-text search, pagination, column resize, calculated fields, Sum aggregation with row and column totals, and 22 built-in themes.

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

Styled XLSX export with Pro

If your users need a formatted spreadsheet rather than a plain CSV, TinyPivot Pro includes styled XLSX export. The output preserves column formatting and is compatible with Excel, Google Sheets, and Numbers.

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

When to upgrade from CSV to XLSX

CSV export works well for straightforward tabular data transfers. Styled XLSX export is the better choice when users expect formatted output, when column types matter for downstream processing, or when a polished download is part of the product experience.

Pro also unlocks advanced aggregations, a drag-and-drop chart builder, pivot drill-through, session persistence, and an optional BYOK AI Data Analyst — all from the same component.

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