JSON Table

Installation

npm

npm i @json-table/core

yarn

yarn add @json-table/core

pnpm

pnpm add @json-table/core

bun

bun add @json-table/core

How it works

Every JSON value is drawn as a rectangular block:

• a primitive (string, number, boolean, null) is a single cell;
• an object lays its properties out side by side, each key becoming a header above its value;
• an array stacks its items vertically, numbering each one.

Because every block is a rectangle, they compose naturally: a value nested inside another simply takes its place in the parent’s layout, and neighbouring blocks align along shared edges — which is why arbitrarily deep JSON always produces a well-formed table.

Finally, repetition is removed: when all items of an array begin with the same header band (or the same index column), it is lifted out and drawn once at the top/left instead of repeating per item.

Rendering then just traces this layout into whatever output you need — ASCII, HTML, XLSX, or your own format.

Usage

import {
  makeTreeFactory,
  joinPrimitiveArrayValues,
  toASCII,
  toHTML,
} from "@json-table/core";

const createTree = makeTreeFactory({
  cornerCellValue: "№",
  createHeader: (key) => key,
  createIndex: (i) => i + 1,
  joinArrayValues: joinPrimitiveArrayValues,
});

const tree = createTree(data)

const asciiTable = toASCII(tree);

/* Or */

const htmlTable = toHTML(tree);

Input data:

{
  "key": "val",
  "primitiveArr": [1, "two", false],
  "object": {
    "key1": "value1",
    "key2": 789,
    "key3": {
      "nestedKey": "nestedVal"
    }
  },
  "nestedArray": [
    {
      "name": "John",
      "age": 30,
      "isStud": false
    },
    {
      "name": "Alice",
      "age": 25,
      "isStud": true
    }
  ]
}

Output:

+-----+---------------+---------------------------+--------------------------+
| key | primitiveArr  |          object           |         nestedArray      |
+-----+---------------+--------+------+-----------+---+-------+-----+--------+
|     |               |  key1  | key2 |   key3    | № | name  | age | isStud |
|     |               +--------+------+-----------+---+-------+-----+--------+
| val | 1, two, false |        |      | nestedKey | 1 | John  |  30 | false  |
|     |               | value1 |  789 +-----------+---+-------+-----+--------+
|     |               |        |      | nestedVal | 2 | Alice |  25 | true   |
+-----+---------------+--------+------+-----------+---+-------+-----+--------+

Next steps

• Factory options — all makeTreeFactory options and input handling (toJSON, TO_TABLE, empty/single-element arrays, isHeaderEqual).
• Renderers — toASCII formats, toHTML, and writing your own renderer with cells() / rows().
• Layout transforms — transpose, mirror, and re-normalize trees before rendering.
• XLSX — render trees to XLSX workbooks.

License

MIT