tailwind-table-dom 1.1.6

package/bin/table/v2/commands/table/template/v4/Core/loadDataFlow.js

@@ -0,0 +1,25 @@
+// /Core/loadDataFlow.js
+
+import { loadInitialData } from "../DataLayer/loadInitialData.js";
+import { loadDataLists } from "../Services/dataListLoader.js";
+
+export const loadDataFlow = async ({
+    config,
+    services,
+    dataStore,
+    endPoints
+}) => {
+    // debugger;
+    await loadInitialData({
+        config,
+        services,
+        dataStore,
+        endPoints
+    });
+
+    await loadDataLists({
+        inDataStore: dataStore,
+        inServices: services,
+        inEndpoints: endPoints
+    });
+};

package/bin/table/v2/commands/table/template/v4/Core/loadVerticalOnly.js

@@ -0,0 +1,14 @@
+import { loadDataLists } from "../Services/dataListLoader.js";
+
+export const loadVerticalOnly = async ({
+    config,
+    services,
+    dataStore,
+    endPoints
+}) => {
+    await loadDataLists({
+        inDataStore: dataStore,
+        inServices: services,
+        inEndpoints: endPoints
+    });
+};

package/bin/table/v2/commands/table/template/v4/DataLayer/loadInitialData.js

@@ -0,0 +1,69 @@
+const getIdFromUrl = () => {
+    const params = new URLSearchParams(window.location.search);
+    return params.get("pk");
+};
+
+const loadInitialData = async ({
+    config,
+    services,
+    dataStore,
+    endPoints
+}) => {
+    const { data } = config;
+
+    // 1. Static data
+    if (Array.isArray(data)) {
+        dataStore.setData(data);
+        return;
+    }
+    // debugger
+    // 2. Read API
+    if (endPoints?.read) {
+        const dataFromFetch = await services.actions.getData({
+            inEndPoint: endPoints.read
+        });
+
+        if (!Array.isArray(dataFromFetch)) {
+            throw new Error("read endpoint must return array");
+        };
+
+        dataStore.setData(dataFromFetch);
+    };
+    // debugger;
+    // 3. Find API (dynamic id)
+    if (endPoints?.find) {
+        const id = getIdFromUrl();
+
+        if (id) {
+            const dataFromFetch = await services.actions.find({
+                inEndPoint: endPoints.find,
+                id
+            });
+
+            dataStore.setFindData(dataFromFetch);
+        };
+    };
+
+    if (endPoints?.filter) {
+        const id = getIdFromUrl();
+
+        if (id) {
+            const dataFromFetch = await services.actions.find({
+                inEndPoint: endPoints.find,
+                id
+            });
+
+            dataStore.setFindData(dataFromFetch);
+        }
+    };
+
+    if (endPoints.findFromParams) {
+        const dataFromFetch = await services.actions.findFromParams({
+            inEndPoint: endPoints.findFromParams
+        });
+
+        dataStore.setFindFromParams(dataFromFetch);
+    };
+};
+
+export { loadInitialData };

package/bin/table/v2/commands/table/template/v4/DomManipulation/start.js

@@ -0,0 +1,45 @@
+export const getDomManipulation = () => {
+
+    const getTableHeader = (tableContainer) => {
+        return tableContainer.querySelector(".theadClass");
+    };
+
+    const getTableFooter = (tableContainer) => {
+        return tableContainer.querySelector(".tfootClass");
+    };
+
+    const getTableBody = (tableContainer) => {
+        return tableContainer.querySelector(".tbodyClass");
+    };
+
+    const getSearchInput = (tableContainer) => {
+        return tableContainer.querySelector(".tableSearchClass");
+    };
+
+    const getSearchSingleColumnInput = (tableContainer) => {
+        return tableContainer.querySelector(".tableSearchSingleColumnClass");
+    };
+
+    const getTableNameClass = (tableContainer) => {
+        return tableContainer.querySelector(".tableNameClass");
+    };
+
+    const getDataListContainerClass = (tableContainer) => {
+        return tableContainer.querySelector(".dataListContainerClass");
+    };
+
+    const getFirstRowClass = (tableContainer) => {
+        return tableContainer.querySelector(".firstRowClass");
+    };
+
+    const getInputValueFromRow = (tr, key) => {
+        return tr.querySelector(`[name="${key}"]`)?.value || "";
+    };
+
+    return {
+        getTableHeader, getTableBody, getSearchInput,
+        getSearchSingleColumnInput,
+        getTableNameClass, getTableFooter, getDataListContainerClass,
+        getInputValueFromRow, getFirstRowClass
+    };
+};

