json-renderers-build-table 0.0.0-stage → 1.9.1

package/README.md

@@ -1,3 +1,28 @@
-# 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
+
+Focused table specification builder extracted from the table work in `json-renderers-build`.
+
+The package builds JSON DOM specifications for table sections. Table data remains separate from table and row options, so row actions, row attributes, and custom cell elements can evolve without adding table-specific behavior to the generic renderer package.
+
+Use the exported `renderRequests` JSON catalog to see complete requests for each supported flavor. It includes a basic table, serial numbers, default or custom actions, combined options, and standalone table head/body requests:
+
+```js
+import render, { renderRequests } from "json-renderers-build-table";
+
+const request = structuredClone(renderRequests.tableWithSerialAndActions);
+request.data = [{ itemName: "0.11-25", baseUnit: "kgs" }];
+
+const table = render(request);
+```
+
+The catalog is also available as `render.requests` when importing the default renderer. Clone a catalog entry before changing it so the shared examples remain unchanged.
+
+To add a footer row with one text input per column, enable `showFooter`:
+
+```js
+const request = structuredClone(renderRequests.tableWithFooter);
+request.data = myData;
+const table = render(request);
+```
+
+Use `showFooterSave` to add a separate footer row with the same inputs and a Save button in the last input cell.

package/package.json

@@ -1,6 +1,26 @@
-{
-  "name": "json-renderers-build-table",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+{
+  "name": "json-renderers-build-table",
+  "version": "1.9.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/v1/index.js && node test/v2/index.js && node test/v3/index.js && node test/v4/index.js && node test/v5/index.js",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@keshavsoft/json-to-tag": "^1.9.3",
+    "json-transformer-funcs": "^1.3.1"
+  },
+  "devDependencies": {
+    "vite": "^8.3.4"
+  }
 }

package/src/index.js

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

package/src/v5/index.js

@@ -0,0 +1,49 @@
+import renderTable, {
+    renderTableHead,
+    renderTableBody
+} from "./table/index.js";
+
+import applyOptions from "./options/index.js";
+import renderRequests from "./render-requests.json" with { type: "json" };
+
+const render = ({
+    type = "table",
+    data = [],
+    columns = [],
+    options = {}
+} = {}) => {
+    if (type === "table") {
+        const spec = renderTable({
+            inColumns: columns,
+            inData: data
+        });
+        console.log("inOptions : ", options);
+
+        return applyOptions(spec, options);
+    }
+
+    if (type === "tableHead" || type === "head") {
+        return renderTableHead({
+            inColumns: columns
+        });
+    }
+
+    if (type === "tableBody" || type === "body") {
+        return renderTableBody({
+            inData: data,
+            inColumns: columns
+        });
+    }
+
+    throw new Error(`Unknown table renderer type "${type}".`);
+};
+
+export {
+    render,
+    renderRequests,
+    renderTable,
+    renderTableHead,
+    renderTableBody
+};
+
+export default render;

package/src/v5/options/index.js

@@ -0,0 +1,18 @@
+import applyShowSerial from "./showSerial/index.js";
+import applyShowOptions from "./showOptions/index.js";
+
+const applyOptions = (inSpec, inOptions = {}) => {
+    console.log("inOptions : ", inOptions);
+
+    if (inOptions.showSerial) {
+        applyShowSerial(inSpec);
+    }
+
+    if (inOptions.showOptions) {
+        applyShowOptions(inSpec, inOptions.showOptions);
+    }
+
+    return inSpec;
+};
+
+export default applyOptions;

package/src/v5/options/showOptions/index.js

@@ -0,0 +1,39 @@
+const resolveButtons = (inShowOptions) => {
+    if (inShowOptions === true) {
+        return [{ label: "Apply", type: "button" }];
+    }
+
+    if (Array.isArray(inShowOptions)) {
+        return inShowOptions;
+    }
+
+    return [];
+};
+
+const applyShowOptions = (inSpec, inShowOptions) => {
+    const buttons = resolveButtons(inShowOptions);
+
+    if (buttons.length === 0) return;
+
+    const [thead, tbody] = inSpec.children;
+
+    // append <th>Actions</th> to head row
+    thead.children[0].children.push({
+        tagName: "th",
+        textContent: "Actions"
+    });
+
+    // append <td> with buttons to each body row
+    tbody.children.forEach(tr => {
+        tr.children.push({
+            tagName: "td",
+            children: buttons.map(btn => ({
+                tagName: "button",
+                attributes: { type: btn.type || "button" },
+                textContent: btn.label
+            }))
+        });
+    });
+};
+
+export default applyShowOptions;

