blixify-ui-web 1.2.3 → 1.2.4

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

@@ -326,6 +326,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var _126 = (0, react_1.useState)(false), offlineModal = _126[0], setOfflineModal = _126[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
+    var scrollSentinelRef = (0, react_1.useRef)(null);
+    var scrollSentinelDebounce = (0, react_1.useRef)(false);
     // INFO: captures the doc exactly as loaded from the server — used by
     // bareUpsertPartialUpdate to diff only the fields the user actually changed.
     // Intentionally separate from previousSelectedData, which advances on every
@@ -522,6 +524,45 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         /* eslint-disable */
     }, [props.collectionId]);
     /* eslint-enable */
+    // INFO: scroll-mode auto-pagination. Observes a sentinel below the list;
+    // when it enters the viewport we fire handlePagination("next"). End-of-list
+    // is per-backend — Firebase relies on cursor presence; non-Firebase uses
+    // size returned by the server. Debounce ref prevents repeat fires while a
+    // page is in flight; it resets whenever tableData length changes.
+    (0, react_1.useEffect)(function () {
+        var isScrollMode = renderCheckScrollMode();
+        if (!isScrollMode)
+            return;
+        var sentinel = scrollSentinelRef.current;
+        if (!sentinel)
+            return;
+        if (renderCheckScrollExhausted())
+            return;
+        var observer = new IntersectionObserver(function (entries) {
+            var _a;
+            if (((_a = entries[0]) === null || _a === void 0 ? void 0 : _a.isIntersecting) &&
+                !scrollSentinelDebounce.current &&
+                !tableLoading) {
+                scrollSentinelDebounce.current = true;
+                handlePagination("next");
+            }
+        }, { rootMargin: "200px", threshold: 0 });
+        observer.observe(sentinel);
+        return function () { return observer.disconnect(); };
+        /* eslint-disable */
+    }, [
+        viewType,
+        selectedTab,
+        tableData.length,
+        size,
+        cursor,
+        tableLoading,
+        isFirebase,
+    ]);
+    /* eslint-enable */
+    (0, react_1.useEffect)(function () {
+        scrollSentinelDebounce.current = false;
+    }, [tableData.length]);
     //INFO : Change Data Type & ID Refresh
     (0, react_1.useEffect)(function () {
         var _a, _b, _c;
@@ -1016,8 +1057,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     var handlePagination = function (value) {
         var _a, _b, _c, _d, _e, _f;
-        var isGridScroll = renderCheckGridScroll();
-        if (!isFirebase && !isGridScroll) {
+        var isScrollMode = renderCheckScrollMode();
+        if (!isFirebase && !isScrollMode) {
             setTableLoading(true);
             handleSetListData([], []);
         }
@@ -1027,20 +1068,22 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
         else {
             if (value === "next") {
-                //INFO : Retrieve latest cursor data from Firebase only
-                if ((isFirebase || isGridScroll) &&
+                // INFO: cursor advance for Firebase and for scroll-mode append
+                if ((isFirebase || isScrollMode) &&
                     cursor &&
                     (pageIndex + 1) * limit + 1 > tableData.length) {
                     setLastCursor(cursor);
-                    if (!isGridScroll) {
+                    if (!isScrollMode) {
                         setTableLoading(true);
                     }
                 }
-                setPageIndex(pageIndex + 1);
+                // INFO: functional updater so rapid observer-driven calls in scroll mode
+                // chain correctly (0 → 1 → 2) instead of all bumping from a stale closure value
+                setPageIndex(function (p) { return p + 1; });
                 (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.onChangePagination) === null || _d === void 0 ? void 0 : _d.call(_c, pageIndex + 1);
             }
             else {
-                setPageIndex(pageIndex - 1);
+                setPageIndex(function (p) { return p - 1; });
                 (_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.onChangePagination) === null || _f === void 0 ? void 0 : _f.call(_e, pageIndex - 1);
             }
         }
@@ -1090,16 +1133,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var handleGetListData = function (responseData, type, rowId) { return __awaiter(void 0, void 0, void 0, function () {
-        var dataList, prettierDataList, clonedTableData, clonedSpaceTableData, dummyPrettierDataList_1, selectedIndex_1, isGridScroll, newTableData, newPrettierTableData, isExists, cursorResp, lastDataId, err_1;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return __generator(this, function (_o) {
-            switch (_o.label) {
+        var dataList, prettierDataList, clonedTableData, clonedSpaceTableData, dummyPrettierDataList_1, selectedIndex_1, isScrollMode, newTableData, newPrettierTableData, isExists, cursorResp, lastDataId, err_1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        return __generator(this, function (_p) {
+            switch (_p.label) {
                 case 0:
                     dataList = [];
                     prettierDataList = [];
-                    _o.label = 1;
+                    _p.label = 1;
                 case 1:
-                    _o.trys.push([1, 6, , 7]);
+                    _p.trys.push([1, 6, , 7]);
                     clonedTableData = JSON.parse(JSON.stringify(tableData));
                     clonedSpaceTableData = JSON.parse(JSON.stringify(spaceTableData));
                     if (!(responseData === null || responseData === void 0 ? void 0 : responseData.data)) return [3 /*break*/, 5];
@@ -1116,7 +1159,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [3 /*break*/, 4];
                 case 2: return [4 /*yield*/, (0, listModule_1.handleListDataBasedOnModel)(responseData === null || responseData === void 0 ? void 0 : responseData.data, props.devSettings, (_c = props.lib) === null || _c === void 0 ? void 0 : _c.axios, structure, (_d = props.organise) === null || _d === void 0 ? void 0 : _d.handleNavigate, ((_e = props.organise) === null || _e === void 0 ? void 0 : _e.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_f = props.edit) === null || _f === void 0 ? void 0 : _f.activityLog : undefined, (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListActionBtns, (_h = props.edit) === null || _h === void 0 ? void 0 : _h.disabledUpdate)];
                 case 3:
-                    prettierDataList = _o.sent();
+                    prettierDataList = _p.sent();
                     if (props.groupId) {
                         prettierDataList.forEach(function (item, idx) {
                             var _a, _b;
@@ -1125,7 +1168,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }
-                    _o.label = 4;
+                    _p.label = 4;
                 case 4:
                     (_j = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _j === void 0 ? void 0 : _j.map(function (eachData) {
                         if (eachData["_id"]) {
@@ -1135,7 +1178,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                     });
                     dataList = responseData.data;
-                    _o.label = 5;
+                    _p.label = 5;
                 case 5:
                     if (type === "update" || type === "create") {
                         try {
@@ -1160,8 +1203,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         catch (err) { }
                     }
                     else {
-                        isGridScroll = renderCheckGridScroll();
-                        if (!isGridScroll && !isFirebase) {
+                        isScrollMode = renderCheckScrollMode();
+                        if (!isScrollMode && !isFirebase) {
                             handleSetListData(dataList, prettierDataList);
                             setSize((_m = responseData.count) !== null && _m !== void 0 ? _m : 0);
                         }
@@ -1184,7 +1227,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             handleSetListData(newTableData, newPrettierTableData);
                             setSize(newTableData.length);
                             cursorResp = responseData.count;
-                            if (isGridScroll) {
+                            if (isScrollMode) {
                                 if (dataList.length === 0)
                                     cursorResp = "";
                                 else {
@@ -1193,11 +1236,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 }
                             }
                             setCursor(cursorResp);
+                            if (isScrollMode && !isFirebase) {
+                                setSize((_o = responseData.count) !== null && _o !== void 0 ? _o : 0);
+                            }
                         }
                     }
                     return [3 /*break*/, 7];
                 case 6:
-                    err_1 = _o.sent();
+                    err_1 = _p.sent();
                     return [3 /*break*/, 7];
                 case 7:
                     setTableLoading(false);
@@ -5334,7 +5380,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             authList));
     };
     var renderContent = function () {
-        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;
+        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;
         var isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
         var tabs = renderTabs();
         var pages = [
@@ -5369,9 +5415,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         renderBreadcrumb(pages),
                         react_1.default.createElement("div", null,
                             react_1.default.createElement("div", { className: "flex flex-col justify-between sm:py-2 sm:items-center sm:flex-row" },
-                                react_1.default.createElement("div", { className: "flex flex-col" },
-                                    react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
-                                    react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
+                                (props.title || props.description) && (react_1.default.createElement("div", { className: "flex flex-col" },
+                                    props.title && (react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title)),
+                                    props.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
                                 !isBottom && renderActionButtons(props.type))),
                         (schemaPresent || ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_j = props.organise) === null || _j === void 0 ? void 0 : _j.darkMode })),
                         ((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareReadComponentPos) === "top" &&
@@ -5559,9 +5605,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }, offline: (_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareOffline, onChangeData: handleRetrieveSelectedData, onError: handleGetItemError })),
                     renderBreadcrumb(pages),
                     react_1.default.createElement("div", { className: "flex flex-col py-2 sm:items-center sm:flex-row" },
-                        react_1.default.createElement("div", { className: "flex flex-col w-full" },
-                            react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
-                            react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
+                        (props.title || props.description) && (react_1.default.createElement("div", { className: "flex flex-col w-full" },
+                            props.title && (react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title)),
+                            props.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
                         !isBottom &&
                             renderActionButtons(props.type, false, hasTabAlign_1, uniqueTabIds_2)),
                     hasTabAlign_1 ? (react_1.default.createElement("div", { className: "w-full ".concat(leftTabAlign
@@ -5637,14 +5683,30 @@ 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;
-                    // INFO: When bareListFilterAsPopup is true, filters are shown in a popup instead
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                    // 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;
+                    // INFO: bareCompactMode keeps the list-view chrome to a single row —
+                    // tuck the additionalQuery selectors behind the funnel popup but
+                    // render the search input inline (last element of filterComponent
+                    // is the Search box from renderSearchFilterComponents). Use a
+                    // shrinkable fixed width so the search box stays on the same row
+                    // as the action icons at every viewport.
+                    if ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode) {
+                        if (filterComponent_1 &&
+                            Array.isArray(filterComponent_1) &&
+                            filterComponent_1.length > 0 &&
+                            !((_c = props.organise) === null || _c === void 0 ? void 0 : _c.hideSearch)) {
+                            var searchInput = filterComponent_1[filterComponent_1.length - 1];
+                            return (react_1.default.createElement("div", { className: "flex-1 sm:flex-none sm:w-64 min-w-0 mr-3" }, searchInput));
+                        }
+                        return null;
+                    }
                     var filterElementList = [];
-                    if (!((_b = props.organise) === null || _b === void 0 ? void 0 : _b.filterComponentNewRow)) {
-                        if ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_j = (_f = (_e = (_d = props === null || props === void 0 ? void 0 : props.organise) === null || _d === void 0 ? void 0 : _d.renderGroupByOptions) === null || _e === void 0 ? void 0 : _e.call(_d)) !== null && _f !== void 0 ? _f : (_h = (_g = props === null || props === void 0 ? void 0 : props.organise) === null || _g === void 0 ? void 0 : _g.renderReferenceLabelOptions) === null || _h === void 0 ? void 0 : _h.call(_g, props.collectionId, true)) !== null && _j !== void 0 ? _j : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                    if (!((_d = props.organise) === null || _d === void 0 ? void 0 : _d.filterComponentNewRow)) {
+                        if ((_e = props.organise) === null || _e === void 0 ? void 0 : _e.showGroupByFeature) {
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_l = (_h = (_g = (_f = props === null || props === void 0 ? void 0 : props.organise) === null || _f === void 0 ? void 0 : _f.renderGroupByOptions) === null || _g === void 0 ? void 0 : _g.call(_f)) !== null && _h !== void 0 ? _h : (_k = (_j = props === null || props === void 0 ? void 0 : props.organise) === null || _j === void 0 ? void 0 : _j.renderReferenceLabelOptions) === null || _k === void 0 ? void 0 : _k.call(_j, props.collectionId, true)) !== null && _l !== void 0 ? _l : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -5659,7 +5721,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                 };
                 var renderListActionElements = function () {
-                    var _a, _b, _c, _d;
+                    var _a, _b, _c, _d, _e, _f, _g;
                     var actionElementList = [];
                     if (schemaPresent) {
                         actionElementList.push(react_1.default.createElement(react_1.default.Fragment, null,
@@ -5677,25 +5739,35 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     handleRefresh();
                                 }, bgColor: "bg-white" })));
                     }
-                    if (((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup) &&
+                    if ((((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup) ||
+                        ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode)) &&
                         filterComponent_1 &&
                         Array.isArray(filterComponent_1) &&
                         filterComponent_1.length > 0) {
-                        actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg p-4 flex flex-col space-y-3 w-[calc(100vw-2rem)] max-w-[320px]" }, filterComponent_1.map(function (filterEl, index) { return (react_1.default.createElement("div", { key: index }, filterEl)); })), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_b = props === null || props === void 0 ? void 0 : props.lib) === null || _b === void 0 ? void 0 : _b.Transition } }));
+                        // INFO: in compact mode, the search input is rendered inline by
+                        // renderListFilterElements, so drop the trailing search element
+                        // from the popup to avoid duplication.
+                        var popupFilters = ((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareCompactMode) &&
+                            !((_d = props.organise) === null || _d === void 0 ? void 0 : _d.hideSearch)
+                            ? filterComponent_1.slice(0, -1)
+                            : filterComponent_1;
+                        if (popupFilters.length > 0) {
+                            actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg p-4 flex flex-col space-y-3 w-[calc(100vw-2rem)] max-w-[320px]" }, popupFilters.map(function (filterEl, index) { return (react_1.default.createElement("div", { key: index }, filterEl)); })), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_e = props === null || props === void 0 ? void 0 : props.lib) === null || _e === void 0 ? void 0 : _e.Transition } }));
+                        }
                     }
                     if (!isBottom) {
                         var actionBtns = renderActionButtons(props.type);
                         if (actionBtns)
                             actionElementList.push(actionBtns);
                     }
-                    if (schemaPresent || ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.showExport)) {
+                    if (schemaPresent || ((_f = props.organise) === null || _f === void 0 ? void 0 : _f.showExport)) {
                         actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
                             //TODO: Bug - Crash on Next Js
                             // <Menu.Item>
                             react_1.default.createElement("span", { className: "block w-40 py-3 text-sm text-center text-gray-700 cursor-pointer hover:bg-gray-100", onClick: eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.onClick }, eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.text)
                             // </Menu.Item>
                             ); })), lib: {
-                                Transition: (_d = props === null || props === void 0 ? void 0 : props.lib) === null || _d === void 0 ? void 0 : _d.Transition,
+                                Transition: (_g = props === null || props === void 0 ? void 0 : props.lib) === null || _g === void 0 ? void 0 : _g.Transition,
                             } }));
                     }
                     if (actionElementList.length > 0) {
@@ -5705,11 +5777,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                 };
                 var renderListNewRowFilterElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                     var filterElementList = [];
-                    if ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.filterComponentNewRow) {
+                    // INFO: bareCompactMode + bareListFilterAsPopup both tuck filters
+                    // behind the popup, so skip the new-row render path too.
+                    if (((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterAsPopup) ||
+                        ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode)) {
+                        return filterElementList;
+                    }
+                    if ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.filterComponentNewRow) {
                         if (props.organise.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_g = (_d = (_c = (_b = props === null || props === void 0 ? void 0 : props.organise) === null || _b === void 0 ? void 0 : _b.renderGroupByOptions) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : (_f = (_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.renderReferenceLabelOptions) === null || _f === void 0 ? void 0 : _f.call(_e, props.collectionId, true)) !== null && _g !== void 0 ? _g : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_j = (_f = (_e = (_d = props === null || props === void 0 ? void 0 : props.organise) === null || _d === void 0 ? void 0 : _d.renderGroupByOptions) === null || _e === void 0 ? void 0 : _e.call(_d)) !== null && _f !== void 0 ? _f : (_h = (_g = props === null || props === void 0 ? void 0 : props.organise) === null || _g === void 0 ? void 0 : _g.renderReferenceLabelOptions) === null || _h === void 0 ? void 0 : _h.call(_g, props.collectionId, true)) !== null && _j !== void 0 ? _j : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -5730,15 +5808,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 };
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     listReadQueryHOC,
-                    react_1.default.createElement("div", { className: "flex flex-col py-2 md:items-end md:flex-row" },
-                        react_1.default.createElement("div", { className: "flex flex-col" },
-                            react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title),
-                            react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)),
-                        react_1.default.createElement("div", { className: "grow" }),
+                    react_1.default.createElement("div", { className: "flex py-2 ".concat(((_23 = props.bareSettings) === null || _23 === void 0 ? void 0 : _23.bareCompactMode)
+                            ? "w-full flex-row items-end"
+                            : "flex-col md:items-end md:flex-row") },
+                        (props.title || props.description) && (react_1.default.createElement("div", { className: "flex flex-col" },
+                            props.title && (react_1.default.createElement("p", { className: "text-xl font-medium" }, props.title)),
+                            props.description && (react_1.default.createElement("span", { className: "text-sm text-gray-500" }, props.description)))),
+                        react_1.default.createElement("div", { className: ((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareCompactMode)
+                                ? "hidden sm:block grow"
+                                : "grow" }),
                         renderListFilterElements(),
                         renderListActionElements()),
                     renderListNewRowFilterElements(),
-                    (schemaPresent || ((_23 = props.bareSettings) === null || _23 === void 0 ? void 0 : _23.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.darkMode })),
+                    (schemaPresent || ((_25 = props.bareSettings) === null || _25 === void 0 ? void 0 : _25.bareReadListTabs)) && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.darkMode })),
                     renderTabContent(tabs, props.type, viewType),
                     isBottom && renderActionButtons(props.type, true)));
             default:
@@ -5989,20 +6071,48 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
         return gridData;
     };
-    var renderCheckGridScroll = function () {
-        var tabs = renderTabs();
-        var selectedTabData = tabs.find(function (eachTab) {
-            if (eachTab.id === viewType) {
-                return eachTab;
-            }
-            else {
-                return null;
-            }
-        });
-        if (selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.infinityScroll)
-            return true;
-        else
+    // INFO: paginationType is a DTW-level concern, not a per-tab concern.
+    // Set `organise.paginationType` once and it applies to every tab (Table,
+    // List, Feeds, Grid, etc.) inside this DataTemplate.
+    var renderCheckScrollMode = function () {
+        var _a;
+        return ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.paginationType) === "scroll";
+    };
+    var renderResolvedPaginationType = function () {
+        var _a;
+        if ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.paginationType)
+            return props.organise.paginationType;
+        return isFirebase ? "cursor" : "page";
+    };
+    // INFO: post-fetch empty result is treated as exhausted to prevent an infinite
+    // observer re-fire loop (sentinel stays visible against an empty list).
+    var renderCheckScrollExhausted = function () {
+        var hasFetched = !tableLoading;
+        if (isFirebase) {
+            if (!cursor && tableData.length > 0)
+                return true;
+            if (hasFetched && tableData.length === 0)
+                return true;
             return false;
+        }
+        if (size > 0 && tableData.length >= size)
+            return true;
+        if (hasFetched && size === 0 && tableData.length === 0)
+            return true;
+        return false;
+    };
+    var renderScrollSentinel = function () {
+        if (!renderCheckScrollMode())
+            return null;
+        if (renderCheckScrollExhausted())
+            return null;
+        // INFO: only show the append spinner once we already have rows. On the
+        // first load the view's own empty-state spinner is enough — rendering
+        // ours too would mean two spinners on screen at the same time.
+        var showAppendSpinner = tableLoading && tableData.length > 0;
+        return (react_1.default.createElement("div", { className: "w-full flex flex-col items-center py-4" },
+            showAppendSpinner && react_1.default.createElement(loading_1.Loading, null),
+            react_1.default.createElement("div", { ref: scrollSentinelRef, className: "h-1 w-full" })));
     };
     var renderTabs = function () {
         var _a, _b, _c, _d, _e;
@@ -6016,7 +6126,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         if (((_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs) &&
             ((_b = props.organise.extendedTabs) === null || _b === void 0 ? void 0 : _b.length) > 0) {
             (_c = props.organise) === null || _c === void 0 ? void 0 : _c.extendedTabs.map(function (eachTab) {
-                var _a, _b, _c, _d, _e, _f;
+                var _a, _b, _c, _d, _e;
                 var hrefPoint = "".concat(props.localURLEndpoint, "?type=").concat(props.type, "&collection=").concat(props.collectionId);
                 if (props.id)
                     hrefPoint += "&data=".concat(props.id);
@@ -6028,11 +6138,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     type: eachTab.type,
                     viewType: eachTab.viewType,
                     viewImage: eachTab.viewImage,
-                    infinityScroll: (_a = eachTab.infinityScroll) !== null && _a !== void 0 ? _a : undefined,
-                    gridContain: (_b = eachTab.gridContain) !== null && _b !== void 0 ? _b : undefined,
-                    calendarSettings: (_c = eachTab.calendarSettings) !== null && _c !== void 0 ? _c : undefined,
-                    feedsSettings: (_d = eachTab.feedsSettings) !== null && _d !== void 0 ? _d : undefined,
-                    mapSettings: (_e = eachTab.mapSettings) !== null && _e !== void 0 ? _e : undefined,
+                    gridContain: (_a = eachTab.gridContain) !== null && _a !== void 0 ? _a : undefined,
+                    calendarSettings: (_b = eachTab.calendarSettings) !== null && _b !== void 0 ? _b : undefined,
+                    feedsSettings: (_c = eachTab.feedsSettings) !== null && _c !== void 0 ? _c : undefined,
+                    mapSettings: (_d = eachTab.mapSettings) !== null && _d !== void 0 ? _d : undefined,
                 };
                 if (eachTab.viewType === "iframe") {
                     if (typeof eachTab.src === "string") {
@@ -6046,7 +6155,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     tabData["viewImage"] = eachTab.viewImage;
                 }
                 if (eachTab.type === props.type) {
-                    tabs.push(__assign(__assign({}, tabData), (!((_f = props.edit) === null || _f === void 0 ? void 0 : _f.disabledTabsDeleteBtn) && {
+                    tabs.push(__assign(__assign({}, tabData), (!((_e = props.edit) === null || _e === void 0 ? void 0 : _e.disabledTabsDeleteBtn) && {
                         del: (react_1.default.createElement(outline_1.XMarkIcon, { className: "h-4 w-4 ml-2 self-center text-red-600 hover:text-red-400 ", onClick: function (e) {
                                 e.stopPropagation();
                                 e.preventDefault();
@@ -6110,7 +6219,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         react_1.default.createElement("div", { className: "font-semibold text-md mt-5" },
                             "Group By ",
                             eachKey),
-                        react_1.default.createElement(table_1.Table, { showId: showId, paginationType: isFirebase ? "cursor" : "page", data: filterTableData, spaceData: dataList !== null && dataList !== void 0 ? dataList : [], size: (_b = dataList.length) !== null && _b !== void 0 ? _b : 0, limit: 5, cursor: "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.disableSelectFullData) === null || _d === void 0 ? void 0 : _d.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                        react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: filterTableData, spaceData: dataList !== null && dataList !== void 0 ? dataList : [], size: (_b = dataList.length) !== null && _b !== void 0 ? _b : 0, limit: 5, cursor: "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.disableSelectFullData) === null || _d === void 0 ? void 0 : _d.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                                 selectedIds.length > 0 &&
                                     !((_e = props.edit) === null || _e === void 0 ? void 0 : _e.disabledUpdate) &&
                                     !((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -6192,7 +6301,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
         }
         else {
-            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: isFirebase ? "cursor" : "page", data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], 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: (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.disableSelectFullData) === null || _b === void 0 ? void 0 : _b.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], 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: (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.disableSelectFullData) === null || _b === void 0 ? void 0 : _b.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                     selectedIds.length > 0 &&
                         !((_c = props.edit) === null || _c === void 0 ? void 0 : _c.disabledUpdate) &&
                         !((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -6275,7 +6384,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var renderTabContent = function (tabs, dataType, viewType) {
-        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;
+        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;
         var selectedTabData = tabs.find(function (eachTab) {
             if (eachTab.id === viewType) {
                 return eachTab;
@@ -6338,6 +6447,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }
                     });
                     sortedTabs.forEach(function (eachTab) {
+                        var _a, _b;
                         var groups = groupedStructures_1[eachTab];
                         var sortedGroups = Object.keys(groups).sort(function (a, b) {
                             if (a === "Others")
@@ -6348,7 +6458,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                         var tabElement = [];
                         sortedGroups.forEach(function (eachKey) {
-                            var _a, _b;
+                            var _a, _b, _c;
                             var listObjModels = groups[eachKey].filter(function (eachModel) {
                                 return eachModel.type === "listObject" && !eachModel.hideRead;
                             });
@@ -6356,10 +6466,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             if ((Array.isArray(listData) && (listData === null || listData === void 0 ? void 0 : listData.length) > 0) ||
                                 listObjModels.length > 0) {
                                 tabElement.push(react_1.default.createElement("div", { key: "section-".concat(eachKey) },
-                                    Array.isArray(listData) && (listData === null || listData === void 0 ? void 0 : listData.length) > 0 && (react_1.default.createElement(detailList_1.DetailList, { model: groups[eachKey], referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: eachKey, list: listData, handleReferenceLink: !schemaPresent &&
-                                            ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareReadReferenceView)
+                                    Array.isArray(listData) && (listData === null || listData === void 0 ? void 0 : listData.length) > 0 && (react_1.default.createElement(detailList_1.DetailList, { model: groups[eachKey], referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: eachKey, list: listData, size: ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareCompactMode)
+                                            ? "compact"
+                                            : "default", handleReferenceLink: !schemaPresent &&
+                                            ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareReadReferenceView)
                                             ? props.bareSettings.bareReadReferenceView
-                                            : undefined, splitView: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.splitView })),
+                                            : undefined, splitView: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.splitView })),
                                     listObjModels.length > 0 && (react_1.default.createElement("div", { className: "px-6" }, renderListObject("read", listObjModels.map(function (eachModel) { return eachModel.id; }))))));
                             }
                         });
@@ -6379,8 +6491,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             readElement_1.push(react_1.default.createElement("div", { key: "tab-section-".concat(eachTab), ref: function (el) {
                                     readTabSectionRefs.current[eachTab] = el;
                                 } },
-                                hasTabs_1 && (react_1.default.createElement("div", { className: "bg-primary-500 p-4 rounded-lg mt-5" },
-                                    react_1.default.createElement("h2", { className: "text-white text-lg font-semibold" }, eachTab))),
+                                hasTabs_1 && (react_1.default.createElement("div", { className: "bg-primary-500 rounded-lg mt-5 ".concat(((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareCompactMode)
+                                        ? "px-4 py-2"
+                                        : "p-4") },
+                                    react_1.default.createElement("h2", { className: "text-white font-semibold ".concat(((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCompactMode)
+                                            ? "text-base"
+                                            : "text-lg") }, eachTab))),
                                 tabElement,
                                 allGanttCharts.length > 0 && (react_1.default.createElement("div", { className: "px-6" }, renderGanttChart("read", allGanttCharts.map(function (eachModel) { return eachModel.id; })))),
                                 allCanvas.length > 0 && (react_1.default.createElement("div", { className: "px-6" }, renderCanvas("read", allCanvas.map(function (eachModel) { return eachModel.id; }))))));
@@ -6422,9 +6538,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
                 else {
                     return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(detailList_1.DetailList, { model: structure, referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: "General Details", list: renderDetailListData(structure), handleReferenceLink: !schemaPresent && ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareReadReferenceView)
+                        react_1.default.createElement(detailList_1.DetailList, { model: structure, referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: "General Details", list: renderDetailListData(structure), size: ((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareCompactMode) ? "compact" : "default", handleReferenceLink: !schemaPresent && ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareReadReferenceView)
                                 ? props.bareSettings.bareReadReferenceView
-                                : undefined, splitView: (_h = props.organise) === null || _h === void 0 ? void 0 : _h.splitView }),
+                                : undefined, splitView: (_j = props.organise) === null || _j === void 0 ? void 0 : _j.splitView }),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(dataType)),
                         react_1.default.createElement("div", { className: "mt-8" }, renderListObject(dataType)),
                         react_1.default.createElement("div", { className: "mt-8" }, renderGanttChart(dataType)),
@@ -6433,53 +6549,53 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
         }
         else if (selectedTabData) {
-            if ((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareListComponent) {
+            if ((_k = props.bareSettings) === null || _k === void 0 ? void 0 : _k.bareListComponent) {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     props.bareSettings.bareListComponent(tableData, spaceTableData, tableLoading, pageIndex),
-                    !((_k = props.organise) === null || _k === void 0 ? void 0 : _k.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: isFirebase ? "cursor" : "page", handleUpdatePageIndex: function (value) {
+                    !((_l = props.organise) === null || _l === void 0 ? void 0 : _l.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, darkMode: (_l = props.organise) === null || _l === void 0 ? void 0 : _l.darkMode, customPaginationSize: customPaginationSize }))));
+                        }, darkMode: (_m = props.organise) === null || _m === void 0 ? void 0 : _m.darkMode, customPaginationSize: customPaginationSize }))));
             }
             else if (selectedTabData.viewType === "iframe") {
                 if (selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.customComponent) {
                     return selectedTabData.customComponent;
                 }
                 else {
-                    return (react_1.default.createElement("iframe", { id: "blixify-iframe", className: "w-full mt-5", style: { height: "70vh" }, src: (_m = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _m !== void 0 ? _m : "", title: (_o = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _o !== void 0 ? _o : "", onLoad: props.onLoadIframe }));
+                    return (react_1.default.createElement("iframe", { id: "blixify-iframe", className: "w-full mt-5", style: { height: "70vh" }, src: (_o = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _o !== void 0 ? _o : "", title: (_p = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _p !== void 0 ? _p : "", onLoad: props.onLoadIframe }));
                 }
             }
             else if (selectedTabData.viewType === "list") {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(list_1.List, { paginationType: isFirebase ? "cursor" : "page", list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_q = (_p = props.organise) === null || _p === void 0 ? void 0 : _p.disableSelectFullData) === null || _q === void 0 ? void 0 : _q.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
-                            selectedIds.length > 0 && !((_r = props.edit) === null || _r === void 0 ? void 0 : _r.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(list_1.List, { paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list"), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.disableSelectFullData) === null || _r === void 0 ? void 0 : _r.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                            selectedIds.length > 0 && !((_s = props.edit) === null || _s === void 0 ? void 0 : _s.disabledUpdate) && (react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Change to Draft", disable: loading, onClick: function () {
                                         handleBatchDraftData();
                                     } }),
                                 react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Clone Items", disable: loading, onClick: function () {
                                         handleCloneSelectedData();
                                     } }))),
-                            ((_s = props.edit) === null || _s === void 0 ? void 0 : _s.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                            ((_t = props.edit) === null || _t === void 0 ? void 0 : _t.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
                                     handleGenerateDeletePasscode();
                                     setDeleteModal(true);
                                 } })),
-                            !isFirebase && !((_t = props.edit) === null || _t === void 0 ? void 0 : _t.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                            !isFirebase && !((_u = props.edit) === null || _u === void 0 ? void 0 : _u.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                                     setBatchUpdateModal(true);
                                 } }))), onClickRow: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_v = (_u = props.newTabUrl) === null || _u === void 0 ? void 0 : _u.default) !== null && _v !== void 0 ? _v : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_x = (_w = props.newTabUrl) === null || _w === void 0 ? void 0 : _w.addons) !== null && _x !== void 0 ? _x : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_w = (_v = props.newTabUrl) === null || _v === void 0 ? void 0 : _v.default) !== null && _w !== void 0 ? _w : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_y = (_x = props.newTabUrl) === null || _x === void 0 ? void 0 : _x.addons) !== null && _y !== void 0 ? _y : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, className: "mt-5", hidePagination: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.hidePagination, customPaginationSize: customPaginationSize })));
+                        }, className: "mt-5", hidePagination: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.hidePagination, customPaginationSize: customPaginationSize })));
             }
             else if (selectedTabData.viewType === "grid") {
-                var isGridScroll = renderCheckGridScroll();
+                var isScrollMode = renderCheckScrollMode();
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(grid_1.Grid, { paginationType: isGridScroll || isFirebase ? "cursor" : "page", data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, infinityScroll: isGridScroll, horizontalScroll: isGridScroll, pageIndex: pageIndex, onClickData: function (id) {
+                    react_1.default.createElement(grid_1.Grid, { paginationType: renderResolvedPaginationType(), data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size, limit: limit, cursor: cursor, loading: tableLoading, horizontalScroll: isScrollMode, pageIndex: pageIndex, onClickData: function (id) {
                             var _a, _b;
                             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_0 = (_z = props.newTabUrl) === null || _z === void 0 ? void 0 : _z.default) !== null && _0 !== void 0 ? _0 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_2 = (_1 = props.newTabUrl) === null || _1 === void 0 ? void 0 : _1.addons) !== null && _2 !== void 0 ? _2 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: (_1 = (_0 = props.newTabUrl) === null || _0 === void 0 ? void 0 : _0.default) !== null && _1 !== void 0 ? _1 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_3 = (_2 = props.newTabUrl) === null || _2 === void 0 ? void 0 : _2.addons) !== null && _3 !== void 0 ? _3 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareListGridColClassName, className: "mt-5", hidePagination: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.hidePagination, customPaginationSize: customPaginationSize })));
+                        }, imgContain: selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.gridContain, gridColClassName: (_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareListGridColClassName, className: "mt-5", hidePagination: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.hidePagination, customPaginationSize: customPaginationSize })));
             }
             else if (selectedTabData.viewType === "calendar") {
                 var calendarSettings_1 = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.calendarSettings;
@@ -6573,7 +6689,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     return eventAvailabilities;
                 };
-                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(calendar_1.Calendar, { currentDate: calendarTabMonth, calendarView: (_5 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _5 !== void 0 ? _5 : calendarView, handleMonthChange: function (date) {
+                return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement(calendar_1.Calendar, { currentDate: calendarTabMonth, calendarView: (_6 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _6 !== void 0 ? _6 : calendarView, handleMonthChange: function (date) {
                         var startOfMonth = (0, dayjs_1.default)(calendarTabMonth).startOf("month");
                         var endOfMonth = (0, dayjs_1.default)(calendarTabMonth).endOf("month");
                         if (!(0, dayjs_1.default)(date).isBetween(startOfMonth, endOfMonth)) {
@@ -6591,7 +6707,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             else if (selectedTabData.viewType === "feeds") {
                 var contentList_1 = [];
                 var feedsSettings_1 = selectedTabData.feedsSettings;
-                var customFeedsData = (_6 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _6 === void 0 ? void 0 : _6.call(feedsSettings_1, tableData, spaceTableData);
+                var customFeedsData = (_7 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _7 === void 0 ? void 0 : _7.call(feedsSettings_1, tableData, spaceTableData);
                 if (customFeedsData && customFeedsData.length > 0) {
                     customFeedsData.map(function (eachData) {
                         var _a, _b, _c, _d;
@@ -6632,11 +6748,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     });
                 }
                 return (react_1.default.createElement("div", { className: "mt-4" }, tableLoading ? (react_1.default.createElement(loading_1.Loading, null)) : (react_1.default.createElement("div", { className: "p-4 bg-white rounded-lg" },
-                    react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.darkMode }),
+                    react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.darkMode }),
                     react_1.default.createElement("div", { className: "my-10" }),
-                    contentList_1.length > 0 && !((_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: isFirebase ? "cursor" : "page", handleUpdatePageIndex: function (value) {
+                    contentList_1.length > 0 && !((_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: renderResolvedPaginationType(), handleUpdatePageIndex: function (value) {
                             handlePagination(value);
-                        }, darkMode: (_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.darkMode, customPaginationSize: customPaginationSize }))))));
+                        }, darkMode: (_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.darkMode, customPaginationSize: customPaginationSize }))))));
             }
             else if (selectedTabData.viewType === "map") {
                 var mapSettings_1 = selectedTabData.mapSettings;
@@ -6735,7 +6851,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else if (selectedTabData.viewType === "kanban") {
                 var kanbanSettings = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.kanbanSettings;
-                var kanbanTitle_2 = (_10 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _10 !== void 0 ? _10 : "";
+                var kanbanTitle_2 = (_11 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _11 !== void 0 ? _11 : "";
                 var nullColumn_1 = false;
                 var groupBy_1 = [];
                 var groupLabel_1 = [];
@@ -7323,6 +7439,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 setActivityModal(false);
                 setActivityId("");
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) })),
-        renderContent()));
+        renderContent(),
+        renderScrollSentinel()));
 });
 //# sourceMappingURL=index.js.map