# Alambique

A table that summarizes your records; drag fields between rows, columns and values to change the view.

> Alambique is an exclusive THM Componentes component that brings a pivot table into your product: people drag fields between filters, rows, columns and values and pick sum, average, count, minimum or maximum. It shows subtotals, grand totals, expand and collapse, sorting and an optional heatmap, for sales analysis and management reports.

- Category: Data and visualization
- Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code
- Load weight: Medium: canvas or continuous animation; fine for one section
- Technology: Vue 3, TypeScript
- Interaction: Mouse, Touch, Keyboard
- URL: https://vibecode.thmtecnologia.com/en/components/alambique/

## What it looks like

It looks like a spreadsheet pivot table, only inside your page. At the top sits a row of available fields; below, four white boxes for filters, rows, columns and values hold chips you can drag from one box to another while a colored pill follows the pointer. The table underneath has a sticky header and first column, groups with small arrows to expand and collapse, light gray subtotal rows and a highlighted grand total. Cells get a stronger indigo background the higher the value, like a subtle heatmap.

## You may be looking for this if you asked for something like

- “an Excel-style pivot table inside my app”
- “drag fields to cross sales by region and by month”
- “a report where users choose what goes in rows and columns”
- “a table with subtotals that expands and collapses by group”
- “a simple BI view without paying for an external tool”
- “a table that sums, averages and counts records by itself”

## Also known as

pivot table, pivot grid, crosstab, cross tabulation, dynamic report table

## When to use

- Ad hoc sales analysis inside a management system
- Management reports where each manager wants a different breakdown
- BI views embedded in the product, without an external tool
- Admin areas that need group subtotals and a grand total

## When to avoid

- Huge datasets, since all aggregation happens in the browser
- Phone screens, where four field areas and a wide table feel cramped
- English-only products, unless your AI translates the built-in Portuguese area names, buttons and aggregations

## How to ask your AI

```text
Build a pivot table for the admin dashboard with fields that drag between filters, rows, columns and values, sum, average and count aggregations, subtotals, column sorting and an optional heatmap. I want a keyboard menu for moving fields and an export of the current view as TSV.
```

With THM Componentes, you paste the full prompt from the catalog, which already includes this component's source code, and the AI reproduces this exact effect instead of improvising.

## Questions about Alambique

### Can I use my own data in Alambique?

Yes. Pass flat records in the data prop and the starting layout in the config prop, with rows, columns, values and filters. The list of available fields and the currency format in Alambique are written for the sample sales data, so ask your AI to adjust those names to your own columns.

### Does Alambique work without a mouse?

Yes. Every field in Alambique is a button: Enter opens a menu to move it to another area, change the aggregation of a value or remove it, and Esc closes the menu. Expand, collapse, filter and sort are buttons too, and on touch screens fields can be dragged with a finger.

### How do I export the current view in Alambique?

Alambique exposes a toTSV method that returns the current view with subtotals and totals as tab-separated text, ready to paste into a spreadsheet. Hook it to a copy or download button; the component also exposes setConfig, getConfig, expandAll and collapseAll.

## Related components

- [Balancete](https://vibecode.thmtecnologia.com/en/components/balancete/): A table that scrolls through thousands of rows smoothly, with filters, sorting, editing and spreadsheet copy and paste.
- [Ábaco](https://vibecode.thmtecnologia.com/en/components/abaco/): A spreadsheet inside your app, with cells, a formula bar and totals that recalculate on their own.
- [Loteamento](https://vibecode.thmtecnologia.com/en/components/loteamento/): A panel of colored rectangles, each sized by its share; click one to zoom into the next level.
- [Caderneta](https://vibecode.thmtecnologia.com/en/components/caderneta/): A whole year in small squares, one per day, getting darker on the days with more activity.
- [Páreo](https://vibecode.thmtecnologia.com/en/components/pareo/): Horizontal bars that move forward period by period and swap places in the ranking as time goes by.

---
THM Componentes: THM Componentes is a catalog of 268 UI components for Vue 3 and Nuxt, 115 of them exclusive, each with a live demo and a ready prompt for Claude Code, Cursor and other AI assistants. Pick the effect, copy the prompt and your AI applies it to your project. Lifetime access for R$ 497 (about US$ 99).