blixify-ui-web 1.2.163 → 1.2.166

package/lib/components/data/dataTemplate/index.js

@@ -477,59 +477,73 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var _162 = (0, react_1.useState)(undefined), allQueryList = _162[0], setAllQueryList = _162[1];
     var _163 = (0, react_1.useState)(-1), queryIndex = _163[0], setQueryIndex = _163[1];
     var _164 = (0, react_1.useState)((_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _164[0], setGroupId = _164[1];
-    var _165 = (0, react_1.useState)(""), readTabSection = _165[0], setReadTabSection = _165[1];
-    var _166 = (0, react_1.useState)(false), readFloatingNav = _166[0], setReadFloatingNav = _166[1];
+    // INFO: Monday-board per-group paging. Keyed by the group key that
+    // handleBuildNewTableGroups() produces (a list option or "Unknown/No Value").
+    // Each group tracks its own loaded cursor + total so it can lazily load its
+    // next page as the user scrolls inside that band, independent of every other
+    // group. Only used when renderCheckGroupPaging() is true.
+    var _165 = (0, react_1.useState)({}), groupPageState = _165[0], setGroupPageState = _165[1];
+    // INFO: read fresh inside the async per-group fetch so chained scroll fires
+    // in one tick do not re-fetch an already in-flight page.
+    var groupPageStateRef = (0, react_1.useRef)({});
+    groupPageStateRef.current = groupPageState;
+    // INFO: bumped on every fresh read, so a group page requested before the
+    // list was re-read (new search, filter, sort or grouping) is dropped on
+    // arrival instead of appending rows that belong to the old list
+    var groupPagingGenRef = (0, react_1.useRef)(0);
+    var _166 = (0, react_1.useState)(""), readTabSection = _166[0], setReadTabSection = _166[1];
+    var _167 = (0, react_1.useState)(false), readFloatingNav = _167[0], setReadFloatingNav = _167[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _167 = (0, react_1.useState)(false), modalVisible = _167[0], setModalVisible = _167[1];
-    var _168 = (0, react_1.useState)(false), deleteModal = _168[0], setDeleteModal = _168[1];
-    var _169 = (0, react_1.useState)(false), excelModal = _169[0], setExcelModal = _169[1];
-    var _170 = (0, react_1.useState)(false), exportExcel = _170[0], setExportExcel = _170[1];
-    var _171 = (0, react_1.useState)(""), exportType = _171[0], setExportType = _171[1];
-    var _172 = (0, react_1.useState)(false), exportQR = _172[0], setExportQR = _172[1];
-    var _173 = (0, react_1.useState)(function () {
+    var _168 = (0, react_1.useState)(false), modalVisible = _168[0], setModalVisible = _168[1];
+    var _169 = (0, react_1.useState)(false), deleteModal = _169[0], setDeleteModal = _169[1];
+    var _170 = (0, react_1.useState)(false), excelModal = _170[0], setExcelModal = _170[1];
+    var _171 = (0, react_1.useState)(false), exportExcel = _171[0], setExportExcel = _171[1];
+    var _172 = (0, react_1.useState)(""), exportType = _172[0], setExportType = _172[1];
+    var _173 = (0, react_1.useState)(false), exportQR = _173[0], setExportQR = _173[1];
+    var _174 = (0, react_1.useState)(function () {
         var _a, _b;
         var firstTabId = (_b = (_a = structure.find(function (item) { return item.tabId; })) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : "";
         return firstTabId;
-    }), activeTab = _173[0], setActiveTab = _173[1];
-    var _174 = (0, react_1.useState)(false), signatureSigning = _174[0], setSignatureSigning = _174[1];
-    var _175 = (0, react_1.useState)({}), selectedData = _175[0], setSelectedData = _175[1];
-    var _176 = (0, react_1.useState)(""), selectedObjectStructureId = _176[0], setSelectedObjectStructureId = _176[1];
-    var _177 = (0, react_1.useState)(""), selectedObjectId = _177[0], setSelectedObjectId = _177[1];
-    var _178 = (0, react_1.useState)(""), selectedListAddressId = _178[0], setSelectedListAddressId = _178[1];
-    var _179 = (0, react_1.useState)(-1), selectedListAddressIndex = _179[0], setSelectedListAddressIndex = _179[1];
-    var _180 = (0, react_1.useState)({
+    }), activeTab = _174[0], setActiveTab = _174[1];
+    var _175 = (0, react_1.useState)(false), signatureSigning = _175[0], setSignatureSigning = _175[1];
+    var _176 = (0, react_1.useState)({}), selectedData = _176[0], setSelectedData = _176[1];
+    var _177 = (0, react_1.useState)(""), selectedObjectStructureId = _177[0], setSelectedObjectStructureId = _177[1];
+    var _178 = (0, react_1.useState)(""), selectedObjectId = _178[0], setSelectedObjectId = _178[1];
+    var _179 = (0, react_1.useState)(""), selectedListAddressId = _179[0], setSelectedListAddressId = _179[1];
+    var _180 = (0, react_1.useState)(-1), selectedListAddressIndex = _180[0], setSelectedListAddressIndex = _180[1];
+    var _181 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _180[0], setSelectedListAddress = _180[1];
-    var _181 = (0, react_1.useState)({}), selectedObjectData = _181[0], setSelectedObjectData = _181[1];
-    var _182 = (0, react_1.useState)(null), objectCellEdit = _182[0], setObjectCellEdit = _182[1];
-    var _183 = (0, react_1.useState)(false), referenceLoading = _183[0], setReferenceLoading = _183[1];
-    var _184 = (0, react_1.useState)({}), referencesOptions = _184[0], setReferencesOptions = _184[1];
-    var _185 = (0, react_1.useState)({}), referencesDetails = _185[0], setReferencesDetails = _185[1];
-    var _186 = (0, react_1.useState)({}), listReferencesOptions = _186[0], setListReferencesOptions = _186[1];
-    var _187 = (0, react_1.useState)({}), referenceDeleteTableData = _187[0], setReferenceDeleteTableData = _187[1];
-    var _188 = (0, react_1.useState)([]), relatedSections = _188[0], setRelatedSections = _188[1];
-    var _189 = (0, react_1.useState)(0), referenceDeleteIndex = _189[0], setReferenceDeleteIndex = _189[1];
-    var _190 = (0, react_1.useState)({
+    }), selectedListAddress = _181[0], setSelectedListAddress = _181[1];
+    var _182 = (0, react_1.useState)({}), selectedObjectData = _182[0], setSelectedObjectData = _182[1];
+    var _183 = (0, react_1.useState)(null), objectCellEdit = _183[0], setObjectCellEdit = _183[1];
+    var _184 = (0, react_1.useState)(false), referenceLoading = _184[0], setReferenceLoading = _184[1];
+    var _185 = (0, react_1.useState)({}), referencesOptions = _185[0], setReferencesOptions = _185[1];
+    var _186 = (0, react_1.useState)({}), referencesDetails = _186[0], setReferencesDetails = _186[1];
+    var _187 = (0, react_1.useState)({}), listReferencesOptions = _187[0], setListReferencesOptions = _187[1];
+    var _188 = (0, react_1.useState)({}), referenceDeleteTableData = _188[0], setReferenceDeleteTableData = _188[1];
+    var _189 = (0, react_1.useState)([]), relatedSections = _189[0], setRelatedSections = _189[1];
+    var _190 = (0, react_1.useState)(0), referenceDeleteIndex = _190[0], setReferenceDeleteIndex = _190[1];
+    var _191 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _190[0], setReferenceCreationModal = _190[1];
-    var _191 = (0, react_1.useState)({}), referenceModelSchema = _191[0], setReferenceSchema = _191[1];
-    var _192 = (0, react_1.useState)([]), kanbanChecked = _192[0], setKanbanChecked = _192[1];
+    }), referenceCreationModal = _191[0], setReferenceCreationModal = _191[1];
+    var _192 = (0, react_1.useState)({}), referenceModelSchema = _192[0], setReferenceSchema = _192[1];
+    var _193 = (0, react_1.useState)([]), kanbanChecked = _193[0], setKanbanChecked = _193[1];
     //INFO : Offline
-    var _193 = (0, react_1.useState)(0), offlineDataLength = _193[0], setOfflineDataLength = _193[1];
-    var _194 = (0, react_1.useState)(false), offlineModal = _194[0], setOfflineModal = _194[1];
+    var _194 = (0, react_1.useState)(0), offlineDataLength = _194[0], setOfflineDataLength = _194[1];
+    var _195 = (0, react_1.useState)(false), offlineModal = _195[0], setOfflineModal = _195[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _195 = (0, react_1.useState)(false), isLive = _195[0], setIsLive = _195[1];
-    var _196 = (0, react_1.useState)(false), isLiveOffline = _196[0], setIsLiveOffline = _196[1];
+    var _196 = (0, react_1.useState)(false), isLive = _196[0], setIsLive = _196[1];
+    var _197 = (0, react_1.useState)(false), isLiveOffline = _197[0], setIsLiveOffline = _197[1];
     // INFO: true when navigator is offline — used to switch ReadQueryHoc between
     // server reads (online, full pagination) and IndexedDB reads (offline, cached data).
     // Independent of SSE status so it works even when bareSocketName is not set.
-    var _197 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _197[0], setIsNetworkOffline = _197[1];
+    var _198 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _198[0], setIsNetworkOffline = _198[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -746,7 +760,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var isSchemaHideMode = ((_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.onChangeHide) ? true : false;
     // INFO: rows per page is a view setting the user can change, so it starts from
     // the persisted value and falls back to the consumer's limit
-    var _198 = (0, react_1.useState)((_12 = (_11 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _11 !== void 0 ? _11 : props.limit) !== null && _12 !== void 0 ? _12 : 10), pageLimit = _198[0], setPageLimit = _198[1];
+    var _199 = (0, react_1.useState)((_12 = (_11 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _11 !== void 0 ? _11 : props.limit) !== null && _12 !== void 0 ? _12 : 10), pageLimit = _199[0], setPageLimit = _199[1];
     var limit = pageLimit;
     var isSavedViewsEnabled = !!((_13 = props.organise) === null || _13 === void 0 ? void 0 : _13.savedViews) && resolvedType === "list";
     // INFO: an app that stores views takes over from this browser's storage, so
@@ -771,7 +785,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         setCursor("");
         setLastCursor("");
     };
-    var _199 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _199.canUpdateRecord, canInlineUpdate = _199.canInlineUpdate, canBatchUpdate = _199.canBatchUpdate, canDeleteRecord = _199.canDeleteRecord;
+    var _200 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _200.canUpdateRecord, canInlineUpdate = _200.canInlineUpdate, canBatchUpdate = _200.canBatchUpdate, canDeleteRecord = _200.canDeleteRecord;
     var isEditor = ((_17 = props.edit) === null || _17 === void 0 ? void 0 : _17.allEditable) ? true : false;
     var isOffline = (_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.bareOffline;
     // INFO: when bareOfflineNetworkAware is true, the save path is also gated on
@@ -1213,7 +1227,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             // INFO: scroll mode reloads from page 0; the anchor restores the position
             pageIndex: renderCheckScrollMode() ? 0 : pageIndex, hiddenColumnIds: structure.filter(function (col) { return col.hide; }).map(function (col) { return col.id; }), 
             // INFO: raw, so switching bareViewSettings off does not wipe the user's choice
-            userHiddenColumnIds: userHiddenColumnIds, columnOrder: structure.map(function (col) { return col.id; }) }, scrollCaptureRef.current));
+            userHiddenColumnIds: userHiddenColumnIds, columnOrder: structure.map(function (col) { return col.id; }), groupBy: groupId !== null && groupId !== void 0 ? groupId : "" }, scrollCaptureRef.current));
     };
     handleRegisterViewSnapshot(handleBuildViewSnapshot);
     //=====================================================================================
@@ -1330,11 +1344,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // INFO: a view is the defaults overridden by its own fields, so a field it
     // leaves out is reset rather than carried over from whatever was on screen
     var handleResolveViewState = function (state) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f;
         var model = (_a = props.model) !== null && _a !== void 0 ? _a : [];
-        return ((_d = (0, viewStatePersistence_1.handlePruneStaleColumns)(__assign({ filterSearchParams: initialFilterSearchParams, filterSelection: initialFilterSelection, filterReference: initialFilterReference, filterReferenceDate: (0, viewStatePersistence_1.serializeDateFilterState)(initialFilterReferenceDate), sort: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.sort, pageLimit: (_c = props.limit) !== null && _c !== void 0 ? _c : 10, userHiddenColumnIds: [], hiddenColumnIds: model
+        return ((_f = (0, viewStatePersistence_1.handlePruneStaleColumns)(__assign({ filterSearchParams: initialFilterSearchParams, filterSelection: initialFilterSelection, filterReference: initialFilterReference, filterReferenceDate: (0, viewStatePersistence_1.serializeDateFilterState)(initialFilterReferenceDate), sort: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.sort, pageLimit: (_c = props.limit) !== null && _c !== void 0 ? _c : 10, userHiddenColumnIds: [], hiddenColumnIds: model
                 .filter(function (eachColumn) { return eachColumn.hide; })
-                .map(function (eachColumn) { return eachColumn.id; }), columnOrder: model.map(function (eachColumn) { return eachColumn.id; }) }, (state !== null && state !== void 0 ? state : {})), model)) !== null && _d !== void 0 ? _d : {});
+                .map(function (eachColumn) { return eachColumn.id; }), columnOrder: model.map(function (eachColumn) { return eachColumn.id; }), groupBy: (_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.groupBy) !== null && _e !== void 0 ? _e : "" }, (state !== null && state !== void 0 ? state : {})), model)) !== null && _f !== void 0 ? _f : {});
     };
     var handleApplyViewColumns = function (columns, state) {
         var _a;
@@ -1349,11 +1363,27 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             return (__assign(__assign({}, eachColumn), { hide: (_b = (_a = state.hiddenColumnIds) === null || _a === void 0 ? void 0 : _a.includes(eachColumn.id)) !== null && _b !== void 0 ? _b : false }));
         });
     };