package/src/v5/options/showSerial/index.js

@@ -0,0 +1,19 @@
+const applyShowSerial = (inSpec) => {
+    const [thead, tbody] = inSpec.children;
+
+    // prepend <th>#</th> to head row
+    thead.children[0].children.unshift({
+        tagName: "th",
+        textContent: "#"
+    });
+
+    // prepend <td>{rowIndex}</td> to each body row
+    tbody.children.forEach((tr, index) => {
+        tr.children.unshift({
+            tagName: "td",
+            textContent: String(index + 1)
+        });
+    });
+};
+
+export default applyShowSerial;

package/src/v5/render-requests.json

@@ -0,0 +1,70 @@
+{
+  "table": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {}
+  },
+  "tableWithSerial": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {
+      "showSerial": true
+    }
+  },
+  "tableWithDefaultAction": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {
+      "showOptions": true
+    }
+  },
+  "tableWithCustomActions": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {
+      "showOptions": [
+        { "label": "Show", "type": "button" },
+        { "label": "Edit", "type": "button" }
+      ]
+    }
+  },
+  "tableWithSerialAndActions": {
+    "type": "table",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {
+      "showSerial": true,
+      "showOptions": [
+        { "label": "Show", "type": "button" }
+      ]
+    }
+  },
+  "tableHead": {
+    "type": "tableHead",
+    "data": [],
+    "columns": ["itemName", "baseUnit"],
+    "options": {}
+  },
+  "tableBody": {
+    "type": "tableBody",
+    "data": [
+      { "itemName": "0.09/30mm", "baseUnit": "kgs" }
+    ],
+    "columns": ["itemName", "baseUnit"],
+    "options": {}
+  }
+}

package/src/v5/table/body/cell/index.js

@@ -0,0 +1,12 @@
+import tagJson from "./tag.json" with { type: "json" };
+
+const buildBodyCell = ({ inValue } = {}) => {
+    const td = structuredClone(tagJson);
+
+    td.attributes.value = inValue;
+    td.textContent = inValue;
+
+    return td;
+};
+
+export default buildBodyCell;

package/src/v5/table/body/cell/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "td",
+  "attributes": {
+    "value": ""
+  },
+  "textContent": ""
+}

package/src/v5/table/body/index.js

@@ -0,0 +1,17 @@
+import tagJson from "./tag.json" with { type: "json" };
+import buildBodyRow from "./row/index.js";
+
+const renderTableBody = ({ inData = [], inColumns = [] } = {}) => {
+    const tbody = structuredClone(tagJson);
+
+    const children = inData.map(row => buildBodyRow({
+        inRow: row,
+        inColumns
+    }));
+
+    tbody.children = children;
+
+    return tbody;
+};
+
+export default renderTableBody;

package/src/v5/table/body/row/index.js

@@ -0,0 +1,18 @@
+import tagJson from "./tag.json" with { type: "json" };
+import buildBodyCell from "../cell/index.js";
+
+const buildBodyRow = ({ inRow, inColumns = [] } = {}) => {
+    const tr = structuredClone(tagJson);
+
+    const children = inColumns.map(column => {
+        const value = Array.isArray(inRow) ? inRow[column] : inRow?.[column];
+
+        return buildBodyCell({ inValue: value });
+    });
+
+    tr.children = children;
+
+    return tr;
+};
+
+export default buildBodyRow;

package/src/v5/table/body/row/tag.json

@@ -0,0 +1,4 @@
+{
+  "tagName": "tr",
+  "children": []
+}

package/src/v5/table/body/tag.json

@@ -0,0 +1,4 @@
+{
+  "tagName": "tbody",
+  "children": []
+}

package/src/v5/table/head/cell/index.js

