blixify-ui-web 1.2.60 → 1.2.64

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

@@ -89,6 +89,7 @@ var solid_3 = require("@heroicons/react/20/solid");
 var outline_1 = require("@heroicons/react/24/outline");
 var react_1 = require("@headlessui/react");
 var axios_1 = __importDefault(require("axios"));
+var newPagination_1 = require("../newPagination");
 var react_2 = __importStar(require("react"));
 var collapse_1 = require("../../advanced/collapse");
 var popUp_1 = require("../../advanced/popUp");
@@ -102,6 +103,7 @@ var iconButton_1 = require("../../action/iconButton");
 var link_1 = require("../../structure/link");
 var button_1 = require("../../action/button");
 var modal_1 = require("../modal");
+var scrollShadow_1 = require("../scrollShadow");
 // 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) {
@@ -157,11 +159,56 @@ var handleCheckModalEditEmpty = function (value) {
     }
     return false;
 };
+// INFO: literal class maps so Tailwind emits them. Keys match the Tag palette
+// (tag/utils.ts) so a column's listSelectionColour drives both the chip in the
+// read view and the solid fill in the table. Yellow gets dark text — white on
+// yellow-500 fails contrast.
+var FILL_CLASS = {
+    default: "bg-primary-500 text-white",
+    red: "bg-red-500 text-white",
+    blue: "bg-blue-500 text-white",
+    green: "bg-green-500 text-white",
+    yellow: "bg-yellow-400 text-yellow-950",
+    indigo: "bg-indigo-500 text-white",
+    dark: "bg-gray-800 text-white",
+};
+// INFO: group band (tinted) and the accent bar its member rows carry
+var BAND_CLASS = {
+    default: "bg-primary-50 text-primary-800 border-primary-500",
+    red: "bg-red-50 text-red-800 border-red-500",
+    blue: "bg-blue-50 text-blue-800 border-blue-500",
+    green: "bg-green-50 text-green-800 border-green-500",
+    yellow: "bg-yellow-50 text-yellow-800 border-yellow-500",
+    indigo: "bg-indigo-50 text-indigo-800 border-indigo-500",
+    dark: "bg-gray-100 text-gray-800 border-gray-700",
+    none: "bg-gray-50 text-gray-700 border-gray-300",
+};
+var ACCENT_CLASS = {
+    default: "border-primary-500",
+    red: "border-red-500",
+    blue: "border-blue-500",
+    green: "border-green-500",
+    yellow: "border-yellow-500",
+    indigo: "border-indigo-500",
+    dark: "border-gray-700",
+    none: "border-gray-300",
+};
+// INFO: the colour a list column assigns to a value, or undefined when the
+// column carries no palette — undefined means "render as before"
+var handleGetListColour = function (col, value) {
+    var column = col;
+    if (!Array.isArray(column.listSelection) ||
+        !Array.isArray(column.listSelectionColour))
+        return undefined;
+    var index = column.listSelection.indexOf(value);
+    if (index < 0)
+        return undefined;
+    return column.listSelectionColour[index] || undefined;
+};
 var NewTable = function (props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
     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.
@@ -207,30 +254,40 @@ var NewTable = function (props) {
         flatColumns.length = 0;
         flatColumns.push.apply(flatColumns, __spreadArray(__spreadArray(__spreadArray([], leftCols, false), middleCols, false), rightCols, false));
     }
-    var _v = (0, react_2.useState)(props.fixedPagination ? true : false), isFixed = _v[0], setIsFixed = _v[1];
+    var _w = (0, react_2.useState)(props.fixedPagination ? true : false), isFixed = _w[0], setIsFixed = _w[1];
     //=====================================================================================
     // SECTION: Advanced Settings
     //=====================================================================================
-    var _w = (0, react_2.useState)(""), filterModal = _w[0], setFilterModal = _w[1];
-    var _x = (0, react_2.useState)(""), addColumnModal = _x[0], setAddColumnModal = _x[1];
+    var _x = (0, react_2.useState)(""), filterModal = _x[0], setFilterModal = _x[1];
+    var _y = (0, react_2.useState)(""), addColumnModal = _y[0], setAddColumnModal = _y[1];
     //=====================================================================================
     // SECTION: Editable & Addable cells
     //=====================================================================================
-    var _y = (0, react_2.useState)(""), editDataRowId = _y[0], setEditDataRowId = _y[1];
-    var _z = (0, react_2.useState)(""), editDataHeaderKey = _z[0], setEditDataHeaderKey = _z[1];
-    var _0 = (0, react_2.useState)(false), modalEditVisible = _0[0], setModalEditVisible = _0[1];
-    var _1 = (0, react_2.useState)({}), editDataValue = _1[0], setEditDataValue = _1[1];
-    var _2 = (0, react_2.useState)(false), editDataIsLoading = _2[0], setEditDataIsLoading = _2[1];
-    var _3 = (0, react_2.useState)(false), addData = _3[0], setAddData = _3[1];
-    var _4 = (0, react_2.useState)({}), addDataValue = _4[0], setAddDataValue = _4[1];
-    var _5 = (0, react_2.useState)({}), referencesOptions = _5[0], setReferencesOptions = _5[1];
+    var _z = (0, react_2.useState)(""), editDataRowId = _z[0], setEditDataRowId = _z[1];
+    var _0 = (0, react_2.useState)(""), editDataHeaderKey = _0[0], setEditDataHeaderKey = _0[1];
+    var _1 = (0, react_2.useState)(false), modalEditVisible = _1[0], setModalEditVisible = _1[1];
+    var _2 = (0, react_2.useState)([]), collapsedGroupIds = _2[0], setCollapsedGroupIds = _2[1];
+    // INFO: sheet-style row selection — Shift-click extends from the last
+    // clicked row, a mouse-down-and-drag down the checkbox column paints a
+    // range. The drag applies the start row itself, so the click that lands on
+    // mouse-up must be swallowed or it would toggle that row straight back.
+    var lastSelectedRowRef = (0, react_2.useRef)(null);
+    var dragSelectRef = (0, react_2.useRef)(null);
+    var suppressNextClickRef = (0, react_2.useRef)(false);
+    var _3 = (0, react_2.useState)(false), isDragSelecting = _3[0], setIsDragSelecting = _3[1];
+    var _4 = (0, react_2.useState)(0), copiedCount = _4[0], setCopiedCount = _4[1];
+    var _5 = (0, react_2.useState)({}), editDataValue = _5[0], setEditDataValue = _5[1];
+    var _6 = (0, react_2.useState)(false), editDataIsLoading = _6[0], setEditDataIsLoading = _6[1];
+    var _7 = (0, react_2.useState)(false), addData = _7[0], setAddData = _7[1];
+    var _8 = (0, react_2.useState)({}), addDataValue = _8[0], setAddDataValue = _8[1];
+    var _9 = (0, react_2.useState)({}), referencesOptions = _9[0], setReferencesOptions = _9[1];
     // INFO: seeded options sit under the local map so a cell's own search
     // results still win per key
     var mergedReferencesOptions = __assign(__assign({}, ((_g = props.referencesOptions) !== null && _g !== void 0 ? _g : {})), referencesOptions);
-    var _6 = (0, react_2.useState)({}), referencesDetails = _6[0], setReferencesDetails = _6[1];
-    var _7 = (0, react_2.useState)(false), referenceLoading = _7[0], setReferenceLoading = _7[1];
+    var _10 = (0, react_2.useState)({}), referencesDetails = _10[0], setReferencesDetails = _10[1];
+    var _11 = (0, react_2.useState)(false), referenceLoading = _11[0], setReferenceLoading = _11[1];
     // INFO: measured pixel widths for pinned columns without an explicit width.
-    var _8 = (0, react_2.useState)({}), measuredPinWidths = _8[0], setMeasuredPinWidths = _8[1];
+    var _12 = (0, react_2.useState)({}), measuredPinWidths = _12[0], setMeasuredPinWidths = _12[1];
     var editDataValueRef = (0, react_2.useRef)({});
     var editDataRowIdRef = (0, react_2.useRef)("");
     var editDataInputRefs = (0, react_2.useRef)([]);
@@ -250,7 +307,7 @@ var NewTable = function (props) {
         : "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 selectedRowBg = props.darkMode ? "bg-gray-700" : "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";
@@ -258,6 +315,10 @@ var NewTable = function (props) {
         ? "text-primary-300 font-medium"
         : "text-primary-600 font-medium";
     var cellPadding = "px-4 py-2";
+    // INFO: an inline input carries its own vertical padding, so the cell around
+    // it keeps only enough to clear the hover border — this is what holds an
+    // editable row to roughly the height of a read-only one
+    var editCellPadding = "px-4 py-0.5";
     var tableHeaderBgColor = props.tableHeaderBgColor
         ? props.tableHeaderBgColor
         : props.darkMode
@@ -360,10 +421,13 @@ var NewTable = function (props) {
             return false;
         return filtered.every(function (col) { return !col.type || utils_1.supportedTableAddList.includes(col.type); });
     };
+    // INFO: a list column with a palette edits through the ordinary Select, whose
+    // options render as the same coloured tags — one dropdown for every cell
+    var handleColumnShowsTags = function (col) { var _a; return ((_a = col.type) !== null && _a !== void 0 ? _a : "string") === "list" && !!col.listSelectionColour; };
     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" }));
+            return (__assign(__assign({}, col), { id: col.key, name: col.title, type: (_a = col.type) !== null && _a !== void 0 ? _a : "string", showTagSelections: handleColumnShowsTags(col) }));
         });
     };
     var handleCreateFormInputRefs = function (type) {
@@ -610,9 +674,134 @@ var NewTable = function (props) {
     var handleFilterModal = function (id) {
         setFilterModal(id);
     };
+    var handleSelectRange = function (fromIndex, toIndex, mode, base) {
+        if (!props.handleSelectedIds)
+            return;
+        var _a = fromIndex <= toIndex ? [fromIndex, toIndex] : [toIndex, fromIndex], low = _a[0], high = _a[1];
+        var rangeIds = props.data
+            .slice(low, high + 1)
+            .map(function (eachRow) { return eachRow.id; });
+        if (mode === "remove") {
+            props.handleSelectedIds(base.filter(function (eachId) { return !rangeIds.includes(eachId); }));
+            return;
+        }
+        var next = __spreadArray([], base, true);
+        rangeIds.forEach(function (eachId) {
+            if (next.includes(eachId))
+                return;
+            if (props.maxSelectedCount && next.length >= props.maxSelectedCount)
+                return;
+            next.push(eachId);
+        });
+        props.handleSelectedIds(next);
+    };
+    var handleDragSelectStart = function (rowId, e) {
+        var _a;
+        if (props.singleSelect ||
+            props.selectAll ||
+            !props.handleSelectedIds ||
+            e.button !== 0 ||
+            e.shiftKey)
+            return;
+        // INFO: stop the browser from starting a text selection as the pointer
+        // sweeps down the column
+        e.preventDefault();
+        var startIndex = props.data.findIndex(function (eachRow) { return eachRow.id === rowId; });
+        if (startIndex < 0)
+            return;
+        var base = (_a = props.selectedIds) !== null && _a !== void 0 ? _a : [];
+        var mode = base.includes(rowId) ? "remove" : "add";
+        dragSelectRef.current = { startIndex: startIndex, mode: mode, base: base };
+        suppressNextClickRef.current = true;
+        lastSelectedRowRef.current = rowId;
+        setIsDragSelecting(true);
+        handleSelectRange(startIndex, startIndex, mode, base);
+    };
+    var handleDragSelectOver = function (rowId) {
+        var drag = dragSelectRef.current;
+        if (!drag)
+            return;
+        var overIndex = props.data.findIndex(function (eachRow) { return eachRow.id === rowId; });
+        if (overIndex < 0)
+            return;
+        handleSelectRange(drag.startIndex, overIndex, drag.mode, drag.base);
+    };
+    (0, react_2.useEffect)(function () {
+        if (!isDragSelecting)
+            return;
+        var handleEnd = function () {
+            dragSelectRef.current = null;
+            setIsDragSelecting(false);
+        };
+        document.addEventListener("mouseup", handleEnd);
+        return function () { return document.removeEventListener("mouseup", handleEnd); };
+    }, [isDragSelecting]);
+    // INFO: Esc drops the whole selection, the way it drops a range in a sheet.
+    // When the colour palette is open Esc closes that instead (its own handler).
+    (0, react_2.useEffect)(function () {
+        var _a, _b;
+        var hasSelection = props.selectAll || ((_b = (_a = props.selectedIds) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0;
+        if (!hasSelection)
+            return;
+        var handleKey = function (e) {
+            var _a, _b;
+            if (e.key !== "Escape")
+                return;
+            (_a = props.handleSelectAll) === null || _a === void 0 ? void 0 : _a.call(props, false);
+            (_b = props.handleSelectedIds) === null || _b === void 0 ? void 0 : _b.call(props, []);
+            lastSelectedRowRef.current = null;
+        };
+        document.addEventListener("keydown", handleKey);
+        return function () { return document.removeEventListener("keydown", handleKey); };
+    }, [props.selectAll, props.selectedIds]);
+    // INFO: visible columns of the selected rows as TSV — header row first —
+    // so a paste into Excel or Sheets lands one value per cell
+    var handleCopySelection = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var columns, rowIndexes, lines, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    columns = flatColumns.filter(function (eachCol) { return !(eachCol.key === "update" && !eachCol.type); });
+                    rowIndexes = props.data
+                        .map(function (_eachRow, index) { return index; })
+                        .filter(function (index) {
+                        var _a;
+                        return props.selectAll ||
+                            ((_a = props.selectedIds) !== null && _a !== void 0 ? _a : []).includes(props.data[index].id);
+                    });
+                    lines = __spreadArray([
+                        columns.map(function (eachCol) { var _a; return (_a = eachCol.title) !== null && _a !== void 0 ? _a : eachCol.key; }).join("\t")
+                    ], rowIndexes.map(function (index) {
+                        return columns
+                            .map(function (eachCol) {
+                            var _a;
+                            return resolveValueToString(eachCol.key, (_a = props.spaceData) === null || _a === void 0 ? void 0 : _a[index], props.data[index]).replace(/[\t\n\r]+/g, " ");
+                        })
+                            .join("\t");
+                    }), true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.clipboard.writeText(lines.join("\n"))];
+                case 2:
+                    _a.sent();
+                    setCopiedCount(rowIndexes.length);
+                    setTimeout(function () { return setCopiedCount(0); }, 1500);
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_1 = _a.sent();
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
     var handleSelectRow = function (rowId, e) {
         var _a, _b;
         e.stopPropagation();
+        if (suppressNextClickRef.current) {
+            suppressNextClickRef.current = false;
+            return;
+        }
         // INFO: deactivate "select all pages" mode before doing individual row toggle
         if (props.selectAll) {
             (_a = props.handleSelectAll) === null || _a === void 0 ? void 0 : _a.call(props, false);
@@ -625,6 +814,15 @@ var NewTable = function (props) {
         }
         else {
             var current = (_b = props.selectedIds) !== null && _b !== void 0 ? _b : [];
+            if (e.shiftKey && lastSelectedRowRef.current) {
+                var fromIndex = props.data.findIndex(function (eachRow) { return eachRow.id === lastSelectedRowRef.current; });
+                var toIndex = props.data.findIndex(function (eachRow) { return eachRow.id === rowId; });
+                if (fromIndex >= 0 && toIndex >= 0) {
+                    handleSelectRange(fromIndex, toIndex, "add", current);
+                    return;
+                }
+            }
+            lastSelectedRowRef.current = rowId;
             var idx = current.indexOf(rowId);
             // INFO: allow deselect, block new selection when maxSelectedCount is reached
             if (idx < 0 &&
@@ -829,11 +1027,11 @@ var NewTable = function (props) {
     };
     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 tempDS = __assign(__assign({}, col), { id: col.key, name: col.title, type: (_a = col.type) !== null && _a !== void 0 ? _a : "string", showTagSelections: handleColumnShowsTags(col) });
         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(cellPadding, " ").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 },
+            className: "".concat(editCellPadding, " ").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 p-[1px]", onClick: function (e) {
                     e.stopPropagation();
                     handleEditDataOnClick(rowId, col.key, rowData);
@@ -925,7 +1123,7 @@ var NewTable = function (props) {
             return react_2.default.createElement(react_2.default.Fragment, null);
         return (react_2.default.createElement("div", { className: "flex items-center" },
             renderCheckbox(renderCheckAllSelected() || ((_b = props.selectAll) !== null && _b !== void 0 ? _b : false), function () { return handleSelectCurrentPage(renderCheckAllSelected()); }, undefined, "mr-1"),
-            !props.disableSelectFullData && (react_2.default.createElement(popUp_1.PopUp, { anchor: "left", lib: { Transition: react_1.Transition }, ctaComp: react_2.default.createElement(solid_1.ChevronDownIcon, { className: "h-4 w-4 ".concat(cellFontColor, " cursor-pointer"), "aria-hidden": "true" }), renderComp: react_2.default.createElement("div", { className: "border rounded ".concat(borderColor, " ").concat(props.darkMode ? "bg-gray-800" : "bg-white") },
+            !props.disableSelectFullData && (react_2.default.createElement(popUp_1.PopUp, { anchor: "left", darkMode: props.darkMode, darkModeBg: props.darkModeBg, lib: { Transition: react_1.Transition }, ctaComp: react_2.default.createElement(solid_1.ChevronDownIcon, { className: "h-4 w-4 ".concat(cellFontColor, " cursor-pointer"), "aria-hidden": "true" }), renderComp: react_2.default.createElement("div", { className: "border rounded ".concat(borderColor, " ").concat(props.darkMode ? "bg-gray-800" : "bg-white") },
                     react_2.default.createElement("p", { className: "px-4 py-3 text-xs ".concat(cellFontColor, " text-left whitespace-nowrap font-medium hover:cursor-pointer ").concat(props.darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"), onClick: function () { return handleSelectAllPages(true); } }, "Select all pages"),
                     react_2.default.createElement("p", { className: "px-4 py-3 text-xs ".concat(cellFontColor, " text-left whitespace-nowrap font-medium hover:cursor-pointer ").concat(props.darkMode ? "hover:bg-gray-700" : "hover:bg-gray-100"), onClick: function () { return handleSelectAllPages(false); } }, "Unselect all pages")) }))));
     };
@@ -948,12 +1146,147 @@ var NewTable = function (props) {
     // INFO: true when maxSelectedCount is set and the current selection has reached the limit
     var isMaxReached = !!props.maxSelectedCount &&
         ((_j = (_h = props.selectedIds) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0) >= props.maxSelectedCount;
+    // INFO: one desktop row. groupAccent carries the group's colour so member
+    // rows show the band's colour as a bar down their left edge.
+    var renderDesktopRow = function (row, index, groupAccent) {
+        var _a, _b, _c, _d, _e;
+        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(isSelected ? "" : rowHoverBg)
+                    : editDataIsLoading && editDataRowId === row.id
+                        ? "animate-pulse"
+                        : "", " ").concat(groupAccent
+                ? "border-l-4 ".concat((_e = ACCENT_CLASS[groupAccent]) !== null && _e !== void 0 ? _e : ACCENT_CLASS.default)
+                : "") },
+            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,
+                        width: CHECKBOX_WIDTH,
+                        minWidth: CHECKBOX_WIDTH,
+                    }
+                    : undefined, onClick: function (e) { return handleSelectRow(row.id, e); }, onMouseDown: function (e) { return handleDragSelectStart(row.id, e); }, onMouseEnter: function () { return handleDragSelectOver(row.id); } }, renderCheckbox(isSelected, function () { }, undefined, isMaxReached && !isSelected
+                ? "opacity-50 cursor-not-allowed"
+                : ""))),
+            flatColumns.map(function (col, colIndex) {
+                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+                var cellValue = spaceRow
+                    ? spaceRow[col.key]
+                    : resolveValue(row, col.key);
+                // INFO: first col with type "string" is never made editable
+                var resolvedColType = (_a = col.type) !== null && _a !== void 0 ? _a : "string";
+                var isActionColumn = col.key === "update" && !col.type;
+                var isModalEdit = ((_b = props.editable) === null || _b === void 0 ? void 0 : _b.active) &&
+                    !isActionColumn &&
+                    utils_1.supportedModalEditList.includes(resolvedColType);
+                var isObjectEdit = ((_c = props.editable) === null || _c === void 0 ? void 0 : _c.active) &&
+                    !isActionColumn &&
+                    resolvedColType === "object" &&
+                    !!props.onObjectEdit;
+                var isEditable = ((_d = props.editable) === null || _d === void 0 ? void 0 : _d.active) &&
+                    !isActionColumn &&
+                    !(((_f = (_e = props.selectedIds) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) > 0 || props.selectAll) &&
+                    utils_1.supportedInlineEditList.includes(resolvedColType);
+                var rowData = editDataRowId === row.id ? editDataValue : row;
+                // INFO: a list column with a palette paints the whole cell —
+                // a status column then reads like a heat map instead of a
+                // row of chips. Editable tables open the palette on click.
+                var rawListValue = resolveValue(row, col.key);
+                var fillColour = resolvedColType === "list" && !isActionColumn
+                    ? handleGetListColour(col, rawListValue)
+                    : undefined;
+                // INFO: an editable table renders the coloured cell as its Select in
+                // every row (filled while closed) so the control never swaps in and
+                // out; the plain block is for read-only tables
+                if (fillColour && !((_g = props.editable) === null || _g === void 0 ? void 0 : _g.active)) {
+                    return (react_2.default.createElement("td", { key: col.key, className: "p-0 align-middle ".concat((_j = (_h = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _h === void 0 ? void 0 : _h.className) !== null && _j !== void 0 ? _j : ""), style: (_k = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _k === void 0 ? void 0 : _k.style },
+                        react_2.default.createElement("div", { "data-testid": "table-fill-".concat(col.key), "data-colour": fillColour, className: "flex h-full min-h-[40px] items-center justify-center px-3 text-sm font-medium ".concat((_l = FILL_CLASS[fillColour]) !== null && _l !== void 0 ? _l : FILL_CLASS.default) }, String(rawListValue))));
+                }
+                if (isObjectEdit) {
+                    return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
+                        react_2.default.createElement("div", { className: "cursor-pointer group/modaledit flex items-center gap-x-2 min-h-6", "data-testid": "table-object-edit-".concat(col.key), onClick: function (e) {
+                                var _a;
+                                e.stopPropagation();
+                                (_a = props.onObjectEdit) === null || _a === void 0 ? void 0 : _a.call(props, row.id, col.key, row);
+                            } },
+                            handleCheckModalEditEmpty(cellValue) ? (react_2.default.createElement("span", { className: "text-gray-400 italic" }, "Add")) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord)),
+                            react_2.default.createElement(outline_1.PencilIcon, { className: "w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/modaledit:opacity-100 flex-shrink-0" }))));
+                }
+                if (isModalEdit) {
+                    return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
+                        react_2.default.createElement("div", { className: "cursor-pointer group/modaledit flex items-center gap-x-2 min-h-6", "data-testid": "table-modal-edit-".concat(col.key), onClick: function (e) {
+                                e.stopPropagation();
+                                handleModalEditOnClick(row.id, col.key, row);
+                            } },
+                            handleCheckModalEditEmpty(cellValue) ? (react_2.default.createElement("span", { className: "text-gray-400 italic" }, "Add")) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord)),
+                            react_2.default.createElement(outline_1.PencilIcon, { className: "w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/modaledit:opacity-100 flex-shrink-0" }))));
+                }
+                if (isEditable) {
+                    var bareOverride = (_o = (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListDescription) === null || _o === void 0 ? void 0 : _o.call(_m, 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, "data-pin-key": leftPinned.includes(col.key) || rightPinned.includes(col.key)
+                        ? col.key
+                        : undefined, 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((_q = (_p = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _p === void 0 ? void 0 : _p.className) !== null && _q !== void 0 ? _q : ""), style: (_r = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _r === void 0 ? void 0 : _r.style }, props.newTabUrl && props.onClickRow ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl + row.id + ((_s = props.addNewTabUrl) !== null && _s !== void 0 ? _s : ""), 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)));
+    };
+    // INFO: with groups, each group is a tinted band row (chevron, title, count)
+    // followed by its member rows; collapsing a band hides them. Without groups,
+    // the plain row list.
+    var renderDesktopRows = function () {
+        if (!props.groups || props.groups.length === 0) {
+            return props.data.map(function (row, index) { return renderDesktopRow(row, index); });
+        }
+        var indexById = new Map(props.data.map(function (row, index) { return [row.id, index]; }));
+        var columnCount = flatColumns.length + (props.checkbox ? 1 : 0) + 1;
+        return props.groups.map(function (group) {
+            var _a, _b;
+            var colourKey = (_a = group.colour) !== null && _a !== void 0 ? _a : "none";
+            var isCollapsed = collapsedGroupIds.includes(group.id);
+            var memberIndexes = group.rowIds
+                .map(function (rowId) { return indexById.get(rowId); })
+                .filter(function (rowIndex) { return rowIndex !== undefined; });
+            return (react_2.default.createElement(react_2.default.Fragment, { key: "group-".concat(group.id) },
+                react_2.default.createElement("tr", { "data-testid": "table-group-".concat(group.id), "data-collapsed": isCollapsed ? "true" : "false", className: "border-l-4 ".concat((_b = BAND_CLASS[colourKey]) !== null && _b !== void 0 ? _b : BAND_CLASS.none) },
+                    react_2.default.createElement("td", { colSpan: columnCount, className: "px-3 py-2" },
+                        react_2.default.createElement("button", { type: "button", className: "flex w-full items-center gap-x-2 text-left text-xs font-semibold uppercase tracking-wide", onClick: function (e) {
+                                e.stopPropagation();
+                                setCollapsedGroupIds(function (previous) {
+                                    return previous.includes(group.id)
+                                        ? previous.filter(function (eachId) { return eachId !== group.id; })
+                                        : __spreadArray(__spreadArray([], previous, true), [group.id], false);
+                                });
+                            } },
+                            isCollapsed ? (react_2.default.createElement(solid_1.ChevronRightIcon, { className: "h-4 w-4" })) : (react_2.default.createElement(solid_1.ChevronDownIcon, { className: "h-4 w-4" })),
+                            react_2.default.createElement("span", null, group.title),
+                            react_2.default.createElement("span", { className: "rounded-full bg-white/70 px-2 py-0.5 text-[11px] font-medium normal-case tracking-normal" }, memberIndexes.length)))),
+                !isCollapsed &&
+                    memberIndexes.map(function (rowIndex) {
+                        return renderDesktopRow(props.data[rowIndex], rowIndex, colourKey);
+                    })));
+        });
+    };
     var renderFloatingActionBar = function () {
         var _a, _b, _c, _d, _e;
-        if (!((_a = props.multiActionFloatingBtns) === null || _a === void 0 ? void 0 : _a.length))
-            return null;
-        var visibleBtns = props.multiActionFloatingBtns.filter(function (btn) { return !btn.hide; });
-        if (visibleBtns.length === 0)
+        var visibleBtns = ((_a = props.multiActionFloatingBtns) !== null && _a !== void 0 ? _a : []).filter(function (btn) { return !btn.hide; });
+        var canCopy = props.enableCopy !== false;
+        if (visibleBtns.length === 0 && !canCopy)
             return null;
         var hasSelection = props.selectAll || ((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0;
         if (!hasSelection)
@@ -972,11 +1305,12 @@ var NewTable = function (props) {
         var renderCloseBtn = function () { return (react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_1.XMarkIcon, { className: "w-4 h-4" }), className: "!p-1 shrink-0 ".concat(props.darkMode
                 ? "hover:bg-gray-700 text-gray-400 hover:text-gray-200"
                 : "hover:bg-gray-100 text-gray-400 hover:text-gray-600"), onClick: function () { return handleSelectAllPages(false); } })); };
-        var renderActionBtns = function () {
-            return 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 actionBtnClassName = "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");
+        var renderActionBtns = function () { return (react_2.default.createElement(react_2.default.Fragment, null,
+            visibleBtns.map(function (btn) { return (react_2.default.createElement(textButton_1.TextButton, { key: btn.id, text: btn.btnText, className: actionBtnClassName, onClick: function () { return btn.onClick(btn.id); } })); }),
+            canCopy && (react_2.default.createElement(textButton_1.TextButton, { key: "copy", id: "dtw-copy-selection", text: copiedCount > 0 ? "Copied ".concat(copiedCount) : "Copy", className: actionBtnClassName, onClick: function () {
+                    handleCopySelection();
+                } })))); };
         var pillBase = "shadow-xl ".concat(borderRadius, " ").concat(bgColor, " border-2 ").concat(props.darkMode ? "border-primary-300" : "border-primary-500");
         return (react_2.default.createElement("div", { className: "fixed ".concat(props.multiActionFloatingOffset || "bottom-10", " inset-x-4 z-10 flex justify-center pointer-events-none") },
             react_2.default.createElement("div", { className: "sm:hidden flex flex-col w-full px-4 py-2.5 pointer-events-auto ".concat(pillBase) },
@@ -1100,73 +1434,6 @@ var NewTable = function (props) {
                 });
             }))));
     };
-    var renderPageNumber = function (type) {
-        var _a, _b, _c, _d;
-        var pageNumberList = [];
-        var selectedBorderColor = props.darkMode
-            ? "border-primary-200"
-            : "border-primary-500";
-        var selectedFontColor = props.darkMode
-            ? "text-primary-200"
-            : "text-primary-500";
-        var basePageNumberClassname = "px-3 flex items-center h-full w-full text-sm font-medium cursor-pointer ";
-        if (type === "page") {
-            var pageOffset = Math.floor(((_a = props.pageIndex) !== null && _a !== void 0 ? _a : 0) / defaultPageSize);
-            var _loop_1 = function (i) {
-                var pageNumberClassName = basePageNumberClassname +
-                    (props.pageIndex === i
-                        ? "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); }
-                        : function () { } }, i + 1));
-            };
-            for (var i = pageOffset * defaultPageSize; i * ((_b = props.limit) !== null && _b !== void 0 ? _b : defaultLimit) < ((_c = props.size) !== null && _c !== void 0 ? _c : props.data.length) &&
-                i < pageOffset * defaultPageSize + defaultPageSize; i++) {
-                _loop_1(i);
-            }
-        }
-        else if (type === "cursor") {
-            pageNumberList.push(react_2.default.createElement("div", { "aria-current": "page", className: "".concat(basePageNumberClassname, " ").concat(selectedBorderColor, " ").concat(selectedFontColor) }, ((_d = props.pageIndex) !== null && _d !== void 0 ? _d : 0) + 1));
-        }
-        return pageNumberList;
-    };
-    var renderPagination = function () {
-        var _a, _b, _c;
-        var nextDataAvailable = ((_a = props.size) !== null && _a !== void 0 ? _a : 0) >
-            (((_b = props.pageIndex) !== null && _b !== void 0 ? _b : 0) + 1) * ((_c = props.limit) !== null && _c !== void 0 ? _c : defaultLimit) ||
-            props.cursor;
-        switch (props.paginationType) {
-            case "cursor":
-                return (react_2.default.createElement("div", { className: "h-8 flex items-center justify-center gap-x-0.5", "aria-label": "Pagination" },
-                    react_2.default.createElement("button", { type: "button", disabled: props.pageIndex === 0 ? true : false, className: "p-2 ".concat(cellFontColor, " ").concat(props.pageIndex === 0 ? "cursor-not-allowed" : ""), onClick: function () { var _a; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, "prev"); } },
-                        react_2.default.createElement(solid_1.ChevronLeftIcon, { className: "h-4 w-4", "aria-hidden": "true" })),
-                    renderPageNumber("cursor"),
-                    react_2.default.createElement("button", { type: "button", disabled: nextDataAvailable ? false : true, className: "p-2 ".concat(cellFontColor, " ").concat(nextDataAvailable ? "" : "cursor-not-allowed"), onClick: function () { var _a; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, "next"); } },
-                        react_2.default.createElement(solid_1.ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": "true" }))));
-            case "page":
-                var disablePrev = props.pageIndex === 0 ? true : false;
-                return (react_2.default.createElement("div", { className: "h-8 flex items-center justify-center gap-x-0.5", "aria-label": "Pagination" },
-                    react_2.default.createElement("button", { type: "button", disabled: disablePrev, className: "p-2 ".concat(cellFontColor, " ").concat(disablePrev ? "cursor-not-allowed" : ""), onClick: function () { var _a, _b; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, ((_b = props.pageIndex) !== null && _b !== void 0 ? _b : 0) - 1); } },
-                        react_2.default.createElement(solid_1.ChevronLeftIcon, { className: "h-4 w-4", "aria-hidden": "true" })),
-                    renderPageNumber("page"),
-                    react_2.default.createElement("button", { type: "button", disabled: nextDataAvailable ? false : true, className: "p-2 ".concat(cellFontColor, " ").concat(nextDataAvailable ? "" : "cursor-not-allowed"), onClick: function () { var _a, _b; return (_a = props.handleUpdatePageIndex) === null || _a === void 0 ? void 0 : _a.call(props, ((_b = props.pageIndex) !== null && _b !== void 0 ? _b : 0) + 1); } },
-                        react_2.default.createElement(solid_1.ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": "true" }))));
-            default:
-                return react_2.default.createElement(react_2.default.Fragment, null);
-        }
-    };
-    var renderPageResult = function () {
-        var _a, _b;
-        var text = "";
-        if (props.paginationType === "page") {
-            text = "Showing ".concat((_a = props.customPaginationSize) !== null && _a !== void 0 ? _a : props.size, " result(s)");
-        }
-        else {
-            text = "Showing ".concat((_b = props.customPaginationSize) !== null && _b !== void 0 ? _b : props.data.length, " result(s)");
-        }
-        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(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) {
@@ -1175,7 +1442,9 @@ var NewTable = function (props) {
         var titleCol_1 = (_k = flatColumns.find(function (c) { return !isIdLike_1(c); })) !== null && _k !== void 0 ? _k : 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 headerBgColor_1 = props.darkMode
+            ? ((_l = props.darkModeBg) !== null && _l !== void 0 ? _l : "bg-gray-900")
+            : "";
         var headerFontColor_1 = props.darkMode ? "text-white" : "";
         // INFO: renders tag + trailing text adjacent to the Collapse title
         var renderMobileTitleAdjacent_1 = function (row, spaceRow) {
@@ -1244,14 +1513,14 @@ var NewTable = function (props) {
                 })))));
         };
         return (react_2.default.createElement("div", null,
-            react_2.default.createElement("div", { className: "w-full ".concat(((_l = props.mobileTooltip) === null || _l === void 0 ? void 0 : _l.tooltip) ? "overflow-visible" : "overflow-hidden", " border ").concat(borderRadius, " ").concat(borderColor, " ").concat(bgColor, " shadow-sm divide-y ").concat(dividerColor, " ").concat((_m = props.className) !== null && _m !== void 0 ? _m : "") },
+            react_2.default.createElement("div", { className: "w-full ".concat(((_m = props.mobileTooltip) === null || _m === void 0 ? void 0 : _m.tooltip) ? "overflow-visible" : "overflow-hidden", " border ").concat(borderRadius, " ").concat(borderColor, " ").concat(bgColor, " shadow-sm divide-y ").concat(dividerColor, " ").concat((_o = props.className) !== null && _o !== void 0 ? _o : "") },
                 react_2.default.createElement("div", { className: "p-3 flex justify-between" },
                     renderSelectAll(),
                     renderSelectedCount()),
                 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) }, (_o = props.emptyTitle) !== null && _o !== void 0 ? _o : "No items")),
+                !props.loading && props.data.length === 0 && (react_2.default.createElement("p", { className: "p-4 text-center text-sm ".concat(cellFontColor) }, (_p = props.emptyTitle) !== null && _p !== void 0 ? _p : "No items")),
                 !props.loading &&
                     props.data.map(function (row, index) {
                         var _a, _b, _c, _d, _e, _f, _g;
@@ -1297,22 +1566,18 @@ var NewTable = function (props) {
                             ((_g = props.mobileTooltip) === null || _g === void 0 ? void 0 : _g.tooltip) &&
                                 renderMobileTooltipContent_1(row, spaceRow) && (react_2.default.createElement("div", { className: "absolute left-1/2 -translate-x-1/2 top-full mt-1 z-50 hidden group-hover/tooltip:block" }, renderMobileTooltipContent_1(row, spaceRow)))));
                     })),
-            !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())),
+            react_2.default.createElement(newPagination_1.NewPagination, { paginationType: props.paginationType, pageIndex: props.pageIndex, limit: props.limit, size: props.size, cursor: props.cursor, resultCount: props.data.length, customPaginationSize: props.customPaginationSize, hidePagination: props.hidePagination, darkMode: props.darkMode, darkModeBg: props.darkModeBg, handleUpdatePageIndex: props.handleUpdatePageIndex, className: "".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")
+                    : "") }),
             renderFloatingActionBar()));
     }
