json-instructions 0.0.0-stage → 1.2.1

package/README.md

@@ -1,3 +1,211 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# json-renderers-build-table
+
+> Build a complete HTML table JSON specification from columns + data — declaratively.
+
+---
+
+## Why this exists
+
+Building a `<table>` from raw data is repetitive work that quickly becomes messy:
+
+- You scatter `createElement` calls across your codebase
+- Adding a column means touching the header, the body cells, the footer, and the colgroup
+- Swapping a cell style for one column (e.g. a badge instead of plain text) means rewriting imperative DOM code
+- Testing is hard because the logic is entangled with the DOM
+
+This library inverts that. **You describe what the table should look like in JSON.** The library stamps it out.
+
+The result is a plain JSON object — a DOM specification — that you hand to a renderer like [`@keshavsoft/json-to-tag`](https://keshavsoft.github.io/json-to-tag/dist/v9/min.js). The renderer turns it into real DOM elements. The builder never touches the DOM.
+
+---
+
+## The core idea: declarative instructions over a shared registry
+
+Every build runs through three layers:
+
+```
+1. Registry      holds { data, base, spec }
+                   data  = your columns + rows
+                   base  = the empty table skeleton (colgroup, thead, tbody, tfoot)
+                   spec  = named cell/row templates
+
+2. Instructions  a JSON array that says:
+                   "read THIS source path,
+                    apply THIS template,
+                    write the result to THIS destination"
+
+3. writePath     navigates the base tree by data-role anchor
+                 and writes using a named action
+                 (set / push / unshift / pushToRows / ...)
+```
+
+Because the instructions are JSON, you can read a build sequence without tracing any JavaScript. Each instruction has a `narration` field that explains itself in plain English.
+
+---
+
+## How a table gets built (v18 `simple`)
+
+```
+columns.json     batches.json
+      \               /
+       simple({ columns, data })
+              |
+              |  registry = { data, base, spec }
+              |
+              +-- single instructions (fromCollection)
+              |     colgroup children   (one <col> per column)
+              |     thead > tr children (one <th> per column)
+              |
+              +-- double instructions (twoDimensional)
+                    tbody children      (one <tr> per row, one <td> per column)
+              |
+              +-- returns base (fully populated JSON tree)
+```
+
+The returned `base` is a plain JavaScript object:
+
+```json
+{
+  "tagName": "table",
+  "attributes": { "class": "table table-hover ..." },
+  "children": [
+    { "tagName": "colgroup", "children": [ "..." ] },
+    { "tagName": "thead",    "children": [ { "tagName": "tr", "children": [ "..." ] } ] },
+    { "tagName": "tbody",    "children": [ "..." ] },
+    { "tagName": "tfoot",    "children": [ "..." ] }
+  ]
+}
+```
+
+Hand that to any spec-to-DOM renderer and you get a real table element.
+
+---
+
+## Quick start
+
+```js
+import { simple } from "./docs/dist/v18/min.js";
+
+const columns = [
+    {
+        columnName: "itemName",
+        width: "300px",
+        template: { body: { tr: "buildBodyTr", cell: "buildBodyCell" } }
+    },
+    {
+        columnName: "baseUnit",
+        width: "200px",
+        template: { body: { tr: "buildBodyTr", cell: "buildBodyCell" } }
+    },
+    {
+        columnName: "batches",
+        width: "100px",
+        template: { body: { tr: "buildBodyTr", cell: "buttonCell" } }
+    }
+];
+
+const data = [
+    { itemName: "0.11-25", baseUnit: "kgs", batches: 1 },
+    { itemName: "0.11-30", baseUnit: "kgs", batches: 0 }
+];
+
+const spec = simple({ columns, data });
+
+// spec is a plain JSON tree — pass it to your DOM renderer
+const element = window.ks.jsonToTag.buildSpecElement(spec);
+document.getElementById("container").appendChild(element);
+```
+
+---
+
+## What each column config means
+
+| Field | Purpose |
+|---|---|
+| `columnName` | Maps to the data property on each row object |
+| `width` | Written into the `<col>` element in the colgroup |
+| `template.body.tr` | Key into `spec.json` — which `<tr>` template to use for body rows |
+| `template.body.cell` | Key into `spec.json` — which `<td>` template to use for this column's cells |
+
+You change the look of a column's cells by pointing `template.body.cell` at a different key in `spec.json`. No JavaScript changes needed.
+
+---
+
+## Cell templates (`spec.json`)
+
+Pre-built templates in `src/v18/spec.json`:
+
+| Key | Renders |
+|---|---|
+| `buildBodyCell` | Plain `<td>` with the row value as text |
+| `buttonCell` | `<td>` containing a `<button>` showing the aggregate count |
+| `buildHeader` | `<th>` with uppercase text |
+| `buildColGroup` | `<col>` with a width attribute |
+| `buildFooter` | `<td>` with a text `<input>` for footer rows |
+| `buildOption` | `<option>` element |
+| `buildSelect` | `<select>` container |
+| `buildDataList` | `<datalist>` container |
+
+---
+
+## Why columns drive everything
+
+A column definition is the single source of truth for **one vertical slice** of the table:
+
+- its header cell (`buildHeader` template)
+- its width (`buildColGroup` template)
+- its body cell template (`template.body.cell`)
+- its footer cell (if enabled)
+
+Adding a column = adding one object to the columns array.  
+Removing a column = removing it.  
+The instructions loop over columns automatically.  
+There is no imperative "add a th, then add a td, then add a col" sequence to maintain.
+
+---
+
+## Build
+
+```bash
+npm install
+npm run build
+# output: docs/dist/v18/min.js
+```
+
+The Vite config auto-detects the highest `vN` folder under `src/` and builds that version. No config changes needed when a new version is added.
+
+---
+
+## Run the sample
+
+```bash
+npx serve
+# open http://localhost:PORT/samples/v18/simpleTable/
+```
+
+---
+
+## Project structure
+
+```
+src/
+  v18/
+    index.js              exports { simple }
+    spec.json             named cell/row templates
+    simple/
+      index.js            the build runner (registry + instructions)
+      base.json           empty table skeleton with data-role anchors
+      instructions/
+        single.json       fromCollection instructions (colgroup, thead)
+        double.json       twoDimensional instruction (tbody)
+      writePath/
+        index.js          tree writer with named actions
+
+samples/
+  v18/
+    simpleTable/          live demo: columns.json + batches.json
+
+docs/
+  dist/
+    v18/min.js            pre-built bundle (committed, served via GitHub Pages)
+```

package/package.json

@@ -1,6 +1,26 @@
-{
-  "name": "json-instructions",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "name": "json-instructions",
+  "version": "1.2.1",
+  "description": "Focused table specification builder with configurable rows and cells",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "test": "node test/v24/index.js",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "json-transformer-funcs": "^1.24.8",
+    "json-transformer-funcs-primitive": "^1.9.3"
+  },
+  "devDependencies": {
+    "vite": "^8.3.4"
+  }
+}

