json-renderers-build-table 1.9.1 → 1.17.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "json-renderers-build-table",
-  "version": "1.9.1",
+  "version": "1.17.3",
   "description": "Focused table specification builder with configurable rows and cells",
   "type": "module",
   "main": "src/index.js",
@@ -18,7 +18,10 @@
   },
   "dependencies": {
     "@keshavsoft/json-to-tag": "^1.9.3",
-    "json-transformer-funcs": "^1.3.1"
+    "json-transformer-funcs": "^1.24.4",
+    "json-transformer-funcs-one-dimension": "^1.5.2",
+    "json-transformer-funcs-primitive": "^1.7.1",
+    "json-transformer-funcs-two-dimensions": "^1.6.1"
   },
   "devDependencies": {
     "vite": "^8.3.4"

package/src/index.js

@@ -1,3 +1,2 @@
-export * from "./v9/index.js";
-export { default } from "./v9/index.js";
-
+export * from "./v17/index.js";
+export { default } from "./v17/index.js";

package/src/v14/buildSpec/config/base.json

@@ -0,0 +1,53 @@
+{
+    "tagName": "table",
+    "attributes": {
+        "class": "table table-hover table-striped align-middle border mb-0"
+    },
+    "children": [
+        {
+            "tagName": "colgroup",
+            "attributes": {
+                "data-role": "table-colgroup"
+            },
+            "children": []
+        },
+        {
+            "tagName": "thead",
+            "attributes": {
+                "class": "table-dark",
+                "data-role": "table-header"
+            },
+            "children": [
+                {
+                    "tagName": "tr",
+                    "attributes": {
+                        "data-role": "table-header-row"
+                    },
+                    "children": []
+                }
+            ]
+        },
+        {
+            "tagName": "tbody",
+            "attributes": {
+                "data-role": "table-body"
+            },
+            "children": []
+        },
+        {
+            "tagName": "tfoot",
+            "attributes": {
+                "data-role": "table-footer"
+            },
+            "children": [
+                {
+                    "tagName": "tr",
+                    "attributes": {
+                        "data-role": "table-footer-row"
+                    },
+                    "children": []
+                }
+            ]
+        }
+    ]
+}

package/src/v14/buildSpec/config/columnInstructions.json

@@ -0,0 +1,56 @@
+[
+    {
+        "narration": "Build the column widths for the table using the configured columns.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-colgroup",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildColGroup",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Build the table header row from the column metadata.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-header-row",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildHeader",
+        "func": "fromCollection"
+    },
+    {
+        "narration": "Build the table footer row from the column metadata.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-footer-row",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "columns"
+            ]
+        },
+        "templateKey": "buildFooter",
+        "func": "fromCollection"
+    }
+]

package/src/v14/buildSpec/config/optionsInstructions.json

@@ -0,0 +1,82 @@
+[
+    {
+        "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": "buttonCell",
+        "func": "applyTemplate"
+    },
+    {
+        "narration": "Append the save button cell into the table footer row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-footer-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "push"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "options",
+                "footer"
+            ]
+        },
+        "templateKey": "buttonCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v14/buildSpec/config/rowInstructions.json

@@ -0,0 +1,20 @@
+[
+    {
+        "narration": "Create one table row for each record and place it into the table body container.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-body",
+            "filePath": [
+                "children"
+            ]
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "data"
+            ]
+        },
+        "templateKey": "buildBodyTr",
+        "func": "fromCollection"
+    }
+]

package/src/v14/buildSpec/config/serialInstructions.json

@@ -0,0 +1,82 @@
+[
+    {
+        "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"
+    },
+    {
+        "narration": "Prepend an empty cell into the table footer row.",
+        "destinationPath": {
+            "fileName": "base",
+            "dataRole": "table-footer-row",
+            "filePath": [
+                "children"
+            ],
+            "action": "unshift"
+        },
+        "sourcePath": {
+            "fileName": "data",
+            "filePath": [
+                "serial",
+                "footer"
+            ]
+        },
+        "templateKey": "buildBodyCell",
+        "func": "applyTemplate"
+    }
+]

package/src/v14/buildSpec/index.js

