blixify-ui-web 1.2.162 → 1.2.165

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

@@ -102,6 +102,7 @@ var select_1 = require("../../input/select");
 var textInput_1 = require("../../input/textInput");
 var link_1 = require("../../structure/link");
 var detailList_1 = require("../detailList");
+var loading_1 = require("../loading");
 var modal_1 = require("../modal");
 var newPagination_1 = require("../newPagination");
 var scrollShadow_1 = require("../scrollShadow");
@@ -374,6 +375,14 @@ var NewTable = function (props) {
     var _16 = (0, react_2.useState)(null), hoveredCell = _16[0], setHoveredCell = _16[1];
     var _17 = (0, react_2.useState)(false), modalEditVisible = _17[0], setModalEditVisible = _17[1];
     var _18 = (0, react_2.useState)([]), collapsedGroupIds = _18[0], setCollapsedGroupIds = _18[1];
+    // INFO: per-group scroll pagination. One sentinel element per band, observed
+    // by a single IntersectionObserver that fires props.onGroupLoadMore when a
+    // band's sentinel scrolls into view. The debounce guard stops repeat fires
+    // while that group's next page is in flight.
+    var groupSentinelRefs = (0, react_2.useRef)({});
+    var groupLoadMoreDebounce = (0, react_2.useRef)({});
+    var onGroupLoadMoreRef = (0, react_2.useRef)(props.onGroupLoadMore);
+    onGroupLoadMoreRef.current = props.onGroupLoadMore;
     // 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
@@ -385,22 +394,32 @@ var NewTable = function (props) {
     var _20 = (0, react_2.useState)(0), copiedCount = _20[0], setCopiedCount = _20[1];
     var _21 = (0, react_2.useState)({}), editDataValue = _21[0], setEditDataValue = _21[1];
     var _22 = (0, react_2.useState)(false), editDataIsLoading = _22[0], setEditDataIsLoading = _22[1];
+    // INFO: true while the empty bottom row is being filled in; the row itself is
+    // always there in an addable table
     var _23 = (0, react_2.useState)(false), addData = _23[0], setAddData = _23[1];
     var _24 = (0, react_2.useState)({}), addDataValue = _24[0], setAddDataValue = _24[1];
-    var _25 = (0, react_2.useState)({}), referencesOptions = _25[0], setReferencesOptions = _25[1];
+    // INFO: bumped after each saved row, so the next one starts with fresh
+    // inputs and its first cell takes the focus
+    var _25 = (0, react_2.useState)(0), addRowKey = _25[0], setAddRowKey = _25[1];
+    var _26 = (0, react_2.useState)({}), referencesOptions = _26[0], setReferencesOptions = _26[1];
     // INFO: seeded options sit under the local map so a cell's own search
     // results still win per key
     var mergedReferencesOptions = __assign(__assign({}, ((_l = props.referencesOptions) !== null && _l !== void 0 ? _l : {})), referencesOptions);
-    var _26 = (0, react_2.useState)({}), referencesDetails = _26[0], setReferencesDetails = _26[1];
-    var _27 = (0, react_2.useState)(false), referenceLoading = _27[0], setReferenceLoading = _27[1];
+    var _27 = (0, react_2.useState)({}), referencesDetails = _27[0], setReferencesDetails = _27[1];
+    var _28 = (0, react_2.useState)(false), referenceLoading = _28[0], setReferenceLoading = _28[1];
     // INFO: measured pixel widths for pinned columns without an explicit width.
-    var _28 = (0, react_2.useState)({}), measuredPinWidths = _28[0], setMeasuredPinWidths = _28[1];
+    var _29 = (0, react_2.useState)({}), measuredPinWidths = _29[0], setMeasuredPinWidths = _29[1];
     var editDataValueRef = (0, react_2.useRef)({});
     var editDataRowIdRef = (0, react_2.useRef)("");
     var editDataHeaderKeyRef = (0, react_2.useRef)("");
     var editDataInputRefs = (0, react_2.useRef)([]);
     var addDataValueRef = (0, react_2.useRef)({});
     var addDataInputRefs = (0, react_2.useRef)([]);
+    var addRowRef = (0, react_2.useRef)(null);
+    // INFO: the column clicked to start a row, focused once its input mounts
+    var pendingAddFocusRef = (0, react_2.useRef)("");
+    // INFO: the latest save, for the document listener set up once per row
+    var commitAddRef = (0, react_2.useRef)(function () { });
     // 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)({});
@@ -473,6 +492,40 @@ var NewTable = function (props) {
             Promise.resolve(onUpdateDataRef.current(rowId, columnId, editDataValueRef.current)).catch(function () { });
         };
     }, []);