package/src/index.js

@@ -0,0 +1,2 @@
+export * from "./v2/index.js";
+export { default } from "./v2/index.js";

package/src/v1/actions/index.js

@@ -0,0 +1,25 @@
+import insertSerial from "./insertSerial/index.js";
+import insertOptions from "./insertOptions/index.js";
+import insertSearch from "./insertSearch/index.js";
+
+const startFunc = ({ inOptions = {}, inBase, showLog = false, returnLog = [] }) => {
+    const localOptions = inOptions;
+
+    const localBase = inBase;
+
+    if (localOptions.showSerial || localOptions.serial) {
+        insertSerial(localBase, localOptions.serial || {}, showLog, returnLog);
+    }
+
+    if (localOptions.showOptions || localOptions.options) {
+        insertOptions(localBase, localOptions.options || {}, showLog, returnLog);
+    };
+
+    if (localOptions.showSearch) {
+        insertSearch();
+    };
+
+    return localBase;
+};
+
+export default startFunc;

package/src/v1/actions/insertOptions/index.js

@@ -0,0 +1,47 @@
+import applyTemplate from "json-transformer-funcs-primitive";
+import { findByRole } from "json-transformer-funcs";
+
+import spec from "../../builders/spec.json" with { type: "json" };
+import singleInstructions from "./instructions/single.json" with { type: "json" };
+import footerInstructions from "./instructions/footer.json" with { type: "json" };
+
+import runSingleInstructions from "../../singleInstruction/index.js";
+
+const functions = { applyTemplate };
+
+const insertOptions = (input = {}, config = {}, showLog = false, returnLog = []) => {
+    let localTableSpec = input;
+    let localOptions = config;
+
+    if (input && typeof input === "object" && "inTableSpec" in input) {
+        localTableSpec = input.inTableSpec;
+        localOptions = input.inOptions || config;
+    }
+
+    const localOptionsMerged = {
+        col: { width: "100px" },
+        header: { columnName: "options" },
+        body: { columnName: "show" },
+        footer: {},
+        ...localOptions
+    };
+
+    const registry = {
+        data: {
+            options: localOptionsMerged
+        },
+        base: localTableSpec,
+        spec
+    };
+
+    runSingleInstructions(singleInstructions, registry, functions, spec, showLog, returnLog);
+
+    const footerRow = findByRole(localTableSpec, "table-footer-row");
+    if (footerRow && Array.isArray(footerRow.children) && footerRow.children.length > 0) {
+        runSingleInstructions(footerInstructions, registry, functions, spec, showLog, returnLog);
+    }
+
+    return localTableSpec;
+};
+
+export default insertOptions;

