# Ábaco

A spreadsheet inside your app, with cells, a formula bar and totals that recalculate on their own.

> Ábaco is an exclusive THM Componentes component that puts a working spreadsheet inside your app, with no external libraries. Its own formula engine handles sums, averages, conditions and lookups, absolute references and chained recalculation, plus a fill handle, currency and date formats, undo and paste from other spreadsheets. It suits quotes, simulators and back-office screens.

- Category: Apps and productivity
- Origin: THM exclusive, built by THM Tecnologia Inteligente; the prompt includes the full source code
- Load weight: Heavy: WebGL or simulation; one per page, loaded on demand
- Technology: Vue 3, TypeScript
- Interaction: Mouse, Touch, Keyboard
- URL: https://vibecode.thmtecnologia.com/en/components/abaco/

## What it looks like

It looks like an office spreadsheet inside a card with rounded corners. The top bar holds the title, undo and redo buttons and currency, percent and date formats. Below it, the formula bar shows the cell address and its raw content. The grid has letters on the columns and numbers on the rows; the selection gets an outline in the accent color, indigo by default, with a small square in the corner that you drag to extend a series. When several numbers are selected, the footer shows their sum, average and count. The demo calculates a project budget with subtotals, margins and totals.

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

- “an Excel-like spreadsheet inside my web app”
- “a table where I can type formulas and the total updates by itself”
- “an editable budget on screen with automatic sums and percentages”
- “a financial calculator with cells that recalculate when I change a value”
- “an online sheet that accepts data pasted from Excel”
- “that little handle on the cell corner you drag to fill a sequence”
- “a cell grid with lookup and IF formulas without a heavy library”

## Also known as

spreadsheet component, formula engine, Excel-like grid, editable grid, online spreadsheet, spreadsheet editor

## When to use

- Quotes and proposals that clients adjust while watching the total change
- Financial, pricing or margin simulators inside a product
- Back-office screens where staff paste data from other spreadsheets
- Internal tools that need real formula calculation in the browser

## When to avoid

- Lists with thousands of rows, since every cell is rendered; a virtualized table fits better
- Phone-first use, as dragging a finger scrolls the grid instead of selecting a range
- Teams that expect English function names like SUM or VLOOKUP, since formulas use Portuguese names

## How to ask your AI

```text
Create a spreadsheet with formulas inside my budgeting dashboard: a formula bar, sum, IF and lookup functions with automatic recalculation, a fill handle, currency and date formats, undo and paste from Excel, plus full keyboard navigation.
```

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 Ábaco

### Which formulas does Ábaco understand?

Ábaco uses the Brazilian Portuguese function names: SOMA for sum, MÉDIA for average, SE for if and PROCV for vertical lookup, plus MÍN, MÁX, CONT, ABS and ARRED. It accepts A1 references, ranges and absolute addresses with dollar signs. Arguments are separated by semicolons and decimals use a comma, as in Portuguese Excel.

### Can Ábaco handle a lot of rows?

Ábaco works with 5 to 200 rows and 3 to 26 columns and draws every cell on screen, which is why THM Componentes rates it Heavy. For lists with thousands of records, Balancete, which is virtualized, is a better fit; the spreadsheet shines in budgets and simulators of a controlled size.

### Does Ábaco work with a keyboard and on phones?

With a keyboard, fully: in Ábaco the arrows move, Shift extends the selection, Enter or F2 edits, Delete clears and Ctrl+Z undoes. On phones, a tap selects a cell and the formula bar accepts typing, but dragging a finger scrolls the grid instead of selecting a range.

## 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.
- [Alambique](https://vibecode.thmtecnologia.com/en/components/alambique/): A table that summarizes your records; drag fields between rows, columns and values to change the view.
- [Canteiro](https://vibecode.thmtecnologia.com/en/components/canteiro/): A bar schedule you drag to change dates, with arrows between tasks and the critical path in red.
- [Lauda](https://vibecode.thmtecnologia.com/en/components/lauda/): A text editor where every line is a block: type a slash to add headings, lists and to-dos, and drag to reorder.
- [Palimpsesto](https://vibecode.thmtecnologia.com/en/components/palimpsesto/): A timeline of a document's versions, with a slider to go back in time, side-by-side comparison and a restore button.

---
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).