Skip to content

Cellatrix

Cellatrix is a simple read-only spreadsheet manager. It can load JSF workbooks to be used with the Mondrian renderer for projects that licence our spreadsheet viewer but our spreadsheet engine, Apiary.

To use Cellatrix as a project dependency, run:

Terminal window
npm install @grid-is/cellatrix

Cellatrix is designed primarily for reading spreadsheet data. You load a JSF workbook into a Model, then use it to inspect the workbook structure and read cell. While the model does expose a write method for overriding input cells, it does not recalculate dependent cells, so it is not a substitute for a full spreadsheet engine like Apiary.

import { Model } from "@grid-is/cellatrix";
// A minimal JSF workbook with a small table of data.
// See https://jsfkit.github.io/types/Workbook/.
const jsf = {
name: "Book1.xlsx",
sheets: [
{
name: "Sheet1",
cells: {
A1: { v: "Product", t: "s" },
B1: { v: "Qty", t: "s" },
C1: { v: "Price", t: "s" },
A2: { v: "Apples", t: "s" },
B2: { v: 10, t: "n" },
C2: { v: 1.2, t: "n" },
A3: { v: "Oranges", t: "s" },
B3: { v: 5, t: "n" },
C3: { v: 0.8, t: "n" },
},
},
],
};
// Load the workbook into a model.
const model = Model.fromJSF(jsf);
// Inspect the sheet dimensions.
const workbook = model.getWorkbook();
const sheet = workbook?.getSheet("Sheet1");
const [cols, rows] = sheet?.getSize() ?? [0, 0];
console.log(`Sheet has ${cols} columns and ${rows} rows`);
// Read a range of cells as a 2D array.
const data = model.readCells("Sheet1!A1:C3");
for (const row of data) {
console.log(row.map((cell) => cell?.v));
}
// (... or read a single cell by reference).
const price = model.readCell("Sheet1!C2");
console.log("Price of apples:", price?.v);

Our spreadsheet renderer, Mondrian, has documentation on using Cellatrix models to render spreadsheets in the browser. See the Mondrian docs for more information.

If you’re interested in reading more about Cellatrix’s public API, start with the Model and Workbook classes.