-    return (react_2.default.createElement("div", { className: "w-full ".concat((_p = props.className) !== null && _p !== void 0 ? _p : "") },
+    return (react_2.default.createElement("div", { className: "w-full ".concat((_q = props.className) !== null && _q !== void 0 ? _q : "") },
         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: modalEditVisible, title: (_r = (_q = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; })) === null || _q === void 0 ? void 0 : _q.title) !== null && _r !== void 0 ? _r : "Edit", onClose: handleModalEditClose, renderContent: function () {
+        react_2.default.createElement(modal_1.Modal, { open: modalEditVisible, title: (_s = (_r = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; })) === null || _r === void 0 ? void 0 : _r.title) !== null && _s !== void 0 ? _s : "Edit", onClose: handleModalEditClose, renderContent: function () {
                 var _a, _b, _c, _d;
                 var selectedCol = flatColumns.find(function (eachCol) { return eachCol.key === editDataHeaderKey; });
                 if (!selectedCol)
@@ -1352,14 +1617,14 @@ var NewTable = function (props) {
                 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 || ((_t = (_s = props.selectedIds) === null || _s === void 0 ? void 0 : _s.length) !== null && _t !== void 0 ? _t : 0) > 0) &&
+        react_2.default.createElement(scrollShadow_1.ScrollShadow, { className: "w-full overflow-x-auto ".concat(borderRadius, " border ").concat(borderColor, " ").concat(bgColor, " shadow-sm"), shadowFrom: props.darkMode ? "from-gray-900" : "from-white" },
+            (props.selectAll || ((_u = (_t = props.selectedIds) === null || _t === void 0 ? void 0 : _t.length) !== null && _u !== void 0 ? _u : 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", ref: tableRef },
+            react_2.default.createElement("table", { className: "w-full ".concat(isDragSelecting ? "select-none" : ""), ref: tableRef },
                 renderTableHeader(),
                 react_2.default.createElement("tbody", { className: "divide-y ".concat(dividerColor) },
                     props.loading &&
@@ -1367,101 +1632,13 @@ var NewTable = function (props) {
                             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,
-                                            width: CHECKBOX_WIDTH,
-                                            minWidth: CHECKBOX_WIDTH,
-                                        }
-                                        : undefined, onClick: function (e) { return handleSelectRow(row.id, e); } }, renderCheckbox(isSelected, function () { }, undefined, isMaxReached && !isSelected
-                                    ? "opacity-50 cursor-not-allowed"
-                                    : ""))),
-                                flatColumns.map(function (col, colIndex) {
-                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-                                    var cellValue = spaceRow
-                                        ? spaceRow[col.key]
-                                        : resolveValue(row, col.key);
-                                    // INFO: first col with type "string" is never made editable
-                                    var resolvedColType = (_a = col.type) !== null && _a !== void 0 ? _a : "string";
-                                    var isActionColumn = col.key === "update" && !col.type;
-                                    var isModalEdit = ((_b = props.editable) === null || _b === void 0 ? void 0 : _b.active) &&
-                                        !isActionColumn &&
-                                        utils_1.supportedModalEditList.includes(resolvedColType);
-                                    var isObjectEdit = ((_c = props.editable) === null || _c === void 0 ? void 0 : _c.active) &&
-                                        !isActionColumn &&
-                                        resolvedColType === "object" &&
-                                        !!props.onObjectEdit;
-                                    var isEditable = ((_d = props.editable) === null || _d === void 0 ? void 0 : _d.active) &&
-                                        !isActionColumn &&
-                                        !(((_f = (_e = props.selectedIds) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) > 0 ||
-                                            props.selectAll) &&
-                                        utils_1.supportedInlineEditList.includes(resolvedColType);
-                                    var rowData = editDataRowId === row.id ? editDataValue : row;
-                                    if (isObjectEdit) {
-                                        return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
-                                            react_2.default.createElement("div", { className: "cursor-pointer group/modaledit flex items-center gap-x-2 min-h-6", "data-testid": "table-object-edit-".concat(col.key), onClick: function (e) {
-                                                    var _a;
-                                                    e.stopPropagation();
-                                                    (_a = props.onObjectEdit) === null || _a === void 0 ? void 0 : _a.call(props, row.id, col.key, row);
-                                                } },
-                                                handleCheckModalEditEmpty(cellValue) ? (react_2.default.createElement("span", { className: "text-gray-400 italic" }, "Add")) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord)),
-                                                react_2.default.createElement(outline_1.PencilIcon, { className: "w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/modaledit:opacity-100 flex-shrink-0" }))));
-                                    }
-                                    if (isModalEdit) {
-                                        return (react_2.default.createElement("td", { key: col.key, className: "".concat(cellPadding, " text-sm ").concat(cellFontColor, " whitespace-nowrap") },
-                                            react_2.default.createElement("div", { className: "cursor-pointer group/modaledit flex items-center gap-x-2 min-h-6", "data-testid": "table-modal-edit-".concat(col.key), onClick: function (e) {
-                                                    e.stopPropagation();
-                                                    handleModalEditOnClick(row.id, col.key, row);
-                                                } },
-                                                handleCheckModalEditEmpty(cellValue) ? (react_2.default.createElement("span", { className: "text-gray-400 italic" }, "Add")) : ((0, readModule_1.renderEachRowDataBasedOnDataType)(col.key, cellValue, props.bareSettings, true, props.disableEllipsisOnLongWord)),
-                                                react_2.default.createElement(outline_1.PencilIcon, { className: "w-3.5 h-3.5 text-gray-400 opacity-0 group-hover/modaledit:opacity-100 flex-shrink-0" }))));
-                                    }
-                                    if (isEditable) {
-                                        var bareOverride = (_h = (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListDescription) === null || _h === void 0 ? void 0 : _h.call(_g, 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, "data-pin-key": leftPinned.includes(col.key) ||
-                                            rightPinned.includes(col.key)
-                                            ? col.key
-                                            : undefined, 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((_k = (_j = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _j === void 0 ? void 0 : _j.className) !== null && _k !== void 0 ? _k : ""), style: (_l = getPinProps(col.key, false, rowBgClass, isRowHoverable)) === null || _l === void 0 ? void 0 : _l.style }, props.newTabUrl && props.onClickRow ? (react_2.default.createElement(link_1.Link, { href: props.newTabUrl +
-                                            row.id +
-                                            ((_m = props.addNewTabUrl) !== null && _m !== void 0 ? _m : ""), 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 && renderDesktopRows(),
                     !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") }, (_u = props.emptyTitle) !== null && _u !== void 0 ? _u : "No items")),
+            !props.loading && props.data.length === 0 && (react_2.default.createElement("div", { className: "p-4 text-sm ".concat(cellFontColor, " text-center sticky left-0") }, (_v = props.emptyTitle) !== null && _v !== void 0 ? _v : "No items")),
             renderAddableSection()),
-        !props.hidePagination && props.paginationType && (react_2.default.createElement("div", { className: "mt-2 flex items-center justify-between ".concat(props.fixedPagination
+        react_2.default.createElement(newPagination_1.NewPagination, { paginationType: props.paginationType, pageIndex: props.pageIndex, limit: props.limit, size: props.size, cursor: props.cursor, resultCount: props.data.length, customPaginationSize: props.customPaginationSize, hidePagination: props.hidePagination, darkMode: props.darkMode, darkModeBg: props.darkModeBg, handleUpdatePageIndex: props.handleUpdatePageIndex, className: "".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()));
 };
 exports.NewTable = NewTable;