package/src/v1/actions/insertOptions/instructions/footer.json

@@ -0,0 +1,22 @@
+[
+    {
+        "narration": "Append an empty cell into the table footer row if footer row is present.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-footer-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "footer"
+            ]
+        },
+        "templateKey": "emptyCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v1/actions/insertOptions/instructions/single.json

@@ -0,0 +1,62 @@
+[
+    {
+        "narration": "Append the options column width to the table colgroup.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "col"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Append the options header cell to the table header row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "header"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Append the options button cell into each table body row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ],
+            "action": "pushToRows"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "body"
+            ]
+        },
+        "templateKey": "optionsButtonCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v1/actions/insertSearch/index.js

@@ -0,0 +1,7 @@
+import template from "./instructions/template.json" with { type: "json" };
+
+const startFunc = (input = {}, config = {}, showLog = false, returnLog = []) => {
+    return template;
+};
+
+export default startFunc;

package/src/v1/actions/insertSearch/instructions/template.json

@@ -0,0 +1,20 @@
+{
+    "tagName": "div",
+    "children": [
+        {
+            "tagName": "label",
+            "textContent": "KeshavSoft"
+        },
+        {
+            "tagName": "input",
+            "attributes": {
+                "value": "KeshavSoft",
+                "placeholder": "KeshavSoft"
+            }
+        },
+        {
+            "tagName": "button",
+            "textContent": "show"
+        }
+    ]
+}

package/src/v1/actions/insertSerial/index.js

@@ -0,0 +1,47 @@
+import applyTemplate from "json-transformer-funcs-primitive";
+import { findByRole } from "json-transformer-funcs";
+
+import spec from "../../builders/spec.json" with { type: "json" };
+import singleInstructions from "./instructions/single.json" with { type: "json" };
+import footerInstructions from "./instructions/footer.json" with { type: "json" };
+
+import runSingleInstructions from "../../singleInstruction/index.js";
+
+const functions = { applyTemplate };
+
+const insertSerial = (input = {}, config = {}, showLog = false, returnLog = []) => {
+    let localTableSpec = input;
+    let localSerial = config;
+
+    if (input && typeof input === "object" && "inTableSpec" in input) {
+        localTableSpec = input.inTableSpec;
+        localSerial = input.inSerial || config;
+    }
+
+    const localSerialMerged = {
+        col: { width: "50px" },
+        header: { columnName: "#" },
+        body: {},
+        footer: {},
+        ...localSerial
+    };
+
+    const registry = {
+        data: {
+            serial: localSerialMerged
+        },
+        base: localTableSpec,
+        spec
+    };
+
+    runSingleInstructions(singleInstructions, registry, functions, spec, showLog, returnLog);
+
+    const footerRow = findByRole(localTableSpec, "table-footer-row");
+    if (footerRow && Array.isArray(footerRow.children) && footerRow.children.length > 0) {
+        runSingleInstructions(footerInstructions, registry, functions, spec, showLog, returnLog);
+    }
+
+    return localTableSpec;
+};
+
+export default insertSerial;