+    // INFO: the clicked cell of a new row takes the focus once its input is on
+    // screen, so typing starts where the click landed
+    (0, react_2.useEffect)(function () {
+        if (!addData || !pendingAddFocusRef.current)
+            return;
+        var colKey = pendingAddFocusRef.current;
+        pendingAddFocusRef.current = "";
+        var frameId = requestAnimationFrame(function () {
+            var _a, _b;
+            var field = (_b = (_a = addRowRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-add-cell=\"".concat(colKey, "\"]"))) === null || _b === void 0 ? void 0 : _b.querySelector("input, textarea, button");
+            field === null || field === void 0 ? void 0 : field.focus();
+        });
+        return function () { return cancelAnimationFrame(frameId); };
+    }, [addData, addRowKey]);
+    // INFO: clicking another row of the table saves the row being filled in, as
+    // moving to another row does in a spreadsheet. A click anywhere else — a
+    // dropdown's options, a date picker, the page around — leaves it open.
+    (0, react_2.useEffect)(function () {
+        if (!addData)
+            return;
+        var handlePointerDown = function (event) {
+            var _a, _b;
+            var target = event.target;
+            if (!target || ((_a = addRowRef.current) === null || _a === void 0 ? void 0 : _a.contains(target)))
+                return;
+            var body = (_b = tableRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("tbody");
+            if (body === null || body === void 0 ? void 0 : body.contains(target))
+                commitAddRef.current(false, true);
+        };
+        document.addEventListener("mousedown", handlePointerDown, true);
+        return function () {
+            return document.removeEventListener("mousedown", handlePointerDown, true);
+        };
+    }, [addData]);
     // 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 () {
@@ -511,6 +564,58 @@ var NewTable = function (props) {
         window.addEventListener("scroll", handleScroll);
         return function () { return window.removeEventListener("scroll", handleScroll); };
     }, [props.fixedPagination]);
+    // INFO: per-group scroll pagination observer. Watches every visible band
+    // sentinel and fires props.onGroupLoadMore(groupId) as it enters view, so
+    // each group loads its own next page Monday-board style. Only active in
+    // grouped scroll mode with a load-more handler wired; otherwise a no-op.
+    (0, react_2.useEffect)(function () {
+        if (props.paginationType !== "scroll")
+            return;
+        if (!props.groups || props.groups.length === 0)
+            return;
+        if (!props.onGroupLoadMore)
+            return;
+        var observer = new IntersectionObserver(function (entries) {
+            entries.forEach(function (entry) {
+                var _a;
+                var groupId = entry.target.dataset.groupSentinel;
+                if (!groupId)
+                    return;
+                if (!entry.isIntersecting)
+                    return;
+                if (groupLoadMoreDebounce.current[groupId])
+                    return;
+                groupLoadMoreDebounce.current[groupId] = true;
+                (_a = onGroupLoadMoreRef.current) === null || _a === void 0 ? void 0 : _a.call(onGroupLoadMoreRef, groupId);
+            });
+        }, { rootMargin: "200px", threshold: 0 });
+        Object.values(groupSentinelRefs.current).forEach(function (sentinel) {
+            if (sentinel)
+                observer.observe(sentinel);
+        });
+        return function () { return observer.disconnect(); };
+        /* eslint-disable */
+    }, [
+        props.paginationType,
+        props.groups,
+        props.data.length,
+        props.onGroupLoadMore,
+        collapsedGroupIds,
+        props.groupLoadingStatus,
+    ]);
+    /* eslint-enable */
+    // INFO: release each group's load-more debounce once its loading settles, so
+    // the next scroll into that band can fire the following page.
+    (0, react_2.useEffect)(function () {
+        var _a;
+        var status = (_a = props.groupLoadingStatus) !== null && _a !== void 0 ? _a : {};
+        Object.keys(groupLoadMoreDebounce.current).forEach(function (groupId) {
+            var _a;
+            if (!((_a = status[groupId]) === null || _a === void 0 ? void 0 : _a.loadingMore)) {
+                groupLoadMoreDebounce.current[groupId] = false;
+            }
+        });
+    }, [props.groupLoadingStatus, props.data.length]);
     // INFO: one-time measurement of pinned columns without an explicit width.
     // Measures the first body <td> content after data renders — Capacitor-safe.
     (0, react_2.useEffect)(function () {
@@ -557,14 +662,118 @@ var NewTable = function (props) {
         setAddData(false);
         setAddDataValue({});
     };
+    // INFO: flatColumns already leaves id out unless showId is on
+    var handleGetAddColumns = function () { return flatColumns; };
+    var handleIsAddColumn = function (col) { var _a; return !col.disabled && utils_1.supportedNewTableAddList.includes((_a = col.type) !== null && _a !== void 0 ? _a : "string"); };
+    // INFO: a row can be added as soon as one column can be filled in — the
+    // rest stay empty and are filled in afterwards
     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); });
