Introduction

Reactivepad brings spreadsheet capabilities into text editors, allowing to create sophisticated and dynamic content based on formulas, conditions, derivations, etc.

Calculate as you type! Use Excel-like formulas in-between words; put tables with computed values right inside your content; visualize data with beautiful charts.

Reactivepad saves time, increases productivity, cuts down costs by reducing tedious time-consuming copy-pasting as well as ensuring data correctness.

Samples

Features

Formulas

Value

When creating a formula, you must fill in fields such as name, format, value. Then you can save it and refer to it whenever you need it.

Formula

Think of formula as a cell in a spreadsheet, just in a text editor, surrounded by text. There are no coordinates to locate formula, so use meaningful names for references.

Changing the name of the formula

In Reactivepad, everything updated automatically. When you find that you want to name the formula differently, you don't have to worry about the places where you referred to it. The name will change immediately and the data will be correct all the time.

Formatting

When you create a new formula, you can choose its format depending on what value you need. Available formats are plain numeric value, decimal and percent.

Using Excel formulas

You probably know many formulas from Excel or another spreadsheets tool. You can use them all in Reactivepad, in the drop-down menu when entering values.

References to other values

When you have some formula created, you can easily refer to it by creating or editing another formula. You will find it in the formula editing a drop-down list. You can use it then for further calculations.

Referencing to table

Just like in the case of formulas names, you can use tables names for reference.

Column

If you want to refer to the entire column, wrap column name in square brackets and append it to the name of the table it belongs to: TableName[Column Name].

Tables

Not only formulas can take part in calculations but also tables. Tables are quite similar to spreadsheets but are more concise and readable. Data selection is not coordinates based (A1:G5) but relies on names of tables and it's columns.

Adding new column

If you want to add a new column, right-click on any cell of the table and a list will appear from which you can choose where this column should be located.

Column formula

Columns can be computed with formulas. Select the column in which you want to create the formula and hover over its name. Then a drop-down menu will appear with the "formula" option. It can be both a formula format or a plain value. Start with = sign if you want to calculate, or just insert a plain value. Note that cells in computed columns are not editable since they show the result of the calculation.

Formatting column

If you want the entire column to have a specific format, you need to hover over its name and then a drop-down menu will appear with the format options.

Referencing formula in a table

Computed columns can reference formulas outside the table.

Rename column

If you want to change the name of the column, simply double click on its name and the editing mode will appear. It will be saved automatically.

Rename table

The name of the table is located under the table. You can change this name by simply double-clicking on it.

Columns aggregations in the footer

In many cases, a column in a table needs to be aggregated, i.e. the total price of an order. The perfect place for that is table footer. Right-click on a table to trigger context menu and click "Show footer". Then you can choose one of the aggregation functions from the drop-down.

Technical overview

Reactivepad consists of the calculation engine which is responsible for:

• parsing formulas, which means tokenizing string like =SUM(table1[Column1]) + 100, then resolving and evaluating dependencies
• performing the actual calculations (with the support for ~380 Excel functions)
• ensuring consistency across the formula dependency graph, i.e. change in "a" recalculates "b" given that "b" is derived from "a" (directly or not)

On top of that, there is a view layer that consumes the outcomes of the calculation engine and presents them in the UI. We use React components here as they naturally react to data changes and re-update the UI.