blixify-ui-web 1.2.11 → 1.2.12

package/lib/components/display/newTable/index.js

@@ -10,6 +10,65 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -25,14 +84,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NewTable = void 0;
 var solid_1 = require("@heroicons/react/24/solid");
+var solid_2 = require("@heroicons/react/24/solid");
+var solid_3 = require("@heroicons/react/20/solid");
+var outline_1 = require("@heroicons/react/24/outline");
 var react_1 = require("@headlessui/react");
-var react_2 = __importDefault(require("react"));
+var axios_1 = __importDefault(require("axios"));
+var react_2 = __importStar(require("react"));
 var collapse_1 = require("../../advanced/collapse");
 var popUp_1 = require("../../advanced/popUp");
 var readModule_1 = require("../../data/readModule");
+var updateModule_1 = require("../../data/updateModule");
+var utils_1 = require("../../data/utils");
 var detailList_1 = require("../detailList");
 var textButton_1 = require("../../action/textButton");
 var iconButton_1 = require("../../action/iconButton");
+var link_1 = require("../../structure/link");
+var modal_1 = require("../modal");
 // INFO: resolve dotted key paths (e.g. "group.subKey") against a row object.
 // Required because flatColumns uses "parent.child" keys for groupData sub-columns.
 var resolveValue = function (row, key) {
@@ -44,23 +111,19 @@ var resolveValue = function (row, key) {
     return value;
 };
 var NewTable = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    var bg = props.darkMode ? "bg-gray-900" : "bg-white";
-    var borderRadius = "rounded-2xl";
-    var borderColor = props.darkMode ? "border-gray-700" : "border-gray-100";
-    var divider = props.darkMode ? "divide-gray-800" : "divide-gray-100";
-    var selectedRowBg = props.darkMode ? "bg-primary-900" : "bg-primary-50";
-    var cellFontColor = props.darkMode ? "text-gray-200" : "text-gray-700";
-    var cellPadding = "px-4 py-2";
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var columns = (_b = (_a = props.columns) !== null && _a !== void 0 ? _a : props.header) !== null && _b !== void 0 ? _b : [];
     var defaultLimit = 10;
     var defaultPageSize = 5;
     // INFO: flatten groupData columns so both mobile and desktop share the same
     // resolved column list — groupData parent becomes individual sub-columns.
+    // Also filters out id/_id columns unless showId is explicitly enabled.
     var flatColumns = [];
     columns.forEach(function (col) {
         if (col.hide)
             return;
+        if (!props.showId && (col.key === "id" || col.key === "_id"))
+            return;
         var groupData = col.groupData;
         if (groupData && groupData.length > 0) {
             groupData.forEach(function (sub) {
@@ -71,6 +134,291 @@ var NewTable = function (props) {
             flatColumns.push(col);
         }
     });
+    // INFO: compute sticky left/right offsets for pinned columns.
+    var DEFAULT_PIN_WIDTH = 150;
+    var CHECKBOX_WIDTH = 66;
+    // INFO: keys that belong to grouped columns — these cannot be pinned.
+    var groupedKeys = new Set();
+    columns.forEach(function (col) {
+        var groupData = col.groupData;
+        if (groupData && groupData.length > 0) {
+            groupData.forEach(function (sub) { return groupedKeys.add("".concat(col.key, ".").concat(sub.key)); });
+        }
+    });
+    var leftPinned = ((_d = (_c = props.pinColumns) === null || _c === void 0 ? void 0 : _c.left) !== null && _d !== void 0 ? _d : []).filter(function (key) { return !groupedKeys.has(key); });
+    var rightPinned = ((_f = (_e = props.pinColumns) === null || _e === void 0 ? void 0 : _e.right) !== null && _f !== void 0 ? _f : []).filter(function (key) { return !groupedKeys.has(key); });
+    var hasPinColumns = leftPinned.length > 0 || rightPinned.length > 0;
+    // INFO: reorder flatColumns so left-pinned come first, right-pinned come last.
+    if (hasPinColumns) {
+        var leftCols = leftPinned
+            .map(function (key) { return flatColumns.find(function (c) { return c.key === key; }); })
+            .filter(Boolean);
+        var rightCols = rightPinned
+            .map(function (key) { return flatColumns.find(function (c) { return c.key === key; }); })
+            .filter(Boolean);
+        var middleCols = flatColumns.filter(function (c) { return !leftPinned.includes(c.key) && !rightPinned.includes(c.key); });
+        flatColumns.length = 0;
+        flatColumns.push.apply(flatColumns, __spreadArray(__spreadArray(__spreadArray([], leftCols, false), middleCols, false), rightCols, false));
+    }
+    var _p = (0, react_2.useState)(props.fixedPagination ? true : false), isFixed = _p[0], setIsFixed = _p[1];
+    //=====================================================================================
+    // SECTION: Advanced Settings
+    //=====================================================================================
+    var _q = (0, react_2.useState)(""), filterModal = _q[0], setFilterModal = _q[1];
+    var _r = (0, react_2.useState)(""), addColumnModal = _r[0], setAddColumnModal = _r[1];
+    //=====================================================================================
+    // SECTION: Editable & Addable cells
+    //=====================================================================================
+    var _s = (0, react_2.useState)(""), editDataRowId = _s[0], setEditDataRowId = _s[1];
+    var _t = (0, react_2.useState)(""), editDataHeaderKey = _t[0], setEditDataHeaderKey = _t[1];
+    var _u = (0, react_2.useState)({}), editDataValue = _u[0], setEditDataValue = _u[1];
+    var _v = (0, react_2.useState)(false), editDataIsLoading = _v[0], setEditDataIsLoading = _v[1];
+    var _w = (0, react_2.useState)(false), addData = _w[0], setAddData = _w[1];
+    var _x = (0, react_2.useState)({}), addDataValue = _x[0], setAddDataValue = _x[1];
+    var _y = (0, react_2.useState)({}), referencesOptions = _y[0], setReferencesOptions = _y[1];
+    var _z = (0, react_2.useState)({}), referencesDetails = _z[0], setReferencesDetails = _z[1];
+    var _0 = (0, react_2.useState)(false), referenceLoading = _0[0], setReferenceLoading = _0[1];
+    var editDataValueRef = (0, react_2.useRef)({});
+    var editDataRowIdRef = (0, react_2.useRef)("");
+    var editDataInputRefs = (0, react_2.useRef)([]);
+    var addDataValueRef = (0, react_2.useRef)({});
+    var addDataInputRefs = (0, react_2.useRef)([]);
+    // INFO: holds the original row snapshot at the moment editing starts —
+    // never mutated during editing so we can diff against it on blur.
+    var originalDataRef = (0, react_2.useRef)({});
+    //=====================================================================================
+    // SECTION: Style & Classname
+    //=====================================================================================
+    var bgColor = props.darkMode
+        ? props.darkModeBg || "bg-gray-900"
+        : "bg-white";
+    var borderRadius = "rounded-2xl";
+    var borderColor = props.darkMode ? "border-gray-700" : "border-gray-100";
+    var selectedRowBg = props.darkMode ? "bg-primary-900" : "bg-primary-50";
+    var rowHoverBg = props.darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100";
+    var dividerColor = props.darkMode ? "divide-gray-700" : "divide-gray-100";
+    var cellFontColor = props.darkMode ? "text-gray-200" : "text-gray-700";
+    var titleFontColor = props.darkMode
+        ? "text-primary-300 font-medium"
+        : "text-primary-600 font-medium";
+    var cellPadding = "px-4 py-2";
+    var tableHeaderBgColor = props.tableHeaderBgColor
+        ? props.tableHeaderBgColor
+        : props.darkMode
+            ? "bg-gray-800"
+            : "bg-gray-50";
+    var tableHeaderFontColor = props.tableHeaderTextColor
+        ? props.tableHeaderTextColor
+        : props.darkMode
+            ? "text-gray-300"
+            : "text-gray-500";
+    // INFO: when selection is active, cancel any open add row and clear edit state —
+    // selecting rows and editing/adding simultaneously would be confusing UX.
+    (0, react_2.useEffect)(function () {
+        var hasSelection = (props.selectedIds && props.selectedIds.length > 0) || props.selectAll;
+        if (!hasSelection)
+            return;
+        // clear add row
+        addDataValueRef.current = {};
+        setAddData(false);
+        setAddDataValue({});
+        // clear edit state
+        editDataRowIdRef.current = "";
+        editDataValueRef.current = {};
+        setEditDataRowId("");
+        setEditDataValue({});
+        setEditDataHeaderKey("");
+    }, [props.selectedIds, props.selectAll]);
+    (0, react_2.useEffect)(function () {
+        if (!props.fixedPagination)
+            return;
+        var handleScroll = function () {
+            var paginationEl = document.querySelector(".pagination-container");
+            var paginationPosition = paginationEl === null || paginationEl === void 0 ? void 0 : paginationEl.getBoundingClientRect().top;
+            if (paginationPosition) {
+                // INFO: when scrollY is less than the pagination's natural position,
+                // keep it fixed at the bottom of the viewport.
+                if (window.scrollY < paginationPosition) {
+                    setIsFixed(true);
+                }
+                else {
+                    setIsFixed(false);
+                }
+            }
+        };
+        window.addEventListener("scroll", handleScroll);
+        return function () { return window.removeEventListener("scroll", handleScroll); };
+    }, [props.fixedPagination]);
+    var handleCancelAdd = function () {
+        addDataValueRef.current = {};
+        setAddData(false);
+        setAddDataValue({});
+    };
+    var handleValidateAddColumns = function () {
+        var filtered = props.showId
+            ? flatColumns
+            : flatColumns.filter(function (c) { return c.key !== "id" && c.key !== "_id"; });
+        if (filtered.length === 0)
+            return false;
+        return filtered.every(function (col) { return !col.type || utils_1.supportedTableAddList.includes(col.type); });
+    };
+    var handleConvertColumnToDataStructure = function (cols) {
+        return cols.map(function (col) {
+            var _a;
+            return (__assign(__assign({}, col), { id: col.key, name: col.title, type: (_a = col.type) !== null && _a !== void 0 ? _a : "string" }));
+        });
+    };
+    var handleCreateFormInputRefs = function (type) {
+        // INFO: one ref per column so indices always align with flatColumns.map colIndex
+        var refs = flatColumns.map(function () { return (0, react_2.createRef)(); });
+        if (type === "add")
+            addDataInputRefs.current = refs;
+        else
+            editDataInputRefs.current = refs;
+    };
+    var handleCheckFormInputRefs = function (type) { return __awaiter(void 0, void 0, void 0, function () {
+        var refs, valid;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    refs = type === "add" ? addDataInputRefs.current : editDataInputRefs.current;
+                    valid = true;
+                    return [4 /*yield*/, Promise.all(refs.map(function (ref) { return __awaiter(void 0, void 0, void 0, function () {
+                            var ok;
+                            var _a;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0:
+                                        if (!((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.handleSubmit)) return [3 /*break*/, 2];
+                                        return [4 /*yield*/, ref.current.handleSubmit()];
+                                    case 1:
+                                        ok = _b.sent();
+                                        if (!ok)
+                                            valid = false;
+                                        _b.label = 2;
+                                    case 2: return [2 /*return*/, null];
+                                }
+                            });
+                        }); }))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, valid];
+            }
+        });
+    }); };
+    var handleGenerateClonedData = function () {
+        var _a, _b;
+        return (0, updateModule_1.handleClonedDataAttribute)(addData ? addDataValueRef.current : editDataValueRef.current, handleConvertColumnToDataStructure(flatColumns), (_b = (_a = props.devSettings) === null || _a === void 0 ? void 0 : _a.server) !== null && _b !== void 0 ? _b : "mongoServer");
+    };
+    var handleUpdateChangeData = function (data) {
+        if (addData) {
+            addDataValueRef.current = data;
+            setAddDataValue(data);
+        }
+        else {
+            editDataValueRef.current = data;
+            setEditDataValue(data);
+        }
+    };
+    var handleOnChangeText = function (e) {
+        var cloned = handleGenerateClonedData();
+        cloned[e.target.id] = e.target.value;
+        handleUpdateChangeData(cloned);
+    };
+    var handleOnChangeSelect = function (id, value) {
+        var cloned = handleGenerateClonedData();
+        cloned[id] = value;
+        handleUpdateChangeData(cloned);
+    };
+    var handleOnChangeDate = function (id, value) {
+        var cloned = handleGenerateClonedData();
+        cloned[id] = value;
+        handleUpdateChangeData(cloned);
+    };
+    var handleOnChangeAddress = function (id, address) {
+        var cloned = handleGenerateClonedData();
+        cloned[id] = address;
+        handleUpdateChangeData(cloned);
+    };
+    var handleEditDataOnClick = function (rowId, headerKey, rowData) {
+        if (editDataRowIdRef.current !== rowId) {
+            editDataRowIdRef.current = rowId;
+            editDataValueRef.current = rowData;
+            originalDataRef.current = rowData;
+            setEditDataRowId(rowId);
+            setEditDataValue(rowData);
+            handleCreateFormInputRefs("edit");
+        }
+        setEditDataHeaderKey(headerKey);
+    };
+    var handleEditDataOnBlur = function (columnId, updateData) { return __awaiter(void 0, void 0, void 0, function () {
+        var currentRowId, valid, isDiff;
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    currentRowId = editDataRowIdRef.current;
+                    return [4 /*yield*/, handleCheckFormInputRefs("edit")];
+                case 1:
+                    valid = _c.sent();
+                    if (!valid)
+                        return [2 /*return*/];
+                    if (!((_a = props.editable) === null || _a === void 0 ? void 0 : _a.onUpdateData))
+                        return [2 /*return*/];
+                    isDiff = JSON.stringify(updateData === null || updateData === void 0 ? void 0 : updateData[columnId]) !==
+                        JSON.stringify((_b = originalDataRef === null || originalDataRef === void 0 ? void 0 : originalDataRef.current) === null || _b === void 0 ? void 0 : _b[columnId]);
+                    if (!isDiff)
+                        return [2 /*return*/];
+                    setEditDataIsLoading(true);
+                    return [4 /*yield*/, props.editable.onUpdateData(currentRowId, columnId, updateData)];
+                case 2:
+                    _c.sent();
+                    setEditDataIsLoading(false);
+                    // INFO: only clear if the same row and column are still active
+                    if (editDataHeaderKey === columnId &&
+                        editDataRowIdRef.current === currentRowId) {
+                        editDataRowIdRef.current = "";
+                        editDataValueRef.current = {};
+                        setEditDataRowId("");
+                        setEditDataValue({});
+                        setEditDataHeaderKey("");
+                    }
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var handleDragStart = function (e, id) {
+        e.dataTransfer.setData("itemId", id);
+    };
+    var handleDragOver = function (e) {
+        e.preventDefault();
+    };
+    var handleDrop = function (e, id) {
+        var _a, _b;
+        e.preventDefault();
+        var data = e.dataTransfer.getData("itemId");
+        if (data && id && data !== id) {
+            var clonedHeader = JSON.parse(JSON.stringify(columns));
+            var selectedIndex = clonedHeader.findIndex(function (item) { return item.key === data; });
+            var selectedItem = clonedHeader.splice(selectedIndex, 1)[0];
+            var placingIndex = clonedHeader.findIndex(function (item) { return item.key === id; });
+            clonedHeader.splice(placingIndex, 0, selectedItem);
+            (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.onDragColumn) === null || _b === void 0 ? void 0 : _b.call(_a, data, id, clonedHeader);
+        }
+    };
+    var handleSort = function (id, type) {
+        var _a, _b;
+        (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.onSortColumn) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            sortId: id,
+            type: type === "new" ? "asc" : type,
+        });
+    };
+    var handleAddColumnModal = function (id) {
+        setAddColumnModal(id);
+    };
+    var handleFilterModal = function (id) {
+        setFilterModal(id);
+    };
     var handleSelectRow = function (rowId, e) {
         var _a, _b;
         e.stopPropagation();
@@ -139,6 +487,82 @@ var NewTable = function (props) {
         (_a = props.handleSelectAll) === null || _a === void 0 ? void 0 : _a.call(props, value);
         (_b = props.handleSelectedIds) === null || _b === void 0 ? void 0 : _b.call(props, []);
     };
+    // INFO: returns sticky style, border, and background class for a pinned column cell.
+    // Returns undefined when the column is not pinned.
+    var getPinProps = function (colKey, isHeader, rowBg, isHoverable) {
+        var _a;
+        if (!hasPinColumns)
+            return undefined;
+        // INFO: extract numeric px value from a Tailwind width class (e.g. "w-[200px]" → 200, "w-48" → 192).
+        var parsePinWidth = function (key) {
+            var col = flatColumns.find(function (c) { return c.key === key; });
+            if (!(col === null || col === void 0 ? void 0 : col.width))
+                return DEFAULT_PIN_WIDTH;
+            var arbMatch = col.width.match(/\[(\d+)px\]/);
+            if (arbMatch)
+                return parseInt(arbMatch[1], 10);
+            var stdMatch = col.width.match(/w-(\d+)/);
+            if (stdMatch)
+                return parseInt(stdMatch[1], 10) * 4;
+            return DEFAULT_PIN_WIDTH;
+        };
+        var style;
+        var borderClass = "";
+        var leftIdx = leftPinned.indexOf(colKey);
+        var rightIdx = rightPinned.indexOf(colKey);
+        var pinBase = "sticky z-[2] relative whitespace-normal break-words";
+        var afterBase = "after:absolute after:top-0 after:bottom-0 after:w-px after:pointer-events-none";
+        var afterColor = props.darkMode
+            ? "after:bg-gray-700"
+            : "after:bg-gray-200";
+        if (leftIdx >= 0) {
+            var baseOffset = props.checkbox &&
+                (props.data.length > 0 ||
+                    (props.spaceData && ((_a = props.spaceData) === null || _a === void 0 ? void 0 : _a.length) > 0))
+                ? CHECKBOX_WIDTH
+                : 0;
+            // INFO: offset = sum of widths of all preceding left-pinned columns
+            var left = leftPinned
+                .slice(0, leftIdx)
+                .reduce(function (sum, key) { return sum + parsePinWidth(key); }, baseOffset);
+            var colWidth = parsePinWidth(colKey);
+            style = {
+                left: left,
+                width: colWidth,
+                minWidth: colWidth,
+                maxWidth: colWidth,
+                overflowWrap: "break-word",
+            };
+            borderClass = "".concat(pinBase, " ").concat(afterBase, " after:right-0 ").concat(afterColor);
+        }
+        else if (rightIdx >= 0) {
+            // INFO: offset = sum of widths of all right-pinned columns after this one
+            var right = rightPinned
+                .slice(rightIdx + 1)
+                .reduce(function (sum, key) { return sum + parsePinWidth(key); }, 0);
+            var colWidth = parsePinWidth(colKey);
+            style = {
+                right: right,
+                width: colWidth,
+                minWidth: colWidth,
+                maxWidth: colWidth,
+                overflowWrap: "break-word",
+            };
+            borderClass = "".concat(pinBase, " ").concat(afterBase, " after:left-0 ").concat(afterColor);
+        }
+        if (!style)
+            return undefined;
+        var bg = isHeader ? tableHeaderBgColor : (rowBg !== null && rowBg !== void 0 ? rowBg : bgColor);
+        var hoverClass = !isHeader && isHoverable
+            ? props.darkMode
+                ? "group-hover:bg-gray-700"
+                : "group-hover:bg-gray-100"
+            : "";
+        return {
+            style: style,
+            className: "".concat(bg, " ").concat(hoverClass, " ").concat(borderClass),
+        };
+    };
     var renderCheckAllSelected = function () {
         var _a, _b;
         var currentPageData = [];
@@ -174,6 +598,117 @@ var NewTable = function (props) {
         }
         return false;
     };
+    var renderFormCell = function (data, ds, ref, cellInput) {
+        return (0, updateModule_1.renderDataTemplateForm)(data, [ds], 
+        // INFO: empty refs array when not actively editing this row
+        ref !== null ? [ref] : [], {
+            handleOnChangeAddress: handleOnChangeAddress,
+            handleOnChangeText: handleOnChangeText,
+            handleOnChangeSelect: handleOnChangeSelect,
+            handleOnChangeDate: handleOnChangeDate,
+        }, false, cellInput, undefined, {
+            dbModule: axios_1.default,
+            devSettings: props.devSettings,
+            referencesOptions: referencesOptions,
+            referencesDetails: referencesDetails,
+            referenceLoading: referenceLoading,
+            setReferenceLoading: setReferenceLoading,
+            setReferencesOptions: setReferencesOptions,
+            setReferencesDetails: setReferencesDetails,
+        });
+    };
+    var renderEditDataInputs = function (colIndex, col, rowData, rowId, rowBgClass, isHoverable) {
+        var _a, _b, _c, _d;
+        var tempDS = __assign(__assign({}, col), { id: col.key, name: col.title, type: (_a = col.type) !== null && _a !== void 0 ? _a : "string" });
+        var editingRow = editDataRowId === rowId;
+        return (react_2.default.createElement("td", { key: col.key + String(colIndex), 
+            // INFO: pinned columns use whitespace-normal so text wraps within the fixed width
+            className: "".concat(getPinProps(col.key, false) ? "" : "whitespace-nowrap", " text-sm ").concat(cellFontColor, " ").concat((_c = (_b = getPinProps(col.key, false, rowBgClass, isHoverable)) === null || _b === void 0 ? void 0 : _b.className) !== null && _c !== void 0 ? _c : ""), style: (_d = getPinProps(col.key, false, rowBgClass, isHoverable)) === null || _d === void 0 ? void 0 : _d.style },
+            react_2.default.createElement("div", { className: "w-max mb-1", onClick: function (e) {
+                    e.stopPropagation();
+                    handleEditDataOnClick(rowId, col.key, rowData);
+                } }, renderFormCell(rowData, tempDS, editingRow ? editDataInputRefs.current[colIndex] : null, {
+                active: true,
+                onBlur: function (updateData) {
+                    return handleEditDataOnBlur(col.key, updateData !== null && updateData !== void 0 ? updateData : rowData);
+                },
+            }))));
+    };
+    var renderActionColumnHeader = function () {
+        var _a;
+        if (((_a = props.deleteable) === null || _a === void 0 ? void 0 : _a.active) || (addData && handleValidateAddColumns())) {
+            return (react_2.default.createElement("th", { key: "actions", className: "".concat(cellPadding, " text-left text-xs font-semibold uppercase tracking-wide") }, "Actions"));
+        }
+        return null;
+    };
+    var renderDeleteButton = function (rowId) {
+        var _a;
+        if (!((_a = props.deleteable) === null || _a === void 0 ? void 0 : _a.active))
+            return null;
+        return (react_2.default.createElement("button", { onClick: function (e) {
+                var _a;
+                e.preventDefault();
+                e.stopPropagation();
+                (_a = props.deleteable) === null || _a === void 0 ? void 0 : _a.onDeleteData(rowId);
+            }, className: "text-red-500 hover:text-red-700 hover:bg-red-50 p-1 rounded" },
+            react_2.default.createElement(outline_1.TrashIcon, { className: "h-4 w-4" })));
+    };
+    var renderActionColumnCell = function (rowId) {
+        var _a;
+        if (((_a = props.deleteable) === null || _a === void 0 ? void 0 : _a.active) && !addData) {
+            return (react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm") }, renderDeleteButton(rowId)));
+        }
+        return null;
+    };
+    var renderAddDataRow = function () {
+        var filteredCols = props.showId
+            ? flatColumns
+            : flatColumns.filter(function (c) { return c.key !== "id" && c.key !== "_id"; });
+        var colsAsDS = handleConvertColumnToDataStructure(filteredCols);
+        return (react_2.default.createElement("tr", null,
+            props.checkbox && react_2.default.createElement("td", null),
+            colsAsDS.map(function (ds, index) {
+                var _a;
+                var originalType = (_a = filteredCols[index]) === null || _a === void 0 ? void 0 : _a.type;
+                if (originalType && utils_1.supportedTableAddList.includes(originalType)) {
+                    return (react_2.default.createElement("td", { key: ds.id + String(index), className: "px-4 py-4 whitespace-nowrap align-top" },
+                        react_2.default.createElement("div", null, renderFormCell(addDataValue, ds, addDataInputRefs.current[index], { active: true, onBlur: function () { } }))));
+                }
+                return react_2.default.createElement("td", { key: ds.id + String(index) });
+            }),
+            react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm") },
+                react_2.default.createElement("div", { className: "flex flex-row gap-2" },
+                    react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_1.CheckIcon, { className: "w-5 h-5 text-green-500" }), onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                            var valid;
+                            var _a;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0: return [4 /*yield*/, handleCheckFormInputRefs("add")];
+                                    case 1:
+                                        valid = _b.sent();
+                                        if (valid) {
+                                            (_a = props.addable) === null || _a === void 0 ? void 0 : _a.onAddData(addDataValueRef.current);
+                                            handleCancelAdd();
+                                        }
+                                        return [2 /*return*/];
+                                }
+                            });
+                        }); } }),
+                    react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_1.XMarkIcon, { className: "h-5 w-5 text-red-500" }), onClick: handleCancelAdd })))));
+    };
+    var renderAddableSection = function () {
+        var _a;
+        if (!((_a = props.addable) === null || _a === void 0 ? void 0 : _a.active) || addData)
+            return null;
+        var canAdd = handleValidateAddColumns();
+        return (react_2.default.createElement("div", { className: "sticky left-0 w-full flex justify-center border-t ".concat(borderColor, " ").concat(bgColor, " px-4 py-3") },
+            react_2.default.createElement(textButton_1.TextButton, { text: "Create New Item", onClick: function () {
+                    if (canAdd) {
+                        handleCreateFormInputRefs("add");
+                        setAddData(true);
+                    }
+                }, disable: !canAdd, className: "text-sm" })));
+    };
     var renderSelectAll = function () {
         var _a, _b;
         if (!props.checkbox || props.singleSelect || ((_a = props.data) === null || _a === void 0 ? void 0 : _a.length) <= 0)
@@ -217,8 +752,8 @@ var NewTable = function (props) {
                 .multiActionFloatingBtns.filter(function (btn) { return !btn.hide; })
                 .map(function (btn) { return (react_2.default.createElement(textButton_1.TextButton, { key: btn.id, text: btn.btnText, className: "px-2 py-1 text-xs sm:text-sm whitespace-nowrap ".concat(props.darkMode ? "!text-gray-300 hover:!text-primary-300" : "!text-gray-600 hover:!text-primary-600"), onClick: function () { return btn.onClick(btn.id); } })); });
         };
-        var pillBase = "shadow-xl ".concat(borderRadius, " ").concat(bg, " border ").concat(props.darkMode ? "border-primary-300" : "");
-        return (react_2.default.createElement("div", { className: "fixed bottom-6 inset-x-4 z-10 flex justify-center" },
+        var pillBase = "shadow-xl ".concat(borderRadius, " ").concat(bgColor, " border ").concat(props.darkMode ? "border-primary-300" : "border-primary-500");
+        return (react_2.default.createElement("div", { className: "fixed bottom-10 inset-x-4 z-10 flex justify-center" },
             react_2.default.createElement("div", { className: "sm:hidden flex flex-col w-full px-4 py-2.5 ".concat(pillBase) },
                 react_2.default.createElement("div", { className: "flex items-center justify-between" },
                     renderSelectedCount(),
@@ -230,6 +765,104 @@ var NewTable = function (props) {
                 react_2.default.createElement("div", { className: "flex items-center overflow-x-auto mx-1 border-l ".concat(props.darkMode ? "border-gray-500" : "") }, renderActionBtns()),
                 renderCloseBtn())));
     };
+    // INFO: determines whether any column uses groupData — if so, a two-row
+    // thead with colSpan/rowSpan is rendered for proper visual grouping.
+    var hasGroupHeaders = columns.some(function (col) {
+        return !col.hide &&
+            col.groupData &&
+            col.groupData.length > 0;
+    });
+    var renderTableHeader = function () {
+        var advSettings = props.advSettings;
+        var cursorClassname = (advSettings === null || advSettings === void 0 ? void 0 : advSettings.dragEnabled) ? "cursor-pointer" : "";
+        var draggable = (advSettings === null || advSettings === void 0 ? void 0 : advSettings.dragEnabled) ? true : false;
+        var droppable = (advSettings === null || advSettings === void 0 ? void 0 : advSettings.dragEnabled) ? true : false;
+        var sortClassname = "flex-shrink-0 h-4 w-4 ml-3 cursor-pointer";
+        var renderHeaderIcons = function (col) {
+            var _a, _b, _c;
+            var sortIcon = null;
+            var filterIcon = null;
+            var sortColumnEnabled = (_a = advSettings === null || advSettings === void 0 ? void 0 : advSettings.sortOptions) === null || _a === void 0 ? void 0 : _a.some(function (eachOption) { return eachOption.key === col.key; });
+            var filterColumnEnabled = utils_1.supportedAQList.includes((_b = col.type) !== null && _b !== void 0 ? _b : "");
+            if (sortColumnEnabled && (advSettings === null || advSettings === void 0 ? void 0 : advSettings.sortEnabled)) {
+                if (col.key !== ((_c = advSettings.sortId) === null || _c === void 0 ? void 0 : _c.sortId)) {
+                    sortIcon = (react_2.default.createElement(solid_2.ArrowsUpDownIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "new"); } }));
+                }
+                else if (col.key === advSettings.sortId.sortId) {
+                    if (advSettings.sortId.type === "desc") {
+                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowDownIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "asc"); } }));
+                    }
+                    else if (advSettings.sortId.type === "asc") {
+                        sortIcon = (react_2.default.createElement(solid_2.BarsArrowUpIcon, { className: sortClassname, onClick: function () { return handleSort(col.key, "desc"); } }));
+                    }
+                }
+            }
+            if (filterColumnEnabled && (advSettings === null || advSettings === void 0 ? void 0 : advSettings.filterEnabled)) {
+                filterIcon = (react_2.default.createElement(outline_1.FunnelIcon, { className: sortClassname, onClick: function () { return handleFilterModal(col.key); } }));
+            }
+            return (react_2.default.createElement(react_2.default.Fragment, null,
+                sortIcon,
+                filterIcon,
+                col.type === "math" && (react_2.default.createElement(outline_1.PencilIcon, { className: sortClassname, onClick: function () { return handleAddColumnModal(col.key); } }))));
+        };
+        var renderAddColumnHeader = function () {
+            if (!(advSettings === null || advSettings === void 0 ? void 0 : advSettings.addColumnEnabled))
+                return null;
+            return (react_2.default.createElement("th", { key: "addColumns", className: "".concat(cellPadding, " text-left text-xs font-semibold uppercase tracking-wide ").concat(cursorClassname) },
+                react_2.default.createElement("div", { className: "flex flex-row items-center" },
+                    react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_3.PlusIcon, { className: "h-5 w-5 text-gray" }), onClick: function () { return handleAddColumnModal("new"); } }))));
+        };
+        if (!hasGroupHeaders) {
+            return (react_2.default.createElement("thead", null,
+                react_2.default.createElement("tr", { className: "border-b ".concat(dividerColor, " ").concat(tableHeaderBgColor, " ").concat(tableHeaderFontColor) },
+                    props.checkbox && (react_2.default.createElement("th", { className: "w-10 ".concat(cellPadding, " ").concat(hasPinColumns ? tableHeaderBgColor : ""), style: hasPinColumns
+                            ? { position: "sticky", left: 0, zIndex: 3 }
+                            : undefined }, renderSelectAll())),
+                    flatColumns.map(function (col) {
+                        var _a, _b, _c, _d;
+                        return (react_2.default.createElement("th", { key: col.key, className: "".concat(cellPadding, " text-left text-xs font-semibold uppercase tracking-wide ").concat(cursorClassname, " ").concat((_b = (_a = getPinProps(col.key, true)) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""), style: (_c = getPinProps(col.key, true)) === null || _c === void 0 ? void 0 : _c.style, draggable: draggable, onDragStart: function (e) { return handleDragStart(e, col.key); }, onDrop: droppable ? function (e) { return handleDrop(e, col.key); } : undefined, onDragOver: handleDragOver },
+                            react_2.default.createElement("div", { className: "flex flex-row items-center ".concat((_d = col.width) !== null && _d !== void 0 ? _d : "") },
+                                col.title,
+                                renderHeaderIcons(col))));
+                    }),
+                    renderAddColumnHeader(),
+                    renderActionColumnHeader())));
+        }
+        // INFO: two-row header — first row has parent group titles (colSpan) and
+        // non-group columns (rowSpan=2); second row has sub-column titles.
+        var visibleColumns = columns.filter(function (col) {
+            return !col.hide && (props.showId || (col.key !== "id" && col.key !== "_id"));
+        });
+        return (react_2.default.createElement("thead", null,
+            react_2.default.createElement("tr", { className: "border-b ".concat(dividerColor, " ").concat(tableHeaderBgColor, " ").concat(tableHeaderFontColor) },
+                props.checkbox && (react_2.default.createElement("th", { className: "w-10 ".concat(cellPadding, " ").concat(hasPinColumns ? tableHeaderBgColor : ""), style: hasPinColumns
+                        ? { position: "sticky", left: 0, zIndex: 3 }
+                        : undefined, rowSpan: 2 }, renderSelectAll())),
+                visibleColumns.map(function (col) {
+                    var _a, _b, _c, _d;
+                    var groupData = col.groupData;
+                    if (groupData && groupData.length > 0) {
+                        return (react_2.default.createElement("th", { key: col.key, colSpan: groupData.length, className: "".concat(cellPadding, " text-left text-xs font-semibold uppercase tracking-wide border-b") }, col.title));
+                    }
+                    return (react_2.default.createElement("th", { key: col.key, rowSpan: 2, className: "".concat(cellPadding, " text-left text-xs font-semibold uppercase tracking-wide ").concat(cursorClassname, " ").concat((_b = (_a = getPinProps(col.key, true)) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : ""), style: (_c = getPinProps(col.key, true)) === null || _c === void 0 ? void 0 : _c.style, draggable: draggable, onDragStart: function (e) { return handleDragStart(e, col.key); }, onDrop: droppable ? function (e) { return handleDrop(e, col.key); } : undefined, onDragOver: handleDragOver },
+                        react_2.default.createElement("div", { className: "flex flex-row items-center ".concat((_d = col.width) !== null && _d !== void 0 ? _d : "") },
+                            col.title,
+                            renderHeaderIcons(col))));
+                }),
+                renderAddColumnHeader(),
+                renderActionColumnHeader()),
+            react_2.default.createElement("tr", { className: "border-b ".concat(dividerColor, " ").concat(tableHeaderBgColor, " ").concat(tableHeaderFontColor) }, visibleColumns.map(function (col) {
+                var groupData = col.groupData;
+                if (!groupData || groupData.length === 0)
+                    return null;
+                return groupData.map(function (sub) {
+                    var _a;
+                    var subKey = "".concat(col.key, ".").concat(sub.key);
+                    return (react_2.default.createElement("th", { key: subKey, className: "".concat(cellPadding, " text-left text-xs font-medium uppercase tracking-wide") },
+                        react_2.default.createElement("div", { className: "flex flex-row items-center ".concat((_a = sub.width) !== null && _a !== void 0 ? _a : "") }, sub.title)));
+                });
+            }))));
+    };
     var renderPageNumber = function (type) {
         var _a, _b, _c, _d;
         var pageNumberList = [];
@@ -245,7 +878,7 @@ var NewTable = function (props) {
             var _loop_1 = function (i) {
                 var pageNumberClassName = basePageNumberClassname +
                     (props.pageIndex === i
-                        ? "border rounded-xl ".concat(selectedBorderColor, " ").concat(selectedFontColor, " ").concat(bg)
+                        ? "border rounded-xl ".concat(selectedBorderColor, " ").concat(selectedFontColor, " ").concat(bgColor)
                         : "".concat(cellFontColor));
                 pageNumberList.push(react_2.default.createElement("div", { key: i, "aria-current": "page", className: pageNumberClassName, onClick: props.pageIndex !== i
                         ? function () { var _a; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, i); }
@@ -297,87 +930,149 @@ var NewTable = function (props) {
         }
         return react_2.default.createElement("p", { className: "text-xs ".concat(cellFontColor) }, text);
     };
-    var renderCheckbox = function (checked, onChange, onClick, extraClassName) { return (react_2.default.createElement("input", { type: "checkbox", checked: checked, onChange: onChange, onClick: onClick, className: "rounded ".concat(props.darkMode ? "border-gray-400" : "border-gray-500", " ").concat(bg, " focus:ring-0 focus:ring-offset-0 focus:outline-offset-0 checked:text-primary-400 ").concat(extraClassName !== null && extraClassName !== void 0 ? extraClassName : "") })); };
+    var renderCheckbox = function (checked, onChange, onClick, extraClassName) { return (react_2.default.createElement("input", { type: "checkbox", checked: checked, onChange: onChange, onClick: onClick, className: "rounded ".concat(props.darkMode ? "border-gray-400" : "border-gray-500", " ").concat(bgColor, " focus:ring-0 focus:ring-offset-0 focus:outline-offset-0 checked:text-primary-400 ").concat(extraClassName !== null && extraClassName !== void 0 ? extraClassName : "") })); };
     if (props.mobileView) {
         var isIdLike_1 = function (c) {
             return /^id$/i.test(c.key) || /^_id$/i.test(c.key);
         };
-        var titleCol_1 = (_c = flatColumns.find(function (c) { return !isIdLike_1(c); })) !== null && _c !== void 0 ? _c : flatColumns[0];
+        var titleCol_1 = (_g = flatColumns.find(function (c) { return !isIdLike_1(c); })) !== null && _g !== void 0 ? _g : flatColumns[0];
         var expandHeaderBg_1 = props.darkMode ? "bg-gray-700" : "bg-gray-100";
         var expandHeaderFontColor_1 = props.darkMode ? "text-white" : "";
         var headerBgColor_1 = props.darkMode ? "bg-gray-900" : "";
         var headerFontColor_1 = props.darkMode ? "text-white" : "";
-        var renderHeaderText_1 = function (col, row) {
-            var value = resolveValue(row, col.key);
-            if (value === undefined || value === null)
-                return "";
-            if (value instanceof Date)
-                return value.toLocaleDateString();
-            if (typeof value === "object") {
-                if ("name" in value)
-                    return String(value.name);
-                return JSON.stringify(value);
-            }
-            return String(value);
-        };
         return (react_2.default.createElement("div", null,
-            react_2.default.createElement("div", { className: "w-full overflow-hidden border ".concat(borderRadius, " ").concat(borderColor, " ").concat(bg, " shadow-sm divide-y ").concat(divider, " ").concat((_d = props.className) !== null && _d !== void 0 ? _d : "") },
+            react_2.default.createElement("div", { className: "w-full overflow-hidden border ".concat(borderRadius, " ").concat(borderColor, " ").concat(bgColor, " shadow-sm divide-y ").concat(dividerColor, " ").concat((_h = props.className) !== null && _h !== void 0 ? _h : "") },
                 react_2.default.createElement("div", { className: "p-3 flex justify-between" },
                     renderSelectAll(),
                     renderSelectedCount()),
-                props.data.length === 0 && (react_2.default.createElement("p", { className: "p-8 text-center text-sm text-gray-400" }, (_e = props.emptyTitle) !== null && _e !== void 0 ? _e : "No data")),
-                props.data.map(function (row) {
-                    var _a, _b, _c;
-                    var cardTitle = renderHeaderText_1(titleCol_1, row) || row.id;
-                    var isSelected = ((_b = (_a = props.selectedIds) === null || _a === void 0 ? void 0 : _a.includes(row.id)) !== null && _b !== void 0 ? _b : false) ||
-                        ((_c = props.selectAll) !== null && _c !== void 0 ? _c : false);
-                    var detailList = flatColumns.map(function (col) { return ({
-                        title: col.title,
-                        text: (0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, resolveValue(row, col.key), props.bareSettings, true),
-                    }); });
-                    return (react_2.default.createElement("div", { key: row.id, onClick: function () { var _a; return (_a = props.onClickRow) === null || _a === void 0 ? void 0 : _a.call(props, row); } },
-                        react_2.default.createElement(collapse_1.Collapse, { title: cardTitle, titleClassName: "text-sm font-medium !p-0", icon: props.checkbox ? renderCheckbox(isSelected, function () { }, function (e) { return handleSelectRow(row.id, e); }, "w-4 h-4 cursor-pointer") : (react_2.default.createElement(solid_1.ListBulletIcon, { className: "w-4 h-4 ".concat(props.darkMode ? "text-gray-400" : "text-gray-500") })), defaultValue: false, collapseContainerCss: "".concat(isSelected ? selectedRowBg : expandHeaderBg_1, " ").concat(expandHeaderFontColor_1), notCollapseContainerCss: "".concat(isSelected ? selectedRowBg : headerBgColor_1, " ").concat(headerFontColor_1), content: react_2.default.createElement(detailList_1.DetailList, { title: "", list: detailList, size: "compact", darkMode: props.darkMode }) })));
-                })),
-            !props.hidePagination && (react_2.default.createElement("div", { className: "flex flex-col items-end gap-y-2  mt-2 sm:flex-row sm:justify-between sm:items-start" },
+                props.loading &&
+                    Array.from({ length: 3 }).map(function (_, i) { return (react_2.default.createElement("div", { key: "skeleton-".concat(i), className: "p-4" },
+                        react_2.default.createElement("div", { className: "h-5 w-3/4 rounded-md animate-pulse ".concat(props.darkMode ? "bg-gray-700" : "bg-gray-200") }))); }),
+                !props.loading && props.data.length === 0 && (react_2.default.createElement("p", { className: "p-4 text-center text-sm ".concat(cellFontColor) }, (_j = props.emptyTitle) !== null && _j !== void 0 ? _j : "No items")),
+                !props.loading &&
+                    props.data.map(function (row, index) {
+                        var _a, _b, _c, _d, _e;
+                        var spaceRow = (_a = props.spaceData) === null || _a === void 0 ? void 0 : _a[index];
+                        var cardTitle = titleCol_1
+                            ? spaceRow
+                                ? spaceRow[titleCol_1.key]
+                                : resolveValue(row, titleCol_1.key) || row.id
+                            : "";
+                        var isSelected = ((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.includes(row.id)) !== null && _c !== void 0 ? _c : false) ||
+                            ((_d = props.selectAll) !== null && _d !== void 0 ? _d : false);
+                        var detailList = flatColumns.map(function (col) { return ({
+                            id: col.key,
+                            title: col.title,
+                            text: (0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, spaceRow ? spaceRow[col.key] : resolveValue(row, col.key), props.bareSettings, true, props.disableEllipsisOnLongWord),
+                        }); });
+                        if (props.onClickRow || props.newTabUrl) {
+                            detailList.push({
+                                id: "".concat(row.id, "-more-details-btn"),
+                                title: "",
+                                text: props.newTabUrl ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl + row.id + ((_e = props.addNewTabUrl) !== null && _e !== void 0 ? _e : ""), className: "flex items-center", linkType: props.linkType, custom: props.custom },
+                                    react_2.default.createElement(textButton_1.TextButton, { text: "More details", className: "text-sm", onClick: function () { } }),
+                                    react_2.default.createElement(solid_1.ChevronRightIcon, { className: "ml-1 w-3 h-3 text-primary-500" }))) : (react_2.default.createElement("div", { className: "flex items-center" },
+                                    react_2.default.createElement(textButton_1.TextButton, { text: "More details", className: "text-sm", onClick: function (e) {
+                                            var _a;
+                                            e.stopPropagation();
+                                            (_a = props.onClickRow) === null || _a === void 0 ? void 0 : _a.call(props, row.id, row, spaceRow);
+                                        } }),
+                                    react_2.default.createElement(solid_1.ChevronRightIcon, { className: "ml-1 w-3 h-3 text-primary-500" }))),
+                            });
+                        }
+                        return (react_2.default.createElement("div", { key: row.id },
+                            react_2.default.createElement(collapse_1.Collapse, { title: cardTitle, titleClassName: "text-sm font-medium !p-0 ".concat(props.onClickRow ? titleFontColor : ""), icon: props.checkbox ? renderCheckbox(isSelected, function () { }, function (e) { return handleSelectRow(row.id, e); }, "w-4 h-4 cursor-pointer") : (react_2.default.createElement(solid_1.ListBulletIcon, { className: "w-4 h-4 ".concat(props.darkMode ? "text-gray-400" : "text-gray-500") })), defaultValue: false, collapseContainerCss: "".concat(isSelected ? selectedRowBg : expandHeaderBg_1, " ").concat(expandHeaderFontColor_1), notCollapseContainerCss: "".concat(isSelected ? selectedRowBg : headerBgColor_1, " ").concat(headerFontColor_1), content: react_2.default.createElement("div", null,
+                                    react_2.default.createElement(detailList_1.DetailList, { title: "", list: detailList, size: "compact", darkMode: props.darkMode })) })));
+                    })),
+            !props.hidePagination && props.paginationType && (react_2.default.createElement("div", { className: "mt-2 flex items-center justify-between ".concat(props.fixedPagination
+                    ? "pagination-container w-full sm:px-6 ".concat(borderColor, " ").concat(isFixed
+                        ? "fixed bottom-0 left-0 z-10"
+                        : "sticky top-0 left-0")
+                    : "") },
                 renderPageResult(),
                 renderPagination())),
             renderFloatingActionBar()));
     }
-    var headerText = props.darkMode ? "text-gray-400" : "text-gray-500";
-    var rowHoverBg = props.darkMode
-        ? "hover:bg-gray-50/50"
-        : "hover:bg-gray-50/50";
-    var totalCols = flatColumns.length + (props.checkbox ? 1 : 0);
-    return (react_2.default.createElement("div", { className: "w-full ".concat((_f = props.className) !== null && _f !== void 0 ? _f : "") },
-        react_2.default.createElement("div", { className: "w-full overflow-x-auto ".concat(borderRadius, " border ").concat(borderColor, " ").concat(bg, " shadow-sm") },
-            (props.selectAll || ((_h = (_g = props.selectedIds) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) > 0) && (react_2.default.createElement("div", { className: "flex flex-row items-center px-4 py-3 gap-x-2" },
+    return (react_2.default.createElement("div", { className: "w-full ".concat((_k = props.className) !== null && _k !== void 0 ? _k : "") },
+        react_2.default.createElement(modal_1.Modal, { open: filterModal ? true : false, title: "Filter Options", renderContent: function () {
+                var _a, _b;
+                return (react_2.default.createElement("div", { className: "pb-44" },
+                    react_2.default.createElement("div", { className: "pb-48" }, (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.renderFilterElements) === null || _b === void 0 ? void 0 : _b.call(_a, filterModal))));
+            }, onClose: function () { return setFilterModal(""); } }),
+        react_2.default.createElement(modal_1.Modal, { open: addColumnModal ? true : false, title: "Add Columns", renderContent: function () {
+                var _a, _b;
+                return (react_2.default.createElement("div", null, (_b = (_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.renderAddColumnElements) === null || _b === void 0 ? void 0 : _b.call(_a, addColumnModal, function (id) { return handleAddColumnModal(id); })));
+            }, onClose: function () { return handleAddColumnModal(""); } }),
+        react_2.default.createElement("div", { className: "w-full overflow-x-auto ".concat(borderRadius, " border ").concat(borderColor, " ").concat(bgColor, " shadow-sm") },
+            (props.selectAll || ((_m = (_l = props.selectedIds) === null || _l === void 0 ? void 0 : _l.length) !== null && _m !== void 0 ? _m : 0) > 0) &&
+                (!props.multiActionFloatingBtns ||
+                    (props.multiActionFloatingBtns &&
+                        props.multiActionFloatingBtns.length <= 0)) && (react_2.default.createElement("div", { className: "sticky left-0 flex flex-row items-center px-4 py-3 gap-x-2" },
                 renderSelectedCount(),
                 props.multiActionButton)),
             react_2.default.createElement("table", { className: "w-full" },
-                react_2.default.createElement("thead", null,
-                    react_2.default.createElement("tr", { className: "border-b ".concat(divider) },
-                        react_2.default.createElement("th", { className: "w-10 px-4 py-3" }, renderSelectAll()),
-                        flatColumns.map(function (col) {
-                            var _a;
-                            return (react_2.default.createElement("th", { key: col.key, className: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide ".concat(headerText) },
-                                react_2.default.createElement("div", { className: "flex flex-row items-center ".concat((_a = col.width) !== null && _a !== void 0 ? _a : "") }, col.title)));
-                        }))),
-                react_2.default.createElement("tbody", { className: "divide-y ".concat(divider) },
-                    props.data.length === 0 && (react_2.default.createElement("tr", null,
-                        react_2.default.createElement("td", { colSpan: totalCols, className: "p-8 text-center text-sm text-gray-400" }, (_j = props.emptyTitle) !== null && _j !== void 0 ? _j : "No data"))),
-                    props.data.map(function (row) {
-                        var _a, _b, _c;
-                        var isSelected = ((_b = (_a = props.selectedIds) === null || _a === void 0 ? void 0 : _a.includes(row.id)) !== null && _b !== void 0 ? _b : false) ||
-                            ((_c = props.selectAll) !== null && _c !== void 0 ? _c : false);
-                        return (react_2.default.createElement("tr", { key: row.id, onClick: function () { var _a; return (_a = props.onClickRow) === null || _a === void 0 ? void 0 : _a.call(props, row); }, className: isSelected
-                                ? selectedRowBg
-                                : props.onClickRow
-                                    ? "cursor-pointer ".concat(rowHoverBg)
-                                    : "" },
-                            props.checkbox && (react_2.default.createElement("td", { className: "w-10 ".concat(cellPadding), onClick: function (e) { return handleSelectRow(row.id, e); } }, renderCheckbox(isSelected, function () { }))),
-                            flatColumns.map(function (col) { return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " ").concat(col.width ? "".concat(col.width, " flex-shrink-0") : "whitespace-nowrap") }, (0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, row[col.key], props.bareSettings, true))); })));
-                    })))),
-        !props.hidePagination && (react_2.default.createElement("div", { className: "flex flex-col items-end gap-y-2  mt-2 sm:flex-row sm:justify-between sm:items-start" },
+                renderTableHeader(),
+                react_2.default.createElement("tbody", { className: "divide-y ".concat(dividerColor) },
+                    props.loading &&
+                        Array.from({ length: 3 }).map(function (_, i) { return (react_2.default.createElement("tr", { key: "skeleton-".concat(i) },
+                            props.checkbox && react_2.default.createElement("td", { className: "w-10 ".concat(cellPadding) }),
+                            flatColumns.map(function (col) { return (react_2.default.createElement("td", { key: col.key, className: cellPadding },
+                                react_2.default.createElement("div", { className: "h-5 rounded-md animate-pulse ".concat(props.darkMode ? "bg-gray-700" : "bg-gray-200") }))); }))); }),
+                    !props.loading &&
+                        props.data.map(function (row, index) {
+                            var _a, _b, _c, _d;
+                            var spaceRow = (_a = props.spaceData) === null || _a === void 0 ? void 0 : _a[index];
+                            var isSelected = ((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.includes(row.id)) !== null && _c !== void 0 ? _c : false) ||
+                                ((_d = props.selectAll) !== null && _d !== void 0 ? _d : false);
+                            var rowBgClass = isSelected ? selectedRowBg : bgColor;
+                            var isRowHoverable = !!props.onClickRow && !isSelected;
+                            return (react_2.default.createElement("tr", { key: row.id, onClick: function (e) {
+                                    if (props.onClickRow) {
+                                        props.onClickRow(row.id, row, spaceRow);
+                                    }
+                                    e.preventDefault();
+                                }, className: "group ".concat(isSelected
+                                    ? selectedRowBg
+                                    : props.onClickRow
+                                        ? "cursor-pointer ".concat(rowHoverBg)
+                                        : editDataIsLoading && editDataRowId === row.id
+                                            ? "animate-pulse"
+                                            : "") },
+                                props.checkbox && (react_2.default.createElement("td", { className: "w-10 ".concat(cellPadding, " ").concat(hasPinColumns ? "".concat(rowBgClass, " ").concat(isRowHoverable ? (props.darkMode ? "group-hover:bg-gray-700" : "group-hover:bg-gray-100") : "") : ""), style: hasPinColumns
+                                        ? { position: "sticky", left: 0, zIndex: 1 }
+                                        : undefined, onClick: function (e) { return handleSelectRow(row.id, e); } }, renderCheckbox(isSelected, function () { }))),
+                                flatColumns.map(function (col, colIndex) {
+                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                                    var cellValue = spaceRow
+                                        ? spaceRow[col.key]
+                                        : resolveValue(row, col.key);
+                                    // INFO: first col with type "string" is never made editable
+                                    var isEditable = ((_a = props.editable) === null || _a === void 0 ? void 0 : _a.active) &&
+                                        !(((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0 ||
+                                            props.selectAll) &&
+                                        col.type &&
+                                        utils_1.supportedTableAddList.includes(col.type) &&
+                                        !(colIndex === 0 && col.type === "string");
+                                    var rowData = editDataRowId === row.id ? editDataValue : row;
+                                    if (isEditable) {
+                                        var bareOverride = (_e = (_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareListDescription) === null || _e === void 0 ? void 0 : _e.call(_d, col.key, cellValue);
+                                        if (!bareOverride)
+                                            return renderEditDataInputs(colIndex, col, rowData, row.id, rowBgClass, isRowHoverable);
+                                    }
+                                    return (
+                                    // INFO: pinned columns use whitespace-normal so text wraps within the fixed width
+                                    react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(colIndex === 0 && props.onClickRow ? titleFontColor : cellFontColor, " ").concat(col.width ? "".concat(col.width, " flex-shrink-0") : getPinProps(col.key, false) ? "" : "whitespace-nowrap", " ").concat((_g = (_f = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _f === void 0 ? void 0 : _f.className) !== null && _g !== void 0 ? _g : ""), style: (_h = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _h === void 0 ? void 0 : _h.style }, props.newTabUrl && props.onClickRow ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl +
+                                            row.id +
+                                            ((_j = props.addNewTabUrl) !== null && _j !== void 0 ? _j : ""), className: "w-full block", linkType: props.linkType, custom: props.custom }, (0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord))) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord))));
+                                }),
+                                renderActionColumnCell(row.id)));
+                        }),
+                    !props.loading && addData && renderAddDataRow())),
+            !props.loading && props.data.length === 0 && (react_2.default.createElement("div", { className: "p-4 text-sm ".concat(cellFontColor, " text-center sticky left-0") }, (_o = props.emptyTitle) !== null && _o !== void 0 ? _o : "No items")),
+            renderAddableSection()),
+        !props.hidePagination && props.paginationType && (react_2.default.createElement("div", { className: "mt-2 flex items-center justify-between ".concat(props.fixedPagination
+                ? "pagination-container w-full ".concat(borderColor, " ").concat(isFixed ? "fixed bottom-0 left-0 z-10" : "sticky top-0 left-0")
+                : "") },
             renderPageResult(),
             renderPagination())),
         renderFloatingActionBar()));