+        return handleGetAddColumns().some(handleIsAddColumn);
+    };
+    var handleHasAddValue = function () {
+        var _a;
+        return Object.values((_a = addDataValueRef.current) !== null && _a !== void 0 ? _a : {}).some(function (eachValue) {
+            return (0, utils_1.handleIsValueFilled)(eachValue);
+        });
+    };
+    var handleStartAdd = function (colKey) {
+        var _a, _b, _c;
+        if (!((_a = props.addable) === null || _a === void 0 ? void 0 : _a.active) || !handleValidateAddColumns())
+            return;
+        var col = handleGetAddColumns().find(function (each) { return each.key === colKey; });
+        pendingAddFocusRef.current =
+            col && handleIsAddColumn(col)
+                ? colKey
+                : ((_c = (_b = handleGetAddColumns().find(handleIsAddColumn)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : "");
+        handleCreateFormInputRefs("add");
+        setAddData(true);
+    };
+    /**
+     * INFO: saves the row being filled in. keepAdding opens a fresh row with its
+     * first cell focused, as Enter moves down in a spreadsheet; otherwise the row
+     * closes. An untouched row just closes. One that fails a field's check stays
+     * open with the field marked — or, when the click went to another row, closes
+     * keeping what was typed, which comes back the next time the row is opened.
+     */
+    var handleCommitAdd = function (keepAdding_1) {
+        var args_1 = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args_1[_i - 1] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([keepAdding_1], args_1, true), void 0, function (keepAdding, leaving) {
+            var valid, data, _a;
+            var _b, _c, _d;
+            if (leaving === void 0) { leaving = false; }
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        if (!handleHasAddValue()) {
+                            if (!keepAdding)
+                                handleCancelAdd();
+                            return [2 /*return*/];
+                        }
+                        return [4 /*yield*/, handleCheckFormInputRefs("add")];
+                    case 1:
+                        valid = _e.sent();
+                        if (!valid) {
+                            if (leaving)
+                                setAddData(false);
+                            return [2 /*return*/];
+                        }
+                        data = addDataValueRef.current;
+                        addDataValueRef.current = {};
+                        setAddDataValue({});
+                        if (keepAdding) {
+                            pendingAddFocusRef.current =
+                                (_c = (_b = handleGetAddColumns().find(handleIsAddColumn)) === null || _b === void 0 ? void 0 : _b.key) !== null && _c !== void 0 ? _c : "";
+                            handleCreateFormInputRefs("add");
+                            setAddRowKey(function (previous) { return previous + 1; });
+                        }
+                        else
+                            setAddData(false);
+                        _e.label = 2;
+                    case 2:
+                        _e.trys.push([2, 4, , 5]);
+                        return [4 /*yield*/, ((_d = props.addable) === null || _d === void 0 ? void 0 : _d.onAddData(data))];
+                    case 3:
+                        _e.sent();
+                        return [3 /*break*/, 5];
+                    case 4:
+                        _a = _e.sent();
+                        if (handleHasAddValue())
+                            return [2 /*return*/];
+                        addDataValueRef.current = data;
+                        setAddDataValue(data);
+                        handleCreateFormInputRefs("add");
+                        setAddData(true);
+                        return [3 /*break*/, 5];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    var handleAddRowKeyDown = function (event) {
+        // INFO: a field that used the key itself — a date picker closing, a
+        // dropdown picking an option — keeps the row as it is, and a button keeps
+        // Enter for its own click
+        if (event.defaultPrevented)
+            return;
+        var target = event.target;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            handleCancelAdd();
+            return;
+        }
+        // INFO: Enter saves and opens the next row, except in a multi-line field
+        if (event.key === "Enter" &&
+            !event.shiftKey &&
+            target.tagName !== "TEXTAREA" &&
+            !target.closest("button")) {
+            event.preventDefault();
+            handleCommitAdd(true);
+        }
     };
+    commitAddRef.current = handleCommitAdd;
     // 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; };
@@ -820,7 +1029,7 @@ var NewTable = function (props) {
     // resize is a per-viewer preference and there is no storage for it yet.
     // Tailwind cannot emit a runtime w-[Npx], so this drives an inline style and
     // wins over the col.width class.
-    var _29 = (0, react_2.useState)({}), columnWidths = _29[0], setColumnWidths = _29[1];
+    var _30 = (0, react_2.useState)({}), columnWidths = _30[0], setColumnWidths = _30[1];
     var resizeRef = (0, react_2.useRef)(null);
     // INFO: a consumer may deliberately set a column narrower than the default
     // floor (a 40px icon column, say) — never force it wider than it was asked to
@@ -1574,54 +1783,37 @@ var NewTable = function (props) {
         return react_2.default.createElement("td", { className: "".concat(cellPadding, " text-sm") });
     };
     var renderAddDataRow = function () {
-        var filteredCols = props.showId
-            ? flatColumns
-            : flatColumns.filter(function (c) { return c.key !== "id" && c.key !== "_id"; });
+        var filteredCols = handleGetAddColumns();
         var colsAsDS = handleConvertColumnToDataStructure(filteredCols);
-        return (react_2.default.createElement("tr", null,
+        return (react_2.default.createElement("tr", { key: "add-row-".concat(addRowKey), ref: addRowRef, "data-testid": "table-add-row-editing", onKeyDown: handleAddRowKeyDown },
             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", { className: "min-w-[10rem]" }, renderFormCell(addDataValue, ds, addDataInputRefs.current[index], { active: true, onBlur: function () { } }))));
+                if (handleIsAddColumn(filteredCols[index])) {
+                    return (react_2.default.createElement("td", { key: ds.id + String(index), "data-add-cell": ds.id, className: "px-4 py-4 whitespace-nowrap align-top" },
+                        react_2.default.createElement("div", { className: "min-w-[10rem]" }, renderFormCell(addDataValue, ds, addDataInputRefs.current[flatColumns.findIndex(function (col) { return col.key === ds.id; })], { active: true, onBlur: function () { } }))));
                 }
-                return react_2.default.createElement("td", { key: ds.id + String(index) });
+                return react_2.default.createElement("td", { key: ds.id + String(index), "data-add-cell": ds.id });
             }),
             renderAddColumnCell(),
             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_2.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_2.CheckIcon, { className: "w-5 h-5 text-green-500" }), onClick: function () { return handleCommitAdd(false); } }),
                     react_2.default.createElement(iconButton_1.IconButton, { icon: react_2.default.createElement(solid_2.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)
+    // INFO: the empty row at the bottom of an addable table — clicking any of
+    // its cells starts a new record there, as the next empty row of a
+    // spreadsheet does
+    var renderEmptyAddRow = function () {
+        var _a, _b, _c;
+        if (!((_a = props.addable) === null || _a === void 0 ? void 0 : _a.active) || !handleValidateAddColumns())
             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" })));
+        if (((_c = (_b = props.selectedIds) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0) > 0 || props.selectAll)
+            return null;
+        return (react_2.default.createElement("tr", { "data-testid": "table-add-row", className: "cursor-text ".concat(props.darkMode ? "hover:bg-gray-800" : "hover:bg-gray-50") },
+            props.checkbox && react_2.default.createElement("td", { className: "w-10 ".concat(cellPadding) }),
+            handleGetAddColumns().map(function (col, index) { return (react_2.default.createElement("td", { key: col.key, "data-add-cell": col.key, className: "".concat(cellPadding, " h-10"), onClick: function () { return handleStartAdd(col.key); } }, index === 0 && (react_2.default.createElement(solid_1.PlusIcon, { className: "h-4 w-4 ".concat(props.darkMode ? "text-gray-500" : "text-gray-400"), "aria-hidden": "true" })))); }),
+            renderAddColumnCell(),
+            handleShowsActionColumn() && react_2.default.createElement("td", { className: cellPadding })));
     };
     var renderSelectAll = function () {
         var _a, _b;
@@ -1849,7 +2041,7 @@ var NewTable = function (props) {
             (((_a = props.advSettings) === null || _a === void 0 ? void 0 : _a.addColumnEnabled) ? 1 : 0) +
             (handleShowsActionColumn() ? 1 : 0);
         return props.groups.map(function (group) {
-            var _a, _b;
+            var _a, _b, _c;
             var colourKey = (_a = group.colour) !== null && _a !== void 0 ? _a : "none";
             var isCollapsed = collapsedGroupIds.includes(group.id);
             var memberIndexes = group.rowIds
@@ -1868,13 +2060,59 @@ var NewTable = function (props) {
                             } },
                             isCollapsed ? (react_2.default.createElement(solid_2.ChevronRightIcon, { className: "h-4 w-4" })) : (react_2.default.createElement(solid_2.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)))),
+                            react_2.default.createElement("span", { className: "rounded-full bg-white/70 px-2 py-0.5 text-[11px] font-medium normal-case tracking-normal" }, (_c = group.count) !== null && _c !== void 0 ? _c : memberIndexes.length)))),
                 !isCollapsed &&
                     memberIndexes.map(function (rowIndex) {
                         return renderDesktopRow(props.data[rowIndex], rowIndex, colourKey);
-                    })));
+                    }),
+                renderGroupLoadMoreRow(group.id, columnCount, isCollapsed),
+                renderGroupPagerRow(group, columnCount, isCollapsed)));
         });
     };