@@ -0,0 +1,12 @@
+import tagJson from "./tag.json" with { type: "json" };
+
+const buildHeadCell = ({ inColumn } = {}) => {
+    const th = structuredClone(tagJson);
+
+    th.attributes.value = inColumn;
+    th.textContent = inColumn;
+
+    return th;
+};
+
+export default buildHeadCell;

package/src/v5/table/head/cell/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "th",
+  "attributes": {
+    "value": ""
+  },
+  "textContent": ""
+}

package/src/v5/table/head/index.js

@@ -0,0 +1,16 @@
+import tagJson from "./tag.json" with { type: "json" };
+import buildHeadRow from "./row/index.js";
+
+const renderTableHead = ({ inColumns = [] } = {}) => {
+    const thead = structuredClone(tagJson);
+
+    const children = [
+        buildHeadRow({ inColumns })
+    ];
+
+    thead.children = children;
+
+    return thead;
+};
+
+export default renderTableHead;

package/src/v5/table/head/row/index.js

@@ -0,0 +1,14 @@
+import tagJson from "./tag.json" with { type: "json" };
+import buildHeadCell from "../cell/index.js";
+
+const buildHeadRow = ({ inColumns = [] } = {}) => {
+    const tr = structuredClone(tagJson);
+
+    const children = inColumns.map(column => buildHeadCell({ inColumn: column }));
+
+    tr.children = children;
+
+    return tr;
+};
+
+export default buildHeadRow;

package/src/v5/table/head/row/tag.json

@@ -0,0 +1,4 @@
+{
+  "tagName": "tr",
+  "children": []
+}

package/src/v5/table/head/tag.json

@@ -0,0 +1,4 @@
+{
+  "tagName": "thead",
+  "children": []
+}

package/src/v5/table/index.js

@@ -0,0 +1,22 @@
+import tagJson from "./tag.json" with { type: "json" };
+import renderTableHead from "./head/index.js";
+import renderTableBody from "./body/index.js";
+
+const renderTable = ({
+    inColumns = [],
+    inData = []
+} = {}) => {
+    const table = structuredClone(tagJson);
+
+    const children = [
+        renderTableHead({ inColumns }),
+        renderTableBody({ inData, inColumns })
+    ];
+
+    table.children = children;
+
+    return table;
+};
+
+export { renderTableHead, renderTableBody };
+export default renderTable;

package/src/v5/table/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "table",
+  "attributes": {
+    "class": "table table-hover table-striped mb-0"
+  },
+  "children": []
+}

package/src/v6/index.js

@@ -0,0 +1,29 @@
+import renderTable from "./table/index.js";
+
+import applyOptions from "./options/index.js";
+import renderRequests from "./render-requests.json" with { type: "json" };
+
+const render = ({
+    type = "table",
+    data = [],
+    columns = [],
+    options = {}
+} = {}) => {
+    if (type === "table") {
+        const spec = renderTable({
+            inColumns: columns,
+            inData: data
+        });
+
+        return applyOptions(spec, options, columns);
+    };
+
+    throw new Error(`Unknown table renderer type "${type}".`);
+};
+
+export {
+    render,
+    renderRequests
+};
+
+export default render;

package/src/v6/options/index.js

@@ -0,0 +1,28 @@
+import applyShowSerial from "./showSerial/index.js";
+import applyShowOptions from "./showOptions/index.js";
+import applyShowFooter from "./showFooter/index.js";
+import applyShowFooterSave from "./showFooterSave/index.js";
+
+const applyOptions = (inSpec, inOptions = {}, inColumns = []) => {
+    // console.log("inOptions : ", inOptions);
+
+    if (inOptions.showSerial) {
+        applyShowSerial(inSpec);
+    }
+
+    if (inOptions.showOptions) {
+        applyShowOptions(inSpec, inOptions.showOptions);
+    }
+
+    if (inOptions.showFooter) {
+        applyShowFooter(inSpec, inColumns, inOptions);
+    }
+
+    if (inOptions.showFooterSave) {
+        applyShowFooterSave(inSpec, inColumns, inOptions);
+    }
+
+    return inSpec;
+};
+
+export default applyOptions;

package/src/v6/options/showFooter/cell/index.js