package/src/v1/actions/insertSerial/instructions/footer.json

@@ -0,0 +1,22 @@
+[
+    {
+        "narration": "Prepend an empty cell into the table footer row if footer row is present.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-footer-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "footer"
+            ]
+        },
+        "templateKey": "emptyCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v1/actions/insertSerial/instructions/single.json

@@ -0,0 +1,62 @@
+[
+    {
+        "narration": "Prepend the serial column width to the table colgroup.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "col"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Prepend the serial header cell to the table header row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "header"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Prepend the serial number cell into each table body row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshiftSerialToRows"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "body"
+            ]
+        },
+        "templateKey": "buildBodyCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v1/index.js

@@ -0,0 +1,21 @@
+import simple from "./builders/simple/index.js";
+import headerOnly from "./builders/headerOnly/index.js";
+import bodyOnly from "./builders/bodyOnly/index.js";
+import withFooter from "./builders/withFooter/index.js";
+import footerOnly from "./builders/footerOnly/index.js";
+
+export {
+    simple,
+    headerOnly,
+    bodyOnly,
+    withFooter,
+    footerOnly
+};
+
+export default {
+    simple,
+    headerOnly,
+    bodyOnly,
+    withFooter,
+    footerOnly
+};

package/src/v2/index.js

@@ -0,0 +1,25 @@
+import insertSerial from "./insertSerial/index.js";
+import insertOptions from "./insertOptions/index.js";
+import insertSearch from "./insertSearch/index.js";
+
+const startFunc = ({ inOptions = {}, inBase, showLog = false, returnLog = [] }) => {
+    const localOptions = inOptions;
+
+    const localBase = inBase;
+
+    if (localOptions.showSerial || localOptions.serial) {
+        insertSerial(localBase, localOptions.serial || {}, showLog, returnLog);
+    }
+
+    if (localOptions.showOptions || localOptions.options) {
+        insertOptions(localBase, localOptions.options || {}, showLog, returnLog);
+    };
+
+    if (localOptions.showSearch) {
+        insertSearch();
+    };
+
+    return localBase;
+};
+
+export default startFunc;

package/src/v2/insertOptions/index.js

@@ -0,0 +1,47 @@
+import applyTemplate from "json-transformer-funcs-primitive";
+import { findByRole } from "json-transformer-funcs";
+
+import spec from "../../../spec.json" with { type: "json" };
+import singleInstructions from "./instructions/single.json" with { type: "json" };
+import footerInstructions from "./instructions/footer.json" with { type: "json" };
+
+import runSingleInstructions from "../../singleInstruction/index.js";
+
+const functions = { applyTemplate };
+
+const insertOptions = (input = {}, config = {}, showLog = false, returnLog = []) => {
+    let localTableSpec = input;
+    let localOptions = config;
+
+    if (input && typeof input === "object" && "inTableSpec" in input) {
+        localTableSpec = input.inTableSpec;
+        localOptions = input.inOptions || config;
+    }
+
+    const localOptionsMerged = {
+        col: { width: "100px" },
+        header: { columnName: "options" },
+        body: { columnName: "show" },
+        footer: {},
+        ...localOptions
+    };
+
+    const registry = {
+        data: {
+            options: localOptionsMerged
+        },
+        base: localTableSpec,
+        spec
+    };
+
+    runSingleInstructions(singleInstructions, registry, functions, spec, showLog, returnLog);
+
+    const footerRow = findByRole(localTableSpec, "table-footer-row");
+    if (footerRow && Array.isArray(footerRow.children) && footerRow.children.length > 0) {
+        runSingleInstructions(footerInstructions, registry, functions, spec, showLog, returnLog);
+    }
+
+    return localTableSpec;
+};
+
+export default insertOptions;

