Layout & cell formatting

TREB has the standard formatting and layout options you'd expect. You can use "theme colors", which are managed by CSS, or you can use absolute colors. Everything is customizable.

Styling with CSS

On the topic of CSS, everything in TREB is styleable, although cell formatting can override CSS.

Number & Date Formats

TREB has built-in and formats for numbers and dates, or you can define your own. The decimal and group separators will automatically update based on your browser's locale.

Complex Numbers

TREB supports complex numbers as an intrinsic type; you can use them anywhere in the spreadsheet.

See the documentation page for more on complex numbers.

Sparklines

Sparklines are great for visualizing data in a small space. Because TREB was designed for embedding in larger documents, compact visualization is really important. (Although TREB has full-sized charts as well).

Try recalculating the spreadsheet (the button at the top-right) to see how sparklines work.

Smart Scaling (Zoom)

Smart scaling allows clean display and proportional layout at any scale.

Persistence

TREB can optionally persist changes to spreadsheets to browser local storage. Any changes you make to this model will be saved if you refresh the page or restart your browser.

Data in, data out, events, API

Another use for TREB is building calculation engines for web pages.

You can build an arbitrarily complex calculation in a spreadsheet, and then just drop that into your web app. It's often easier to do math in a spreadsheet than in code (and it's easier to change).

The relevant code looks approximately like this:

// data in
periods.addEventListener('change', () => {
  spreadsheet.SetRange('B3', spreadsheet.ParseNumber(periods.value));
});

// data out
spreadsheet.Subscribe(() => {
  result.textContent = spreadsheet.FormatNumber(spreadsheet.GetRange('B6'), '#,##0');
});

Of course in this example you might not want to display the spreadsheet at all (TREB supports that).