@@ -0,0 +1,147 @@
+import {
+    fromCollection, tableBody, buildBody,
+    findByRole, resolvePath, applyTemplate
+} from "json-transformer-funcs";
+
+import spec from "../spec.json" with { type: "json" };
+import base from "./config/base.json" with { type: "json" };
+
+import columnInstructions from "./config/columnInstructions.json" with { type: "json" };
+import rowInstructions from "./config/rowInstructions.json" with { type: "json" };
+import serialInstructions from "./config/serialInstructions.json" with { type: "json" };
+import optionsInstructions from "./config/optionsInstructions.json" with { type: "json" };
+
+import writePath from "./writePath/index.js";
+
+const functions = {
+    fromCollection,
+    tableBody,
+    buildBody,
+    applyTemplate: (inSource, inTemplate) => applyTemplate(inTemplate, inSource)
+};
+
+const runInstructions = ({ inInstructions, inRegistry }) => {
+    const localInstructions = inInstructions;
+    const localRegistry = inRegistry;
+
+    localInstructions.forEach(instruction => {
+        const source = resolvePath(localRegistry, instruction.sourcePath);
+
+        if (source) {
+            const result = functions[instruction.func](source, localRegistry.spec[instruction.templateKey]);
+            writePath({
+                inRegistry: localRegistry,
+                inPath: instruction.destinationPath,
+                inValue: result
+            });
+        }
+    });
+};
+
+const buildSpec = ({ inConfig }) => {
+    const localConfig = inConfig;
+
+    const localBase = structuredClone(base);
+    const localSpec = structuredClone(spec);
+
+    // Determine whether to render the footer
+    const hasFooterDisabled = localConfig?.options?.showFooter === false
+        || localConfig?.options?.footer === false
+        || localConfig?.showFooter === false
+        || localConfig?.footer === false;
+    const showFooter = !hasFooterDisabled;
+
+    if (!showFooter) {
+        localBase.children = localBase.children.filter(child => child.tagName !== "tfoot");
+    }
+
+    // Default template.bodyCell to buildBodyCell if omitted
+    const normalizedColumns = (localConfig?.columns || []).map(col => {
+        const colCopy = structuredClone(col);
+        colCopy.template = {
+            bodyCell: "buildBodyCell",
+            ...(colCopy.template || {})
+        };
+        return colCopy;
+    });
+
+    // Support explicit serial object or options.showSerial boolean
+    const hasSerial = Boolean(localConfig?.serial || localConfig?.options?.showSerial);
+    const serialConfig = localConfig?.serial || (hasSerial ? {
+        col: { width: "50px" },
+        header: { columnName: "#" },
+        body: {},
+        footer: {}
+    } : null);
+
+    const buildData = {
+        ...localConfig,
+        columns: normalizedColumns,
+        ...(serialConfig ? { serial: serialConfig } : {})
+    };
+
+    const registry = {
+        data: buildData,
+        base: localBase,
+        spec: localSpec
+    };
+
+    // 1. Build row containers in tbody
+    runInstructions({
+        inInstructions: rowInstructions,
+        inRegistry: registry
+    });
+
+    // 2. Build column group, header, and optional footer
+    const activeColumnInstructions = showFooter
+        ? columnInstructions
+        : columnInstructions.filter(inst => inst.templateKey !== "buildFooter");
+
+    runInstructions({
+        inInstructions: activeColumnInstructions,
+        inRegistry: registry
+    });
+
+    // 3. Build body cells for each row
+    const tbodyElement = findByRole(localBase, "table-body");
+    if (tbodyElement && Array.isArray(tbodyElement.children)) {
+        buildBody(tbodyElement.children, buildData, localSpec);
+    }
+
+    // 4. Optional serial column
+    if (serialConfig) {
+        const activeSerialInstructions = showFooter
+            ? serialInstructions
+            : serialInstructions.filter(inst => inst.destinationPath?.dataRole !== "table-footer-row");
+
+        runInstructions({
+            inInstructions: activeSerialInstructions,
+            inRegistry: registry
+        });
+    }
+
+    // 5. Optional action/options column
+    if (localConfig?.options && typeof localConfig.options === "object" && localConfig.options.header) {
+        const activeOptionsInstructions = showFooter
+            ? optionsInstructions
+            : optionsInstructions.filter(inst => inst.destinationPath?.dataRole !== "table-footer-row");
+
+        runInstructions({
+            inInstructions: activeOptionsInstructions,
+            inRegistry: registry
+        });
+    }
+
+    return localBase;
+};
+
+// Wrapper supporting both { inConfig } and direct object argument
+const startFunc = (input) => {
+    const localInput = (input && typeof input === "object" && "inConfig" in input)
+        ? input.inConfig
+        : input;
+
+    return buildSpec({ inConfig: localInput });
+};
+
+export default startFunc;

package/src/v14/buildSpec/writePath/index.js

@@ -0,0 +1,55 @@
+import { findByRole } from "json-transformer-funcs";
+
+const toArray = val => (Array.isArray(val) ? val : [val]);
+
+const actions = {
+    set: (parent, key, value) => {
+        parent[key] = value;
+    },
+    push: (parent, key, value) => {
+        parent[key].push(...toArray(value));
+    },
+    unshift: (parent, key, value) => {
+        parent[key].unshift(...toArray(value));
+    },
+    pushToRows: (parent, key, value) => {
+        parent[key].forEach(row => {
+            row.children.push(...structuredClone(toArray(value)));
+        });
+    },
+    unshiftToRows: (parent, key, value) => {
+        parent[key].forEach(row => {
+            row.children.unshift(...structuredClone(toArray(value)));
+        });
+    },
+    unshiftSerialToRows: (parent, key, value) => {
+        parent[key].forEach((row, rowIndex) => {
+            const item = structuredClone(value);
+            item.textContent = rowIndex + 1;
+            row.children.unshift(item);
+        });
+    }
+};
+
+const writePath = ({ inRegistry, inPath, inValue }) => {
+    const localRegistry = inRegistry;
+    const localPath = inPath;
+    const localValue = inValue;
+
+    const root = localPath.dataRole
+        ? findByRole(localRegistry[localPath.fileName], localPath.dataRole)
+        : localRegistry[localPath.fileName];
+
+    if (!root) return;
+
+    const keys = [...(localPath.filePath ?? [])];
+    const lastKey = keys.pop();
+    const parent = keys.reduce((current, key) => current?.[key], root);
+
+    if (!parent) return;
+
+    const actionHandler = actions[localPath.action] || actions.set;
+    actionHandler(parent, lastKey, localValue);
+};
+
+export default writePath;