package/bin/table/v2/commands/table/template/v4/FocusSet/V1/focusSet.js

@@ -0,0 +1,21 @@
+const focusToEl = ({ inContainerEl }) => {
+
+    // 1. try footer inputs
+    let el = inContainerEl.querySelector(
+        "tfoot input, tfoot select, tfoot textarea"
+    );
+
+    if (el) {
+        el.focus();
+        return;
+    }
+
+    // 2. fallback → search input (header/global)
+    el = document.querySelector("input[type='search'], input[placeholder*='search']");
+
+    if (el && el.offsetParent !== null) { // visible check
+        el.focus();
+    }
+};
+
+export { focusToEl };

package/bin/table/v2/commands/table/template/v4/FocusSet/V2/focusSet.js

@@ -0,0 +1,44 @@
+const focusToEl = ({ inContainerEl, inPriority }) => {
+
+    const containerEl = inContainerEl;
+    const priority = inPriority;
+
+    let el = null;
+
+    for (let i = 0; i < priority.length; i++) {
+
+        const type = priority[i];
+
+        // 🔹 vertical
+        if (type === "vertical") {
+            const findVertical = "verticalForm";
+
+            el = containerEl.querySelector(
+                `.${findVertical} input, .${findVertical} select, .${findVertical} textarea`
+            );
+        }
+
+        // 🔹 footer
+        else if (type === "footer") {
+            el = containerEl.querySelector(
+                "tfoot input, tfoot select, tfoot textarea"
+            );
+        }
+
+        // 🔹 search
+        else if (type === "search") {
+            el = document.querySelector(
+                "input[type='search'], input[placeholder*='search']"
+            );
+        }
+
+        // ✅ if found → focus and stop
+        if (el && el.offsetParent !== null) {
+            el.focus();
+            return;
+        }
+    }
+
+};
+
+export { focusToEl };

package/bin/table/v2/commands/table/template/v4/HtmlState/start.js

@@ -0,0 +1,16 @@
+export const createState = () => {
+    let tableContainerId = "kSTableContainer";
+    const tableNameClass = "tableNameClass";
+
+    return {
+        setTableContainerId(val) {
+            tableContainerId = val;
+        },
+        getTableContainerId() {
+            return tableContainerId;
+        },
+        getTableNameClass() {
+            return tableNameClass;
+        }
+    };
+};

package/bin/table/v2/commands/table/template/v4/SearchTable/CreateHeaderRow/CreateHeaderCell/assemble.js

@@ -0,0 +1,6 @@
+const assembleHeader = (wrapper, text, icon) => {
+    wrapper.appendChild(text);
+    wrapper.appendChild(icon);
+};
+
+export { assembleHeader };

package/bin/table/v2/commands/table/template/v4/SearchTable/CreateHeaderRow/CreateHeaderCell/createSortIcon.js