+    // INFO: per-group scroll sentinel row. Rendered after a band's member rows in
+    // grouped scroll mode so the group lazily loads its next page as it scrolls
+    // into view; shows a spinner while that group's page is in flight. Nothing is
+    // rendered when the band is collapsed, exhausted, or when per-group paging is
+    // not wired (preserving existing group behaviour).
+    var renderGroupLoadMoreRow = function (groupId, columnCount, isCollapsed) {
+        var _a;
+        if (props.paginationType !== "scroll" || !props.onGroupLoadMore)
+            return null;
+        if (isCollapsed)
+            return null;
+        var status = (_a = props.groupLoadingStatus) === null || _a === void 0 ? void 0 : _a[groupId];
+        if (status === null || status === void 0 ? void 0 : status.exhausted)
+            return null;
+        return (react_2.default.createElement("tr", { "data-testid": "table-group-sentinel-".concat(groupId), className: "border-l-4 border-transparent" },
+            react_2.default.createElement("td", { colSpan: columnCount, className: "px-3 py-2" },
+                react_2.default.createElement("div", { "data-group-sentinel": groupId, ref: function (node) {
+                        groupSentinelRefs.current[groupId] = node;
+                    }, className: "flex w-full items-center justify-center" }, (status === null || status === void 0 ? void 0 : status.loadingMore) && react_2.default.createElement(loading_1.Loading, null)))));
+    };
+    // INFO: page mode pager under a band's rows — the list's own footer
+    // (numbered pages, chevrons, go-to-page) scoped to that group; hidden while
+    // collapsed and when the whole group fits one page
+    var renderGroupPagerRow = function (group, columnCount, isCollapsed) {
+        var _a, _b, _c;
+        if (!props.onGroupPageChange || isCollapsed)
+            return null;
+        var status = (_a = props.groupLoadingStatus) === null || _a === void 0 ? void 0 : _a[group.id];
+        if (!(status === null || status === void 0 ? void 0 : status.fetched))
+            return null;
+        var size = (_b = status.size) !== null && _b !== void 0 ? _b : 0;
+        if (size <= (props.limit || 10))
+            return null;
+        return (react_2.default.createElement("tr", { "data-testid": "table-group-pager-".concat(group.id), className: "border-l-4 border-transparent" },
+            react_2.default.createElement("td", { colSpan: columnCount, className: "px-3 pb-2" },
+                react_2.default.createElement("div", { className: "flex items-center gap-x-2" },
+                    react_2.default.createElement(newPagination_1.NewPagination, { paginationType: "page", pageIndex: (_c = status.page) !== null && _c !== void 0 ? _c : 0, limit: props.limit, size: size, darkMode: props.darkMode, darkModeBg: props.darkModeBg, className: "flex-1", handleUpdatePageIndex: function (value) {
+                            var _a;
+                            if (typeof value !== "number" || status.loadingMore)
+                                return;
+                            (_a = props.onGroupPageChange) === null || _a === void 0 ? void 0 : _a.call(props, group.id, value);
+                        } }),
+                    status.loadingMore && react_2.default.createElement(loading_1.Loading, null)))));
+    };
     var renderFloatingActionBar = function () {
         var _a, _b, _c, _d, _e;
         var visibleBtns = ((_a = props.multiActionFloatingBtns) !== null && _a !== void 0 ? _a : []).filter(function (btn) { return !btn.hide; });
@@ -2312,9 +2550,9 @@ var NewTable = function (props) {
                             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 && 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") }, (_2 = props.emptyTitle) !== null && _2 !== void 0 ? _2 : "No items")),
-            renderAddableSection()),
+                    !props.loading &&
+                        (addData ? renderAddDataRow() : renderEmptyAddRow()))),
+            !props.loading && props.data.length === 0 && (react_2.default.createElement("div", { className: "p-4 text-sm ".concat(cellFontColor, " text-center sticky left-0") }, (_2 = props.emptyTitle) !== null && _2 !== void 0 ? _2 : "No items"))),
         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")
                 : "") }),