package/src/v2/insertOptions/instructions/footer.json

@@ -0,0 +1,22 @@
+[
+    {
+        "narration": "Append an empty cell into the table footer row if footer row is present.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-footer-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "footer"
+            ]
+        },
+        "templateKey": "emptyCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v2/insertOptions/instructions/single.json

@@ -0,0 +1,62 @@
+[
+    {
+        "narration": "Append the options column width to the table colgroup.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "col"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Append the options header cell to the table header row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "header"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Append the options button cell into each table body row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ],
+            "action": "pushToRows"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "body"
+            ]
+        },
+        "templateKey": "optionsButtonCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v2/insertSearch/index.js

@@ -0,0 +1,7 @@
+import template from "./instructions/template.json" with { type: "json" };
+
+const startFunc = (input = {}, config = {}, showLog = false, returnLog = []) => {
+    return template;
+};
+
+export default startFunc;

package/src/v2/insertSearch/instructions/template.json

@@ -0,0 +1,20 @@
+{
+    "tagName": "div",
+    "children": [
+        {
+            "tagName": "label",
+            "textContent": "KeshavSoft"
+        },
+        {
+            "tagName": "input",
+            "attributes": {
+                "value": "KeshavSoft",
+                "placeholder": "KeshavSoft"
+            }
+        },
+        {
+            "tagName": "button",
+            "textContent": "show"
+        }
+    ]
+}

package/src/v2/insertSerial/index.js

@@ -0,0 +1,47 @@
+import applyTemplate from "json-transformer-funcs-primitive";
+import { findByRole } from "json-transformer-funcs";
+
+import spec from "../../../spec.json" with { type: "json" };
+import singleInstructions from "./instructions/single.json" with { type: "json" };
+import footerInstructions from "./instructions/footer.json" with { type: "json" };
+
+import runSingleInstructions from "../../singleInstruction/index.js";
+
+const functions = { applyTemplate };
+
+const insertSerial = (input = {}, config = {}, showLog = false, returnLog = []) => {
+    let localTableSpec = input;
+    let localSerial = config;
+
+    if (input && typeof input === "object" && "inTableSpec" in input) {
+        localTableSpec = input.inTableSpec;
+        localSerial = input.inSerial || config;
+    }
+
+    const localSerialMerged = {
+        col: { width: "50px" },
+        header: { columnName: "#" },
+        body: {},
+        footer: {},
+        ...localSerial
+    };
+
+    const registry = {
+        data: {
+            serial: localSerialMerged
+        },
+        base: localTableSpec,
+        spec
+    };
+
+    runSingleInstructions(singleInstructions, registry, functions, spec, showLog, returnLog);
+
+    const footerRow = findByRole(localTableSpec, "table-footer-row");
+    if (footerRow && Array.isArray(footerRow.children) && footerRow.children.length > 0) {
+        runSingleInstructions(footerInstructions, registry, functions, spec, showLog, returnLog);
+    }
+
+    return localTableSpec;
+};
+
+export default insertSerial;

package/src/v2/insertSerial/instructions/footer.json

@@ -0,0 +1,22 @@
+[
+    {
+        "narration": "Prepend an empty cell into the table footer row if footer row is present.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-footer-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "footer"
+            ]
+        },
+        "templateKey": "emptyCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v2/insertSerial/instructions/single.json

@@ -0,0 +1,62 @@
+[
+    {
+        "narration": "Prepend the serial column width to the table colgroup.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "col"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Prepend the serial header cell to the table header row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "header"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Prepend the serial number cell into each table body row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshiftSerialToRows"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "body"
+            ]
+        },
+        "templateKey": "buildBodyCell",
+        "func": "applyTemplate"
+    }
+]