package/src/v14/index.js

@@ -0,0 +1,56 @@
+import buildSpec from "./buildSpec/index.js";
+import registerGlobal from "./register/index.js";
+import spec from "./spec.json" with { type: "json" };
+
+const render = (input = {}) => {
+    const localInput = (input && typeof input === "object" && "inConfig" in input)
+        ? input.inConfig
+        : input;
+
+    const localColumns = localInput.columns || [];
+    const localData = localInput.data || [];
+    const localOptions = localInput.options || {};
+    const localSerial = localInput.serial;
+    const localTargetHtmlId = localInput.targetHtmlId;
+
+    const tableSpec = buildSpec({
+        inConfig: {
+            columns: localColumns,
+            data: localData,
+            options: localOptions,
+            serial: localSerial
+        }
+    });
+
+    if (localTargetHtmlId && typeof document !== "undefined") {
+        const container = document.getElementById(localTargetHtmlId);
+        if (container) {
+            const toTag = globalThis?.ks?.jsonToTag?.buildSpecElement;
+            if (typeof toTag === "function") {
+                const element = toTag(tableSpec);
+                container.innerHTML = "";
+                container.append(element);
+            }
+        }
+    }
+
+    return tableSpec;
+};
+
+registerGlobal({
+    inDefinition: {
+        render,
+        renderToDom: render,
+        buildSpec,
+        spec
+    }
+});
+
+export {
+    render,
+    render as renderToDom,
+    buildSpec,
+    spec
+};
+
+export default render;

package/src/v14/register/index.js

@@ -0,0 +1,30 @@
+import meta from "./meta.js";
+
+export const registerGlobal = ({ inDefinition } = {}) => {
+    const localDefinition = inDefinition;
+
+    if (typeof globalThis === "undefined" || !localDefinition) return;
+
+    globalThis.ks ??= {};
+
+    const renderFunc = typeof localDefinition === "function"
+        ? localDefinition
+        : localDefinition.render;
+
+    const buildSpecFunc = typeof localDefinition === "object"
+        ? localDefinition.buildSpec
+        : undefined;
+
+    const tablePackage = {
+        meta,
+        renderToDom: renderFunc,
+        render: renderFunc,
+        ...(buildSpecFunc ? { buildSpec: buildSpecFunc } : {}),
+        ...(typeof localDefinition === "object" ? localDefinition : {})
+    };
+
+    globalThis.ks.jsonRenderersBuildTable = tablePackage;
+    globalThis.ks.jsonRenderersBuild ??= tablePackage;
+};
+
+export default registerGlobal;

package/src/v14/register/meta.js

@@ -0,0 +1,6 @@
+export const meta = {
+    version: "1.14.0",
+    name: "json-renderers-build-table"
+};
+
+export default meta;

package/src/v14/spec.json

@@ -0,0 +1,65 @@
+{
+    "buildBodyTr": {
+        "tagName": "tr",
+        "attributes": {
+            "class": "align-middle"
+        },
+        "children": []
+    },
+    "buildColGroup": {
+        "tagName": "col",
+        "attributes": {
+            "width": "${width}"
+        }
+    },
+    "buildHeader": {
+        "tagName": "th",
+        "textContent": "${columnName}",
+        "attributes": {
+            "class": "py-3 px-3 fw-semibold text-uppercase small"
+        }
+    },
+    "buildFooter": {
+        "tagName": "td",
+        "children": [
+            {
+                "tagName": "input",
+                "attributes": {
+                    "type": "text",
+                    "placeholder": "enter ${columnName}",
+                    "name": "${columnName}",
+                    "class": "form-control"
+                }
+            }
+        ]
+    },
+    "buildBodyCell": {
+        "tagName": "td",
+        "textContent": "${rowValue}",
+        "attributes": {
+            "class": "py-3 px-3 text-secondary"
+        }
+    },
+    "button": {
+        "tagName": "button",
+        "textContent": "${columnName}",
+        "attributes": {
+            "class": "btn btn-primary btn-sm"
+        }
+    },
+    "buttonCell": {
+        "tagName": "td",
+        "attributes": {
+            "class": "py-2 px-3 text-center"
+        },
+        "children": [
+            {
+                "tagName": "button",
+                "textContent": "${agg:count}",
+                "attributes": {
+                    "class": "btn btn-primary btn-sm"
+                }
+            }
+        ]
+    }
+}