@@ -0,0 +1,25 @@
+const createSortIcon = () => {
+    const svgNS = "http://www.w3.org/2000/svg";
+
+    const svg = document.createElementNS(svgNS, "svg");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("class", "w-4 h-4 text-gray-400");
+    svg.setAttribute("data-sort-icon", "true");
+
+    const path = document.createElementNS(svgNS, "path");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("stroke-linejoin", "round");
+    path.setAttribute(
+        "d",
+        "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+    );
+
+    svg.appendChild(path);
+
+    return svg;
+};
+
+export { createSortIcon };

package/bin/table/v2/commands/table/template/v4/SearchTable/CreateHeaderRow/CreateHeaderCell/createTH.js

@@ -0,0 +1,12 @@
+const createTH = (key) => {
+    const th = document.createElement("th");
+
+    th.className =
+        "px-6 py-3 text-left border-b border-gray-200 bg-gray-50 hover:bg-gray-100 transition-colors cursor-pointer";
+
+    th.dataset.key = key;
+
+    return th;
+};
+
+export { createTH };

package/bin/table/v2/commands/table/template/v4/SearchTable/CreateHeaderRow/CreateHeaderCell/createText.js

@@ -0,0 +1,7 @@
+const createText = (key) => {
+    const span = document.createElement("span");
+    span.textContent = key;
+    return span;
+};
+
+export { createText };

package/bin/table/v2/commands/table/template/v4/SearchTable/CreateHeaderRow/CreateHeaderCell/createWrapper.js

@@ -0,0 +1,14 @@
+import { createText } from "./createText.js";
+import { createSortIcon } from "./createSortIcon.js";
+
+const createWrapper = (key) => {
+    const div = document.createElement("div");
+    div.className = "flex items-center gap-1 text-base font-bold text-gray-800";
+
+    div.appendChild(createText(key));
+    div.appendChild(createSortIcon());
+
+    return div;
+};
+
+export { createWrapper };

package/bin/table/v2/commands/table/template/v4/SearchTable/CreateHeaderRow/CreateHeaderCell/start.js

@@ -0,0 +1,15 @@
+import { createTH } from "./createTH.js";
+import { createWrapper } from "./createWrapper.js";
+
+const createHeaderCell = (key) => {
+    const th = createTH(key);
+
+    const wrapper = createWrapper(key);
+
+    // attach to TH
+    th.appendChild(wrapper);
+
+    return th;
+};
+
+export { createHeaderCell };

package/bin/table/v2/commands/table/template/v4/SearchTable/CreateHeaderRow/insertCells.js

@@ -0,0 +1,9 @@
+import { createHeaderCell } from "./CreateHeaderCell/start.js";
+
+const startFunc = (keys, tr, options = {}) => {
+    keys.forEach(key => {
+        tr.appendChild(createHeaderCell(key));
+    });
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v4/SearchTable/CreateHeaderRow/start.js

@@ -0,0 +1,21 @@
+import { startFunc as insertRowCells } from "./insertCells.js";
+
+const startFunc = (keys) => {
+    const tr = document.createElement("tr");
+
+    tr.appendChild(getSerialColumn());
+
+    insertRowCells(keys, tr);
+
+    return tr;
+};
+
+const getSerialColumn = () => {
+    const thIndex = document.createElement("th");
+    thIndex.textContent = "#";
+    thIndex.className = "px-4 py-2 border";
+
+    return thIndex
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v4/SearchTable/attachSortHandlers.js

@@ -0,0 +1,38 @@
+import { setSort } from "../tableStore.js";
+import { buildTableBody } from "../methods.js";
+import { updateHeaderUI } from "./updateHeaderUI.js";
+import { startFunc as getTHead } from "./getTHead.js";
+
+/**
+ * Handles what should happen when a user clicks a column header
+ * Flow:
+ * 1. Update sort state
+ * 2. Rebuild table body based on new sort
+ * 3. Reflect UI changes in header (active column + direction)
+ */
+const handleHeaderSort = (headerCell) => {
+    const key = headerCell.dataset.key;
+
+    setSort(key);
+    buildTableBody();
+    updateHeaderUI(headerCell, key);
+};
+const getSortableHeaders = () => {
+    return getTHead().querySelectorAll("th[data-key]");
+};
+
+/**
+ * Attaches sorting behavior to a header row (<tr>)
+ * Every <th data-key> becomes clickable and triggers sorting
+ */
+const attachSortHandlers = () => {
+    const sortableHeaders = getSortableHeaders();
+
+    sortableHeaders.forEach(headerCell => {
+        headerCell.addEventListener("click", (e) => {
+            handleHeaderSort(e.currentTarget);
+        });
+    });
+};
+
+export { attachSortHandlers };

package/bin/table/v2/commands/table/template/v4/SearchTable/getTHead.js

@@ -0,0 +1,12 @@
+import { getHtmlId } from "../tableStore.js";
+
+const startFunc = () => {
+    const tableContainerId = getHtmlId();
+    const tableContainer = document.getElementById(tableContainerId);
+
+    const thead = tableContainer.querySelector("table thead");
+
+    return thead;
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v4/SearchTable/sortData.js

@@ -0,0 +1,16 @@
+const startFunc = (key, dataRef, sortState) => {
+    const asc = sortState[key] = !sortState[key];
+
+    dataRef.sort((a, b) => {
+        const valA = (a[key] ?? '').toString().toLowerCase();
+        const valB = (b[key] ?? '').toString().toLowerCase();
+
+        return asc
+            ? valA.localeCompare(valB)
+            : valB.localeCompare(valA);
+    });
+
+    return asc;
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v4/SearchTable/start.js

@@ -0,0 +1,9 @@
+import { startFunc as createHeaderRow } from "./CreateHeaderRow/start.js";
+
+const startFunc = ({ inColumns, inTableHeader }) => {
+    const tr = createHeaderRow(inColumns);
+
+    inTableHeader.appendChild(tr);
+};
+
+export { startFunc };

package/bin/table/v2/commands/table/template/v4/SearchTable/updateHeaderUI.js

@@ -0,0 +1,49 @@
+import { getSortState } from "../tableStore.js";
+import { startFunc as getTHead } from "./getTHead.js";
+
+const ICON_DEFAULT = "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9";
+const ICON_UP = "M5 15l7-7 7 7";
+const ICON_DOWN = "M19 9l-7 7-7-7";
+
+const getIconPath = (th) => {
+    return th.querySelector("[data-sort-icon] path");
+};
+
+// 🔹 Reset one column
+const resetColumn = (th) => {
+    const path = getIconPath(th);
+    if (!path) return;
+
+    path.setAttribute("d", ICON_DEFAULT);
+
+    th.classList.remove("text-gray-900");
+    th.classList.add("text-gray-700");
+};
+
+// 🔹 Activate one column
+const activateColumn = (th, asc) => {
+    const path = getIconPath(th);
+    if (!path) return;
+
+    path.setAttribute("d", asc ? ICON_UP : ICON_DOWN);
+
+    th.classList.remove("text-gray-700");
+    th.classList.add("text-gray-900");
+};
+
+// 🔹 Orchestration (NOW READABLE)
+const updateHeaderUI = (activeTh, key) => {
+    const { key: activeKey, asc } = getSortState();
+
+    // 1. Reset everything
+    const tableHead = getTHead();
+
+    tableHead.querySelectorAll("th[data-key]").forEach(resetColumn);
+
+    // 2. Activate selected
+    if (activeKey === key) {
+        activateColumn(activeTh, asc);
+    }
+};
+
+export { updateHeaderUI };

package/bin/table/v2/commands/table/template/v4/Services/V1/buildUrlWithParams.js

@@ -0,0 +1,11 @@
+export const buildUrlWithParams = ({ baseUrl, params = {} }) => {
+    const url = new URL(baseUrl, window.location.origin);
+
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== null && value !== undefined) {
+            url.searchParams.set(key, value);
+        }
+    });
+
+    return url.toString();
+};

package/bin/table/v2/commands/table/template/v4/Services/V1/createItem.js

@@ -0,0 +1,15 @@
+const createItem = async ({ inEndPoint, payload }) => {
+    const res = await fetch(inEndPoint, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.json();
+};
+
+export { createItem };

package/bin/table/v2/commands/table/template/v4/Services/V1/createServices.js

@@ -0,0 +1,46 @@
+import { createItem } from "./createItem.js";
+import { getDataFromFetch } from "./getData.js";
+import { deleteItem } from "./deleteItem.js";
+import { findItem } from "./findItem.js";
+import filterPost from "./filterPost.js";
+import findFromParams from "./findFromParams.js";
+import getDataNoParamsFunc from "./getDataNoParamsFunc.js";
+
+export const createServices = ({ tableName }) => {
+    return {
+        actions: {
+            getData: ({ inEndPoint }) => getDataFromFetch({ inEndPoint }),
+            create: ({ inEndPoint, payload }) => createItem({ inEndPoint, payload }),
+            update: (id, payload) => updateItem({ tableName, id, payload }),
+            remove: ({ inEndPoint, id }) => deleteItem({ inEndPoint, id }),
+            find: ({ inEndPoint, id }) => findItem({ inEndPoint, id }),
+            findFromParams: ({ inEndPoint }) => findFromParams({ inEndPoint }),
+            vertical: {
+                save: async ({ inEndPoint, payload }) => {
+                    const res = await fetch(inEndPoint, {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify(payload)
+                    });
+
+                    return await res;
+                }
+            },
+            table: {
+                delete: async ({ inEndPoint, id }) => {
+                    const res = await fetch(`${inEndPoint}/${id}`, {
+                        method: "DELETE"
+                    });
+
+                    return await res;
+                }
+            },
+            search: {
+                filter: ({ inEndPoint, payload }) => filterPost({ inEndPoint, payload })
+            },
+            getDataNoParams: ({ inEndPoint }) => getDataNoParamsFunc({ inEndPoint }),
+        },
+    };
+};

package/bin/table/v2/commands/table/template/v4/Services/V1/deleteItem.js

@@ -0,0 +1,11 @@
+const deleteItem = async ({ inEndPoint, id }) => {
+    const res = await fetch(`${inEndPoint}/${id}`, {
+        method: "DELETE"
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.text();
+};
+
+export { deleteItem };

package/bin/table/v2/commands/table/template/v4/Services/V1/filterPost.js

@@ -0,0 +1,15 @@
+const startFunc = async ({ inEndPoint, payload }) => {
+    const res = await fetch(inEndPoint, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(payload)
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.json();
+};
+
+export default startFunc;

package/bin/table/v2/commands/table/template/v4/Services/V1/findFromParams.js

@@ -0,0 +1,11 @@
+const findFromParams = async ({ inEndPoint }) => {
+    const res = await fetch(inEndPoint, {
+        method: "GET"
+    });
+
+    if (!res.ok) throw new Error("find failed");
+
+    return await res.json();
+};
+
+export default findFromParams;

package/bin/table/v2/commands/table/template/v4/Services/V1/findItem.js

@@ -0,0 +1,11 @@
+const findItem = async ({ inEndPoint, id }) => {
+    const res = await fetch(`${inEndPoint}/${id}`, {
+        method: "GET"
+    });
+
+    if (!res.ok) throw new Error("Create failed");
+
+    return await res.json();
+};
+
+export { findItem };

package/bin/table/v2/commands/table/template/v4/Services/V1/formSearchParamsFunc.js

@@ -0,0 +1,8 @@
+const formSearchParamsFunc = ({ inKeyName }) => {
+    const params = new URLSearchParams(window.location.search);
+    const pk = params.get(inKeyName);
+
+    return pk;
+};
+
+export { formSearchParamsFunc };

package/bin/table/v2/commands/table/template/v4/Services/V1/getData.js

@@ -0,0 +1,19 @@
+import { buildUrlWithParams } from "./buildUrlWithParams.js";
+import { formSearchParamsFunc } from "./formSearchParamsFunc.js";
+
+const getDataFromFetch = async ({ inEndPoint }) => {
+    const ParentPk = formSearchParamsFunc({ inKeyName: "pk" });
+
+    const finalUrl = buildUrlWithParams({
+        baseUrl: inEndPoint,
+        params: { ParentPk }
+    });
+
+    const res = await fetch(finalUrl);
+
+    if (!res.ok) throw new Error("Fetch failed");
+
+    return await res.json();
+};
+
+export { getDataFromFetch };

package/bin/table/v2/commands/table/template/v4/Services/V1/getDataNoParamsFunc.js

@@ -0,0 +1,9 @@
+const getDataNoParamsFunc = async ({ inEndPoint }) => {
+    const res = await fetch(inEndPoint);
+
+    if (!res.ok) throw new Error("Fetch failed");
+
+    return await res.json();
+};
+
+export default getDataNoParamsFunc;