@@ -0,0 +1,16 @@
+import tagJson from "./tag.json" with { type: "json" };
+import buildFooterInput from "../input/index.js";
+
+const buildFooterCell = ({ inColumn, inChildren = [] } = {}) => {
+    const td = structuredClone(tagJson);
+
+    if (inColumn !== undefined) {
+        td.children.push(buildFooterInput({ inColumn }));
+    }
+
+    td.children.push(...inChildren);
+
+    return td;
+};
+
+export default buildFooterCell;

package/src/v6/options/showFooter/cell/tag.json

@@ -0,0 +1,4 @@
+{
+  "tagName": "td",
+  "children": []
+}

package/src/v6/options/showFooter/footer/index.js

@@ -0,0 +1,18 @@
+import tagJson from "./tag.json" with { type: "json" };
+import buildFooterRow from "../row/index.js";
+
+const buildFooter = ({ inColumns = [], inOptions = {}, inSaveButton } = {}) => {
+    const tfoot = structuredClone(tagJson);
+
+    tfoot.children = [
+        buildFooterRow({
+            inColumns,
+            inOptions,
+            inSaveButton
+        })
+    ];
+
+    return tfoot;
+};
+
+export default buildFooter;

package/src/v6/options/showFooter/footer/tag.json

@@ -0,0 +1,4 @@
+{
+  "tagName": "tfoot",
+  "children": []
+}

package/src/v6/options/showFooter/index.js

@@ -0,0 +1,10 @@
+import buildFooter from "./footer/index.js";
+
+const applyShowFooter = (inSpec, inColumns, inOptions) => {
+    inSpec.children.push(buildFooter({
+        inColumns,
+        inOptions
+    }));
+};
+
+export default applyShowFooter;

package/src/v6/options/showFooter/input/index.js

@@ -0,0 +1,11 @@
+import tagJson from "./tag.json" with { type: "json" };
+
+const buildFooterInput = ({ inColumn } = {}) => {
+    const input = structuredClone(tagJson);
+
+    input.attributes.name = inColumn;
+
+    return input;
+};
+
+export default buildFooterInput;

package/src/v6/options/showFooter/input/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "input",
+  "attributes": {
+    "type": "text",
+    "name": ""
+  }
+}

package/src/v6/options/showFooter/row/index.js

@@ -0,0 +1,35 @@
+import tagJson from "./tag.json" with { type: "json" };
+import buildFooterCell from "../cell/index.js";
+
+const buildFooterRow = ({
+    inColumns = [],
+    inOptions = {},
+    inSaveButton
+} = {}) => {
+    const tr = structuredClone(tagJson);
+    const columns = [...inColumns];
+
+    if (columns.length === 0 && inSaveButton) {
+        tr.children = [buildFooterCell({ inChildren: [inSaveButton] })];
+        return tr;
+    }
+
+    tr.children = columns.map((column, index) => buildFooterCell({
+        inColumn: column,
+        inChildren: inSaveButton && index === columns.length - 1
+            ? [inSaveButton]
+            : []
+    }));
+
+    if (inOptions.showSerial) {
+        tr.children.unshift(buildFooterCell());
+    }
+
+    if (inOptions.showOptions) {
+        tr.children.push(buildFooterCell());
+    }
+
+    return tr;
+};
+
+export default buildFooterRow;

package/src/v6/options/showFooter/row/tag.json

@@ -0,0 +1,4 @@
+{
+  "tagName": "tr",
+  "children": []
+}

package/src/v6/options/showFooterSave/button/tag.json

@@ -0,0 +1,7 @@
+{
+  "tagName": "button",
+  "attributes": {
+    "type": "button"
+  },
+  "textContent": "Save"
+}

package/src/v6/options/showFooterSave/index.js

@@ -0,0 +1,14 @@
+import buildFooter from "../showFooter/footer/index.js";
+import tagJson from "./button/tag.json" with { type: "json" };
+
+const applyShowFooterSave = (inSpec, inColumns, inOptions) => {
+    const button = structuredClone(tagJson);
+
+    inSpec.children.push(buildFooter({
+        inColumns,
+        inOptions,
+        inSaveButton: button
+    }));
+};
+
+export default applyShowFooterSave;