+    // INFO: the columns a list can be grouped by — the app's own list, else
+    // every column the reference picker offers
+    var handleGetGroupByOptions = function () {
+        var _a, _b, _c, _d, _e, _f;
+        return (_f = (_c = (_b = (_a = props === null || props === void 0 ? void 0 : props.organise) === null || _a === void 0 ? void 0 : _a.renderGroupByOptions) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : (_e = (_d = props === null || props === void 0 ? void 0 : props.organise) === null || _d === void 0 ? void 0 : _d.renderReferenceLabelOptions) === null || _e === void 0 ? void 0 : _e.call(_d, props.collectionId, true)) !== null && _f !== void 0 ? _f : [];
+    };
+    // INFO: notify — only a user's choice is handed back; a list opening on a
+    // view or syncing the host's own groupBy tells the host nothing new
+    var handleChangeGroupBy = function (value, notify) {
+        var _a, _b;
+        if (value === (groupId !== null && groupId !== void 0 ? groupId : ""))
+            return;
+        setGroupId(value);
+        if (notify)
+            (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeGroupBy) === null || _b === void 0 ? void 0 : _b.call(_a, value);
+    };
     // INFO: isOpening — the list opening on a view tells the host nothing new,
     // so its sort is not handed back (a host saving sort would write it on
     // every open)
     var handleApplySavedView = function (view, isOpening) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         var next = handleResolveViewState((_a = view === null || view === void 0 ? void 0 : view.state) !== null && _a !== void 0 ? _a : null);
         var isQueryChanged = !(0, viewStatePersistence_1.handleIsSameViewState)((0, viewStatePersistence_1.handlePickQueryState)(handleBuildViewSnapshot()), (0, viewStatePersistence_1.handlePickQueryState)(next));
         handleClearFlexFilterTypingTimeout();
@@ -1376,7 +1406,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             (_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.onChangeSort) === null || _h === void 0 ? void 0 : _h.call(_g, next.sort);
         if (next.pageLimit)
             setPageLimit(next.pageLimit);
-        setUserHiddenColumnIds((_j = next.userHiddenColumnIds) !== null && _j !== void 0 ? _j : []);
+        handleChangeGroupBy((_j = next.groupBy) !== null && _j !== void 0 ? _j : "", !isOpening);
+        setUserHiddenColumnIds((_k = next.userHiddenColumnIds) !== null && _k !== void 0 ? _k : []);
         if (view) {
             if (!schemaStructureRef.current)
                 schemaStructureRef.current = structure;
@@ -1391,12 +1422,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             pendingViewCondKeyRef.current = JSON.stringify(handleReadQueryHocCond());
             handleClearDataByFilter();
             if (pageIndex !== 0)
-                (_l = (_k = props.organise) === null || _k === void 0 ? void 0 : _k.onChangePagination) === null || _l === void 0 ? void 0 : _l.call(_k, 0);
-            (_o = (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListHandleFilter) === null || _o === void 0 ? void 0 : _o.call(_m, (_p = next.filterSearchParams) !== null && _p !== void 0 ? _p : {}, (_q = next.filterSelection) !== null && _q !== void 0 ? _q : {}, next.filterReferenceDate
+                (_m = (_l = props.organise) === null || _l === void 0 ? void 0 : _l.onChangePagination) === null || _m === void 0 ? void 0 : _m.call(_l, 0);
+            (_p = (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListHandleFilter) === null || _p === void 0 ? void 0 : _p.call(_o, (_q = next.filterSearchParams) !== null && _q !== void 0 ? _q : {}, (_r = next.filterSelection) !== null && _r !== void 0 ? _r : {}, next.filterReferenceDate
                 ? (0, viewStatePersistence_1.parseDateFilterState)(next.filterReferenceDate)
-                : initialFilterReferenceDate, (_r = next.filterReference) !== null && _r !== void 0 ? _r : {});
+                : initialFilterReferenceDate, (_s = next.filterReference) !== null && _s !== void 0 ? _s : {});
         }
-        setActiveSavedViewId((_s = view === null || view === void 0 ? void 0 : view.id) !== null && _s !== void 0 ? _s : null);
+        setActiveSavedViewId((_t = view === null || view === void 0 ? void 0 : view.id) !== null && _t !== void 0 ? _t : null);
         setDeletingSavedViewId(null);
     };
     // INFO: re-read storage before each write so a change made in another browser
@@ -2556,7 +2587,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return sort;
     };
     var handleReadQueryHocCond = function () {
-        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 query = (_a = renderImpSearchFilterConditions()) !== null && _a !== void 0 ? _a : [];
         var calendarSettings = false;
         if (selectedTab && selectedTab.viewType === "calendar") {
@@ -2577,7 +2608,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 startDate = (0, dayjs_1.default)(calendarTabMonth).startOf("isoWeek").toDate();
                 endDate = (0, dayjs_1.default)(calendarTabMonth).endOf("isoWeek").toDate();
                 if ((_d = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.calendarSettings) === null || _d === void 0 ? void 0 : _d.customView) {
-                    var _v = (_e = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.calendarSettings) === null || _e === void 0 ? void 0 : _e.customView, view = _v.view, duration = _v.duration;
+                    var _w = (_e = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.calendarSettings) === null || _e === void 0 ? void 0 : _e.customView, view = _w.view, duration = _w.duration;
                     if (view &&
                         duration &&
                         view === "week" &&
@@ -2694,13 +2725,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             (selectedTab &&
                 (selectedTab.viewType === "map" ||
                     selectedTab.viewType === "timeline")) ||
-            groupId) {
+            // INFO: the legacy grouped list renders one table per group and needs
+            // every row. NewTable bands are built from whatever rows are loaded, so
+            // it keeps normal page reads: page mode groups the rows of the current
+            // page, and scroll mode pages each band (handleFetchGroupNextPage). A
+            // full read there also broke the pager — page 2 skipped the first page
+            // of a list that was already complete.
+            (groupId && !((_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareNewDTW))) {
             // INFO: a Gantt needs every bar at once — a page of rows would hide
             // spans that fall outside it, so fetch the full set like map/calendar
             cond.limit = undefined;
             cond.stopLimit = true;
         }
-        else if ((_u = (_t = props.organise) === null || _t === void 0 ? void 0 : _t.unionCollections) === null || _u === void 0 ? void 0 : _u.length) {
+        else if ((_v = (_u = props.organise) === null || _u === void 0 ? void 0 : _u.unionCollections) === null || _v === void 0 ? void 0 : _v.length) {
             // INFO: a union request only carries `skip`, so the page offset goes there, and
             // `_id` keeps the order stable between page requests
             cond.skip = (0, unionPagination_1.handleGetUnionPageSkip)(pageIndex, limit);
@@ -2929,6 +2966,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         if (!isScrollMode && !isFirebase) {
                             handleSetListData(dataList, prettierDataList);
                             setSize((_j = responseData.count) !== null && _j !== void 0 ? _j : 0);
+                            if (renderCheckGroupPaging())
+                                handleLoadGroupFirstPages();
                         }
                         else {
                             newTableData = [];
@@ -2936,6 +2975,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             if (!isFirebase && requestCond) {
                                 isFirstPage = !requestCond.cursor && !requestCond.skip;
                                 if (isFirstPage) {
+                                    // INFO: per-group cursors and "exhausted" flags describe the old
+                                    // list; keeping them would skip rows or stop a group early
+                                    groupPagingGenRef.current += 1;
+                                    groupPageStateRef.current = {};
+                                    setGroupPageState({});
                                     newTableData = dataList;
                                     newPrettierTableData = prettierDataList;
                                 }
@@ -3019,6 +3063,28 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // INFO: keep polling ref current so the setInterval always fires the latest
     // handleRefresh closure (captures current filters, pagination, etc.)
     handleRefreshRef.current = handleRefresh;
+    // INFO: scroll mode keeps every loaded row, and bands seed their cursor from
+    // the rows they already hold — rows loaded for the old grouping are not the
+    // first rows of the new groups, so a regroup starts the list over
+    var previousGroupIdRef = (0, react_1.useRef)(groupId !== null && groupId !== void 0 ? groupId : "");
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        // INFO: undefined and "" are both ungrouped, as the host sync sets on mount
+        if ((groupId !== null && groupId !== void 0 ? groupId : "") === previousGroupIdRef.current)
+            return;
+        previousGroupIdRef.current = groupId !== null && groupId !== void 0 ? groupId : "";
+        if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW) || isFirebase)
+            return;
+        if (renderResolvedPaginationType() === "cursor")
+            return;
+        var isFirstPage = pageIndex === 0;
+        handleClearDataByFilter();
+        // INFO: from page 0 the request does not change, so ask for the read
+        if (isFirstPage)
+            (_b = listRQueryHocRef.current) === null || _b === void 0 ? void 0 : _b.handleRefresh();
+        /* eslint-disable */
+    }, [groupId]);
+    /* eslint-enable */
     var handleObjectReferenceOptions = function () { return __awaiter(void 0, void 0, void 0, function () {
         var clonedOptions_1, clonedDetails_1, model, err_2;
         var _a;
@@ -3093,6 +3159,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         setCursor("");
         setLastCursor("");
         setTableLoading(true);
+        // INFO: band totals, cursors and "exhausted" flags describe the list being
+        // cleared; dropping them now keeps a stale total off an emptied band and
+        // any band page still in flight off the new list
+        groupPagingGenRef.current += 1;
+        groupPageStateRef.current = {};
+        setGroupPageState({});
         // INFO: In scroll mode, accumulated rows must be cleared on refresh/filter change
         // so the fresh response replaces stale data instead of being deduped away.
         if (renderCheckScrollMode()) {
@@ -6887,7 +6959,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             : getActiveUserHiddenColumnIds().includes(column.id);
     };
     var renderViewSettingsContent = function () {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f, _g;
         var viewColumns = getViewSettingsColumns();
         var hiddenCount = viewColumns.filter(getIsColumnHidden).length;
         var visibleCount = viewColumns.length - hiddenCount;
@@ -6961,6 +7033,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     type: value,
                                 });
                             } })))),
+            ((_f = props.organise) === null || _f === void 0 ? void 0 : _f.showGroupByFeature) && (react_1.default.createElement("div", { className: "mt-3 border-t pt-3 ".concat(dividerColor) },
+                react_1.default.createElement("p", { className: "text-sm font-medium ".concat(labelColor) }, "Group"),
+                react_1.default.createElement("div", { className: "mt-1" },
+                    react_1.default.createElement(select_1.Select, { id: "dtw-view-group-by", portalDropdown: true, label: "", placeholder: "Column", value: groupId !== null && groupId !== void 0 ? groupId : "", darkMode: (_g = props.organise) === null || _g === void 0 ? void 0 : _g.darkMode, options: handleGetGroupByOptions(), onChange: function (value) {
+                            return handleChangeGroupBy(value !== null && value !== void 0 ? value : "", true);
+                        } })))),
             react_1.default.createElement("div", { className: "mt-3 border-t pt-3 ".concat(dividerColor) },
                 react_1.default.createElement("p", { className: "text-sm font-medium ".concat(labelColor) }, "Rows per page"),
                 react_1.default.createElement("div", { className: "mt-2 flex flex-row flex-wrap gap-2" }, PAGE_LIMIT_OPTIONS.map(function (eachOption) { return (react_1.default.createElement("button", { key: eachOption, type: "button", "data-testid": "dtw-page-limit-".concat(eachOption), className: "rounded-md border px-3 py-1 text-sm ".concat(pageLimit === eachOption
@@ -8028,7 +8106,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         props.renderSettings.renderListUI(actionComponent, filterComponent_1, dataComponent)));
                 }
                 var renderListFilterElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
                     // INFO: When bareListFilterAsPopup is true, filters are shown in a popup instead.
                     if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup)
                         return null;
@@ -8054,7 +8132,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     var filterElementList = [];
                     if (!((_f = props.organise) === null || _f === void 0 ? void 0 : _f.filterComponentNewRow)) {
                         if ((_g = props.organise) === null || _g === void 0 ? void 0 : _g.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Group", options: (_o = (_k = (_j = (_h = props === null || props === void 0 ? void 0 : props.organise) === null || _h === void 0 ? void 0 : _h.renderGroupByOptions) === null || _j === void 0 ? void 0 : _j.call(_h)) !== null && _k !== void 0 ? _k : (_m = (_l = props === null || props === void 0 ? void 0 : props.organise) === null || _l === void 0 ? void 0 : _l.renderReferenceLabelOptions) === null || _m === void 0 ? void 0 : _m.call(_l, props.collectionId, true)) !== null && _o !== void 0 ? _o : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Group", darkMode: (_h = props.organise) === null || _h === void 0 ? void 0 : _h.darkMode, options: handleGetGroupByOptions(), value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return handleChangeGroupBy(value !== null && value !== void 0 ? value : "", true); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -8201,7 +8279,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                 };
                 var renderListNewRowFilterElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                    var _a, _b, _c, _d, _e;
                     var filterElementList = [];
                     // INFO: bareCompactMode + bareListFilterAsPopup both tuck filters
                     // behind the popup, so skip the new-row render path too.
@@ -8213,7 +8291,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     if ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.filterComponentNewRow) {
                         if (props.organise.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Group", options: (_k = (_g = (_f = (_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.renderGroupByOptions) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : (_j = (_h = props === null || props === void 0 ? void 0 : props.organise) === null || _h === void 0 ? void 0 : _h.renderReferenceLabelOptions) === null || _j === void 0 ? void 0 : _j.call(_h, props.collectionId, true)) !== null && _k !== void 0 ? _k : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Group", darkMode: (_e = props.organise) === null || _e === void 0 ? void 0 : _e.darkMode, options: handleGetGroupByOptions(), value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return handleChangeGroupBy(value !== null && value !== void 0 ? value : "", true); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -8538,6 +8616,26 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var _a;
         return ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.paginationType) === "scroll";
     };
+    // INFO: groups page themselves only when every group is known before its
+    // rows load — a list column's options plus "Unknown/No Value" for any other
+    // value. Grouping by a free-form column builds groups from loaded rows, so a
+    // group absent from the first page would never appear; those keep the
+    // global scroll instead. Firebase pages by document cursor, not by count.
+    var renderCheckGroupPaging = function () {
+        var _a, _b, _c, _d;
+        var paginationType = renderResolvedPaginationType();
+        if (paginationType !== "scroll" && paginationType !== "page")
+            return false;
+        if (!groupId || isFirebase)
+            return false;
+        // INFO: the mobile list draws no bands, so it keeps the normal pagination
+        if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW) ||
+            ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareListMobileView))
+            return false;
+        var groupAttributeDS = structure.find(function (eachDS) { return eachDS.id === groupId; });
+        return ((groupAttributeDS === null || groupAttributeDS === void 0 ? void 0 : groupAttributeDS.type) === "list" &&
+            ((_d = (_c = groupAttributeDS.listSelection) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0);
+    };
     var renderResolvedPaginationType = function () {
         var _a;
         if ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.paginationType)
@@ -8564,6 +8662,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var renderScrollSentinel = function () {
         if (!renderCheckScrollMode())
             return null;
+        // INFO: when every group pages itself, the single global bottom sentinel is
+        // suppressed to avoid a competing "load the whole list" fire. Any other
+        // grouping keeps it, so rows of groups not loaded yet stay reachable.
+        if (renderCheckGroupPaging())
+            return null;
         if (renderCheckScrollExhausted())
             return null;
         // INFO: only show the append spinner once we already have rows. On the
@@ -8750,11 +8853,29 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // INFO: for NewTable, groupBy stays inside one table — rows are handed over
     // as coloured, collapsible bands keyed the same way the legacy split is
     var handleBuildNewTableGroups = function () {
-        var _a;
+        var _a, _b;
         if (!groupId || !((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW))
             return undefined;
         var groupAttributeDS = structure.find(function (eachDS) { return eachDS.id === groupId; });
+        var isGroupPaging = renderCheckGroupPaging();
+        var listSelection = (_b = groupAttributeDS === null || groupAttributeDS === void 0 ? void 0 : groupAttributeDS.listSelection) !== null && _b !== void 0 ? _b : [];
         var groups = [];
+        // INFO: with per-group paging every option is a band from the start, even
+        // with no row loaded yet, so its sentinel can load it; "Unknown/No Value"
+        // holds every value outside the options, matching its "!in" query
+        if (isGroupPaging)
+            __spreadArray(__spreadArray([], listSelection, true), ["Unknown/No Value"], false).forEach(function (key, optionIndex) {
+                var _a, _b;
+                return groups.push({
+                    id: key,
+                    title: key,
+                    colour: (_a = groupAttributeDS === null || groupAttributeDS === void 0 ? void 0 : groupAttributeDS.listSelectionColour) === null || _a === void 0 ? void 0 : _a[optionIndex],
+                    rowIds: [],
+                    count: ((_b = groupPageState[key]) === null || _b === void 0 ? void 0 : _b.fetched)
+                        ? groupPageState[key].size
+                        : undefined,
+                });
+            });
         (spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : []).forEach(function (eachData, index) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             // INFO: key off the raw row — the display row holds a Tag element for a
@@ -8771,6 +8892,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     rawValue && rawValue !== " - " && typeof rawValue !== "object"
                         ? String(rawValue)
                         : "Unknown/No Value";
+                if (isGroupPaging && !listSelection.includes(key))
+                    key = "Unknown/No Value";
             }
             var rowId = (_d = (_c = tableData === null || tableData === void 0 ? void 0 : tableData[index]) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : (_e = tableData === null || tableData === void 0 ? void 0 : tableData[index]) === null || _e === void 0 ? void 0 : _e._id;
             if (!rowId)
@@ -8790,8 +8913,212 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             group.rowIds.push(rowId);
         });
+        // INFO: a group whose own query came back empty has nothing to show
+        if (isGroupPaging)
+            return groups.filter(function (eachGroup) {
+                var _a, _b;
+                return eachGroup.rowIds.length > 0 ||
+                    !(((_a = groupPageState[eachGroup.id]) === null || _a === void 0 ? void 0 : _a.fetched) &&
+                        ((_b = groupPageState[eachGroup.id]) === null || _b === void 0 ? void 0 : _b.size) === 0);
+            });
         return groups;
     };
+    // INFO: a row's band under per-group paging — its option, or
+    // "Unknown/No Value" for any value outside the options (the "!in" query)
+    var handleResolveGroupKey = function (row) {
+        var _a, _b;
+        var listSelection = (_b = (_a = structure.find(function (eachDS) { return eachDS.id === groupId; })) === null || _a === void 0 ? void 0 : _a.listSelection) !== null && _b !== void 0 ? _b : [];
+        var value = groupId ? row === null || row === void 0 ? void 0 : row[groupId] : undefined;
+        return typeof value === "string" && listSelection.includes(value)
+            ? value
+            : "Unknown/No Value";
+    };
+    var handleSetGroupPageState = function (groupKey, state) {
+        return setGroupPageState(function (previous) {
+            var _a;
+            var _b;
+            var next = __assign(__assign({}, previous), (_a = {}, _a[groupKey] = __assign(__assign({}, ((_b = previous[groupKey]) !== null && _b !== void 0 ? _b : {
+                cursor: 0,
+                size: 0,
+                loadingMore: false,
+                exhausted: false,
+            })), state), _a));
+            groupPageStateRef.current = next;
+            return next;
+        });
+    };
+    // INFO: reads one page of ONE group from the same list endpoint, filters and
+    // sort the main read uses, scoped to that group, and runs it through the
+    // same prettifier so its rows carry the shape of every other row. Returns
+    // undefined when the list was re-read while the page was in flight.
+    var handleReadGroupPage = function (groupKey, cursor) { return __awaiter(void 0, void 0, void 0, function () {
+        var generation, groupAttributeDS, groupQuery, baseQuery, responseData, rawRows, count, prettierRows;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return __generator(this, function (_j) {
+            switch (_j.label) {
+                case 0:
+                    generation = groupPagingGenRef.current;
+                    groupAttributeDS = structure.find(function (eachDS) { return eachDS.id === groupId; });
+                    groupQuery = groupKey === "Unknown/No Value"
+                        ? [
+                            {
+                                type: "!in",
+                                queryId: groupId !== null && groupId !== void 0 ? groupId : "",
+                                value: (_a = groupAttributeDS === null || groupAttributeDS === void 0 ? void 0 : groupAttributeDS.listSelection) !== null && _a !== void 0 ? _a : [],
+                            },
+                        ]
+                        : [{ type: "=", queryId: groupId !== null && groupId !== void 0 ? groupId : "", value: groupKey }];
+                    baseQuery = (_b = renderImpSearchFilterConditions()) !== null && _b !== void 0 ? _b : [];
+                    return [4 /*yield*/, readServerQuery.call({
+                            type: "list",
+                            query: __spreadArray(__spreadArray([], baseQuery, true), groupQuery, true),
+                            cursor: cursor,
+                            limit: limit,
+                            sort: handleReadQueryHocSort(baseQuery),
+                        })];
+                case 1:
+                    responseData = _j.sent();
+                    if (generation !== groupPagingGenRef.current)
+                        return [2 /*return*/, undefined];
+                    rawRows = (_c = responseData === null || responseData === void 0 ? void 0 : responseData.data) !== null && _c !== void 0 ? _c : [];
+                    count = (_d = responseData === null || responseData === void 0 ? void 0 : responseData.count) !== null && _d !== void 0 ? _d : 0;
+                    prettierRows = [];
+                    if (!(rawRows.length > 0)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, (0, listModule_1.handleListDataBasedOnModel)(rawRows, props.devSettings, (_e = props.lib) === null || _e === void 0 ? void 0 : _e.axios, structure, (_f = props.organise) === null || _f === void 0 ? void 0 : _f.handleNavigate, setActivityModal, setActivityId, isActivityLog ? (_g = props.edit) === null || _g === void 0 ? void 0 : _g.activityLog : undefined, (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareListActionBtns, !canUpdateRecord, undefined, handleSeedListReferenceOptions)];
+                case 2:
+                    prettierRows = _j.sent();
+                    rawRows.forEach(function (eachData) {
+                        // INFO: normalise _id -> id to match the shape the main list carries
+                        if (eachData["_id"]) {
+                            eachData["id"] = eachData["_id"];
+                            delete eachData["_id"];
+                        }
+                    });
+                    _j.label = 3;
+                case 3:
+                    if (generation !== groupPagingGenRef.current)
+                        return [2 /*return*/, undefined];
+                    return [2 /*return*/, { rawRows: rawRows, prettierRows: prettierRows, count: count }];
+            }
+        });
+    }); };
+    // INFO: scroll mode — appends the NEXT page of ONE group to the shared flat
+    // tableData / spaceTableData, so handleBuildNewTableGroups() keeps building
+    // bands from one source; each group advances its own cursor
+    var handleFetchGroupNextPage = function (groupKey) { return __awaiter(void 0, void 0, void 0, function () {
+        var current, cursor, generation, page_1, existingIds_1, appendRaw_1, appendPretty_1, nextCursor, err_30;
+        var _a, _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
+                case 0:
+                    if (!renderCheckGroupPaging() || !renderCheckScrollMode())
+                        return [2 /*return*/];
+                    current = groupPageStateRef.current[groupKey];
+                    if ((current === null || current === void 0 ? void 0 : current.loadingMore) || (current === null || current === void 0 ? void 0 : current.exhausted))
+                        return [2 /*return*/];
+                    cursor = (_d = (_a = current === null || current === void 0 ? void 0 : current.cursor) !== null && _a !== void 0 ? _a : (_c = ((_b = handleBuildNewTableGroups()) !== null && _b !== void 0 ? _b : []).find(function (eachGroup) { return eachGroup.id === groupKey; })) === null || _c === void 0 ? void 0 : _c.rowIds.length) !== null && _d !== void 0 ? _d : 0;
+                    generation = groupPagingGenRef.current;
+                    handleSetGroupPageState(groupKey, { cursor: cursor, loadingMore: true });
+                    _e.label = 1;
+                case 1:
+                    _e.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, handleReadGroupPage(groupKey, cursor)];
+                case 2:
+                    page_1 = _e.sent();
+                    if (!page_1)
+                        return [2 /*return*/];
+                    existingIds_1 = new Set(tableDataRef.current.map(function (eachRow) { var _a; return (_a = eachRow.id) !== null && _a !== void 0 ? _a : eachRow._id; }));
+                    appendRaw_1 = [];
+                    appendPretty_1 = [];
+                    page_1.rawRows.forEach(function (eachRow, eachIndex) {
+                        var _a;
+                        if (existingIds_1.has((_a = eachRow.id) !== null && _a !== void 0 ? _a : eachRow._id))
+                            return;
+                        appendRaw_1.push(eachRow);
+                        appendPretty_1.push(page_1.prettierRows[eachIndex]);
+                    });
+                    handleSetListData(tableDataRef.current.concat(appendRaw_1), spaceTableDataRef.current.concat(appendPretty_1));
+                    nextCursor = cursor + page_1.rawRows.length;
+                    handleSetGroupPageState(groupKey, {
+                        cursor: nextCursor,
+                        size: page_1.count,
+                        loadingMore: false,
+                        fetched: true,
+                        exhausted: page_1.rawRows.length === 0 || nextCursor >= page_1.count,
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_30 = _e.sent();
+                    if (generation !== groupPagingGenRef.current)
+                        return [2 /*return*/];
+                    // INFO: clear the in-flight flag so a failed page can be retried on the
+                    // next scroll rather than wedging the band in a loading state
+                    handleSetGroupPageState(groupKey, { loadingMore: false });
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    // INFO: page mode — swaps ONE group's rows for its page `page`; every other
+    // group keeps the page it is on
+    var handleFetchGroupPage = function (groupKey, page) { return __awaiter(void 0, void 0, void 0, function () {
+        var generation, result, keptRaw_1, keptPretty_1, loaded, err_31;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!renderCheckGroupPaging() || renderCheckScrollMode())
+                        return [2 /*return*/];
+                    generation = groupPagingGenRef.current;
+                    handleSetGroupPageState(groupKey, { loadingMore: true });
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, handleReadGroupPage(groupKey, page * limit)];
+                case 2:
+                    result = _a.sent();
+                    if (!result)
+                        return [2 /*return*/];
+                    keptRaw_1 = [];
+                    keptPretty_1 = [];
+                    tableDataRef.current.forEach(function (eachRow, eachIndex) {
+                        if (handleResolveGroupKey(eachRow) === groupKey)
+                            return;
+                        keptRaw_1.push(eachRow);
+                        keptPretty_1.push(spaceTableDataRef.current[eachIndex]);
+                    });
+                    handleSetListData(keptRaw_1.concat(result.rawRows), keptPretty_1.concat(result.prettierRows));
+                    loaded = page * limit + result.rawRows.length;
+                    handleSetGroupPageState(groupKey, {
+                        page: page,
+                        cursor: loaded,
+                        size: result.count,
+                        loadingMore: false,
+                        fetched: true,
+                        exhausted: loaded >= result.count,
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_31 = _a.sent();
+                    if (generation !== groupPagingGenRef.current)
+                        return [2 /*return*/];
+                    handleSetGroupPageState(groupKey, { loadingMore: false });
+                    return [3 /*break*/, 4];
+                case 4: return [2 /*return*/];
+            }
+        });
+    }); };
+    // INFO: page mode — after each fresh read every band reads its own first
+    // page, so each shows its real total and pages on its own
+    var handleLoadGroupFirstPages = function () {
+        var _a, _b;
+        groupPagingGenRef.current += 1;
+        groupPageStateRef.current = {};
+        setGroupPageState({});
+        var listSelection = (_b = (_a = structure.find(function (eachDS) { return eachDS.id === groupId; })) === null || _a === void 0 ? void 0 : _a.listSelection) !== null && _b !== void 0 ? _b : [];
+        __spreadArray(__spreadArray([], listSelection, true), ["Unknown/No Value"], false).forEach(function (groupKey) {
+            return handleFetchGroupPage(groupKey, 0);
+        });
+    };
     var renderGroupTable = function (multipleSelect) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29;
         if (groupId && !((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW)) {
@@ -8915,11 +9242,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }, onObjectEdit: handleObjectCellEdit, addable: {
                                 active: ((_u = props.edit) === null || _u === void 0 ? void 0 : _u.listAddable) ? true : false,
                                 onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                                    var createdId;
                                     return __generator(this, function (_a) {
                                         switch (_a.label) {
                                             case 0: return [4 /*yield*/, handleSubmitData("create", "", "", data)];
                                             case 1:
-                                                _a.sent();
+                                                createdId = _a.sent();
+                                                if (!createdId)
+                                                    throw new Error("Create failed");
                                                 return [2 /*return*/];
                                         }
                                     });
@@ -8931,7 +9261,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         else {
             // INFO: when bareNewDTW is enabled, render NewTable instead of legacy Table
             if ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareNewDTW) {
-                return (react_1.default.createElement(newTable_1.NewTable, { darkModeBg: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkModeBg, showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, groups: handleBuildNewTableGroups(), size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.disableSelectFullData) === null || _e === void 0 ? void 0 : _e.table, maxSelectedCount: (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListMaxSelectedCount, mobileView: (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListMobileView, mobileTooltip: (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareMobileTooltip, multiActionFloatingBtns: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (canBatchUpdate &&
+                return (react_1.default.createElement(newTable_1.NewTable, { darkModeBg: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkModeBg, showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, groups: handleBuildNewTableGroups(), 
+                    // INFO: per-group paging — scroll appends inside a band, page
+                    // mode gives each band its own pager; undefined = bands as before
+                    onGroupLoadMore: renderCheckGroupPaging() && renderCheckScrollMode()
+                        ? function (groupKey) { return handleFetchGroupNextPage(groupKey); }
+                        : undefined, onGroupPageChange: renderCheckGroupPaging() && !renderCheckScrollMode()
+                        ? function (groupKey, page) {
+                            return handleFetchGroupPage(groupKey, page);
+                        }
+                        : undefined, groupLoadingStatus: renderCheckGroupPaging() ? groupPageState : undefined, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.disableSelectFullData) === null || _e === void 0 ? void 0 : _e.table, maxSelectedCount: (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListMaxSelectedCount, mobileView: (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListMobileView, mobileTooltip: (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareMobileTooltip, multiActionFloatingBtns: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (canBatchUpdate &&
                         !((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareHideTableExtraMultipleAction)
                         ? [
                             {
@@ -9063,16 +9402,23 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }, onObjectEdit: handleObjectCellEdit, addable: {
                         active: ((_5 = props.edit) === null || _5 === void 0 ? void 0 : _5.listAddable) ? true : false,
                         onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                            var createdId;
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
                                     case 0: return [4 /*yield*/, handleSubmitData("create", "", "", data)];
                                     case 1:
-                                        _a.sent();
+                                        createdId = _a.sent();
+                                        if (!createdId)
+                                            throw new Error("Create failed");
                                         return [2 /*return*/];
                                 }
                             });
                         }); },
-                    }, darkMode: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.darkMode, hidePagination: (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.disableEllipsisOnLongWord, pinColumns: (_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareListTablePinColumns }));
+                    }, darkMode: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.darkMode, 
+                    // INFO: each band pages itself, so the list-wide pager would only
+                    // page the read that seeded them
+                    hidePagination: ((_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.hidePagination) ||
+                        (renderCheckGroupPaging() && !renderCheckScrollMode()), customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.disableEllipsisOnLongWord, pinColumns: (_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareListTablePinColumns }));
             }
             return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_11 = (_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.disableSelectFullData) === null || _11 === void 0 ? void 0 : _11.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                     selectedIds.length > 0 &&
@@ -9157,11 +9503,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }, onObjectEdit: handleObjectCellEdit, addable: {
                     active: ((_26 = props.edit) === null || _26 === void 0 ? void 0 : _26.listAddable) ? true : false,
                     onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
+                        var createdId;
                         return __generator(this, function (_a) {
                             switch (_a.label) {
                                 case 0: return [4 /*yield*/, handleSubmitData("create", "", "", data)];
                                 case 1:
-                                    _a.sent();
+                                    createdId = _a.sent();
+                                    if (!createdId)
+                                        throw new Error("Create failed");
                                     return [2 /*return*/];
                             }
                         });
@@ -10719,7 +11068,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var _a, _b;
                 return (react_1.default.createElement(activityModal_1.ActivityModal, { title: props.title && typeof props.title === "string"
                         ? props.title
-                        : "this collection", devSettings: props.devSettings, collectionId: props.collectionId, dataId: resolvedType === "read" ? ((_a = props.id) !== null && _a !== void 0 ? _a : "") : activityId, activityLog: (_b = props.edit) === null || _b === void 0 ? void 0 : _b.activityLog }));
+                        : "this collection", devSettings: props.devSettings, collectionId: props.collectionId, dataId: resolvedType === "read" ? ((_a = props.id) !== null && _a !== void 0 ? _a : "") : activityId, activityLog: (_b = props.edit) === null || _b === void 0 ? void 0 : _b.activityLog, model: structure }));
             }, maxWidth: "4xl", onClose: function () {
                 setActivityModal(false);
                 setActivityId("");