blixify-ui-web 0.4.0 → 0.4.2

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

@@ -139,7 +139,7 @@ var pagination_1 = require("./pagination");
 var referenceModal_1 = require("./referenceModal");
 var settingsModal_1 = require("./settingsModal");
 exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
-    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;
+    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;
     var formRef = (0, react_1.createRef)();
     var objectFormRef = (0, react_1.createRef)();
     var listAddressFromRef = (0, react_1.createRef)();
@@ -154,131 +154,150 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var typingTimeout = (0, react_1.useRef)();
     // const oldCollectionId: any = useRef();
     var mapViewRef = (0, react_1.useRef)();
-    var _8 = (0, react_1.useState)(false), loading = _8[0], setLoading = _8[1];
-    var _9 = (0, react_1.useState)(), notification = _9[0], setNotification = _9[1];
+    var _9 = (0, react_1.useState)(false), loading = _9[0], setLoading = _9[1];
+    var _10 = (0, react_1.useState)(), notification = _10[0], setNotification = _10[1];
     //INFO : Used by List
-    var _10 = (0, react_1.useState)({}), filterSearch = _10[0], setFilterSearch = _10[1];
-    var _11 = (0, react_1.useState)({}), filterSearchParams = _11[0], setFilterSearchParams = _11[1];
-    var _12 = (0, react_1.useState)({}), filterSelection = _12[0], setFilterSelection = _12[1];
-    var _13 = (0, react_1.useState)({}), filterReference = _13[0], setFilterReference = _13[1];
-    var _14 = (0, react_1.useState)({}), filterReferenceSearch = _14[0], setFilterReferenceSearch = _14[1];
-    var _15 = (0, react_1.useState)({}), filterReferenceList = _15[0], setFilterReferenceList = _15[1];
-    var _16 = (0, react_1.useState)({
+    var _11 = (0, react_1.useState)({}), filterSearch = _11[0], setFilterSearch = _11[1];
+    var _12 = (0, react_1.useState)({}), filterSearchParams = _12[0], setFilterSearchParams = _12[1];
+    var _13 = (0, react_1.useState)({}), filterSelection = _13[0], setFilterSelection = _13[1];
+    var _14 = (0, react_1.useState)({}), filterReference = _14[0], setFilterReference = _14[1];
+    var _15 = (0, react_1.useState)({}), filterReferenceSearch = _15[0], setFilterReferenceSearch = _15[1];
+    var _16 = (0, react_1.useState)({}), filterReferenceList = _16[0], setFilterReferenceList = _16[1];
+    var _17 = (0, react_1.useState)({
         startDate: undefined,
         endDate: undefined,
-    }), filterReferenceDate = _16[0], setFilterReferenceDate = _16[1];
-    var _17 = (0, react_1.useState)(true), tableLoading = _17[0], setTableLoading = _17[1];
-    var _18 = (0, react_1.useState)(""), cursor = _18[0], setCursor = _18[1];
-    var _19 = (0, react_1.useState)(""), lastCursor = _19[0], setLastCursor = _19[1];
-    var _20 = (0, react_1.useState)([]), tableData = _20[0], setTableData = _20[1];
-    var _21 = (0, react_1.useState)([]), spaceTableData = _21[0], setSpaceTableData = _21[1];
-    var _22 = (0, react_1.useState)(0), size = _22[0], setSize = _22[1];
-    var _23 = (0, react_1.useState)((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0), pageIndex = _23[0], setPageIndex = _23[1];
-    var _24 = (0, react_1.useState)([]), selectedIds = _24[0], setSelectedIds = _24[1];
-    var _25 = (0, react_1.useState)(false), selectAll = _25[0], setSelectAll = _25[1];
-    var _26 = (0, react_1.useState)(""), deletePasscode = _26[0], setDeletePasscode = _26[1];
-    var _27 = (0, react_1.useState)(""), deletePasscodeInput = _27[0], setDeletePasscodeInput = _27[1];
-    var _28 = (0, react_1.useState)(""), deleteFeedId = _28[0], setDeleteFeedId = _28[1];
+    }), filterReferenceDate = _17[0], setFilterReferenceDate = _17[1];
+    var _18 = (0, react_1.useState)({
+        default: true,
+    }), tableLoading = _18[0], setTableLoading = _18[1];
+    var _19 = (0, react_1.useState)({
+        default: "",
+    }), cursor = _19[0], setCursor = _19[1];
+    var _20 = (0, react_1.useState)({
+        default: "",
+    }), lastCursor = _20[0], setLastCursor = _20[1];
+    var _21 = (0, react_1.useState)({
+        default: [],
+    }), tableData = _21[0], setTableData = _21[1];
+    var _22 = (0, react_1.useState)({
+        default: [],
+    }), spaceTableData = _22[0], setSpaceTableData = _22[1];
+    var _23 = (0, react_1.useState)({ default: 0 }), size = _23[0], setSize = _23[1];
+    var _24 = (0, react_1.useState)({
+        default: (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.pageIndex) !== null && _b !== void 0 ? _b : 0,
+    }), pageIndex = _24[0], setPageIndex = _24[1];
+    var _25 = (0, react_1.useState)([]), selectedIds = _25[0], setSelectedIds = _25[1];
+    var _26 = (0, react_1.useState)(false), selectAll = _26[0], setSelectAll = _26[1];
+    var _27 = (0, react_1.useState)(""), deletePasscode = _27[0], setDeletePasscode = _27[1];
+    var _28 = (0, react_1.useState)(""), deletePasscodeInput = _28[0], setDeletePasscodeInput = _28[1];
+    var _29 = (0, react_1.useState)(""), deleteFeedId = _29[0], setDeleteFeedId = _29[1];
     var previousType = (0, react_1.useRef)();
     var previousSelectedData = (0, react_1.useRef)();
     //INFO : Used by List Organise
-    var _29 = (0, react_1.useState)(false), sortModal = _29[0], setSortModal = _29[1];
-    var _30 = (0, react_1.useState)(false), filterModal = _30[0], setFilterModal = _30[1];
-    var _31 = (0, react_1.useState)(false), addTabModal = _31[0], setAddTabModal = _31[1];
-    var _32 = (0, react_1.useState)(false), overviewModal = _32[0], setOverviewModal = _32[1];
-    var _33 = (0, react_1.useState)((_c = props.defaultTab) !== null && _c !== void 0 ? _c : ""), selectedTab = _33[0], setSelectedTab = _33[1];
-    var _34 = (0, react_1.useState)("dayGridMonth"), calendarView = _34[0], setCalendarView = _34[1];
-    var _35 = (0, react_1.useState)(new Date()), calendarTabMonth = _35[0], setCalendarTabMonth = _35[1];
-    var _36 = (0, react_1.useState)(true), kanbanDroppable = _36[0], setKanbanDroppable = _36[1];
-    var _37 = (0, react_1.useState)([]), kanbanOptions = _37[0], setKanbanOptions = _37[1];
-    var _38 = (0, react_1.useState)(false), queryForm = _38[0], setQueryForm = _38[1];
-    var _39 = (0, react_1.useState)(false), batchUpdateModal = _39[0], setBatchUpdateModal = _39[1];
-    var _40 = (0, react_1.useState)({
+    var _30 = (0, react_1.useState)(false), sortModal = _30[0], setSortModal = _30[1];
+    var _31 = (0, react_1.useState)(false), filterModal = _31[0], setFilterModal = _31[1];
+    var _32 = (0, react_1.useState)(false), addTabModal = _32[0], setAddTabModal = _32[1];
+    var _33 = (0, react_1.useState)(false), overviewModal = _33[0], setOverviewModal = _33[1];
+    var _34 = (0, react_1.useState)((_c = props.defaultTab) !== null && _c !== void 0 ? _c : ""), selectedTab = _34[0], setSelectedTab = _34[1];
+    var _35 = (0, react_1.useState)("dayGridMonth"), calendarView = _35[0], setCalendarView = _35[1];
+    var _36 = (0, react_1.useState)(new Date()), calendarTabMonth = _36[0], setCalendarTabMonth = _36[1];
+    var _37 = (0, react_1.useState)(true), kanbanDroppable = _37[0], setKanbanDroppable = _37[1];
+    var _38 = (0, react_1.useState)([]), kanbanOptions = _38[0], setKanbanOptions = _38[1];
+    var _39 = (0, react_1.useState)(false), queryForm = _39[0], setQueryForm = _39[1];
+    var _40 = (0, react_1.useState)(false), batchUpdateModal = _40[0], setBatchUpdateModal = _40[1];
+    var _41 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _40[0], setBatchUpdateData = _40[1];
+    }), batchUpdateData = _41[0], setBatchUpdateData = _41[1];
     //INFO : Used by Auth
-    var _41 = (0, react_1.useState)({
+    var _42 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
-    }), authMethods = _41[0], setAuthMethods = _41[1];
-    var _42 = (0, react_1.useState)(""), selectedAuthMethod = _42[0], setSelectedAuthMethod = _42[1];
+    }), authMethods = _42[0], setAuthMethods = _42[1];
+    var _43 = (0, react_1.useState)(""), selectedAuthMethod = _43[0], setSelectedAuthMethod = _43[1];
     // INFO: Used by Activity Log
-    var _43 = (0, react_1.useState)(false), activityModal = _43[0], setActivityModal = _43[1];
-    var _44 = (0, react_1.useState)(""), activityId = _44[0], setActivityId = _44[1];
+    var _44 = (0, react_1.useState)(false), activityModal = _44[0], setActivityModal = _44[1];
+    var _45 = (0, react_1.useState)(""), activityId = _45[0], setActivityId = _45[1];
     //INFO : Used by Export
-    var _45 = (0, react_1.useState)(null), csvFile = _45[0], setCSVFile = _45[1];
-    var _46 = (0, react_1.useState)([]), csvFileData = _46[0], setCSVFileData = _46[1];
-    var _47 = (0, react_1.useState)(0), stepCSVIndex = _47[0], setStepCSVIndex = _47[1];
-    var _48 = (0, react_1.useState)({}), listCSVMapAttribute = _48[0], setListCSVMapAttribute = _48[1];
-    var _49 = (0, react_1.useState)({}), listCSVObjAttribute = _49[0], setListCSVObjAttribute = _49[1];
-    var _50 = (0, react_1.useState)([]), csvAPIAttribute = _50[0], setCSVAPIAttribute = _50[1];
-    var _51 = (0, react_1.useState)(((_d = props.devSettings.currentUser) === null || _d === void 0 ? void 0 : _d.userEmail) || ""), exportCSVEmail = _51[0], setExportCSVEmail = _51[1];
-    var _52 = (0, react_1.useState)(((_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.defaultExportPDFName) || ""), exportPDFTitle = _52[0], setExportPDFTitle = _52[1];
-    var _53 = (0, react_1.useState)([]), importTableData = _53[0], setImportTableData = _53[1];
-    var _54 = (0, react_1.useState)([]), queryList = _54[0], setQueryList = _54[1];
-    var _55 = (0, react_1.useState)(-1), queryIndex = _55[0], setQueryIndex = _55[1];
+    var _46 = (0, react_1.useState)(null), csvFile = _46[0], setCSVFile = _46[1];
+    var _47 = (0, react_1.useState)([]), csvFileData = _47[0], setCSVFileData = _47[1];
+    var _48 = (0, react_1.useState)(0), stepCSVIndex = _48[0], setStepCSVIndex = _48[1];
+    var _49 = (0, react_1.useState)({}), listCSVMapAttribute = _49[0], setListCSVMapAttribute = _49[1];
+    var _50 = (0, react_1.useState)({}), listCSVObjAttribute = _50[0], setListCSVObjAttribute = _50[1];
+    var _51 = (0, react_1.useState)([]), csvAPIAttribute = _51[0], setCSVAPIAttribute = _51[1];
+    var _52 = (0, react_1.useState)(((_d = props.devSettings.currentUser) === null || _d === void 0 ? void 0 : _d.userEmail) || ""), exportCSVEmail = _52[0], setExportCSVEmail = _52[1];
+    var _53 = (0, react_1.useState)(((_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.defaultExportPDFName) || ""), exportPDFTitle = _53[0], setExportPDFTitle = _53[1];
+    var _54 = (0, react_1.useState)([]), importTableData = _54[0], setImportTableData = _54[1];
+    var _55 = (0, react_1.useState)([]), queryList = _55[0], setQueryList = _55[1];
+    var _56 = (0, react_1.useState)(-1), queryIndex = _56[0], setQueryIndex = _56[1];
+    var _57 = (0, react_1.useState)(((_g = props.organise) === null || _g === void 0 ? void 0 : _g.groupBy) || []), groupIds = _57[0], setGroupIds = _57[1];
     //INFO : Used by Read
     //INFO : Used by Update
-    var _56 = (0, react_1.useState)(false), modalVisible = _56[0], setModalVisible = _56[1];
-    var _57 = (0, react_1.useState)(false), deleteModal = _57[0], setDeleteModal = _57[1];
-    var _58 = (0, react_1.useState)(false), excelModal = _58[0], setExcelModal = _58[1];
-    var _59 = (0, react_1.useState)(false), exportExcel = _59[0], setExportExcel = _59[1];
-    var _60 = (0, react_1.useState)(""), exportType = _60[0], setExportType = _60[1];
-    var _61 = (0, react_1.useState)(false), exportQR = _61[0], setExportQR = _61[1];
-    var _62 = (0, react_1.useState)(false), signatureSigning = _62[0], setSignatureSigning = _62[1];
-    var _63 = (0, react_1.useState)({}), selectedData = _63[0], setSelectedData = _63[1];
-    var _64 = (0, react_1.useState)(""), selectedObjectStructureId = _64[0], setSelectedObjectStructureId = _64[1];
-    var _65 = (0, react_1.useState)(""), selectedObjectId = _65[0], setSelectedObjectId = _65[1];
-    var _66 = (0, react_1.useState)(""), selectedListAddressId = _66[0], setSelectedListAddressId = _66[1];
-    var _67 = (0, react_1.useState)({
+    var _58 = (0, react_1.useState)(false), modalVisible = _58[0], setModalVisible = _58[1];
+    var _59 = (0, react_1.useState)(false), deleteModal = _59[0], setDeleteModal = _59[1];
+    var _60 = (0, react_1.useState)(false), excelModal = _60[0], setExcelModal = _60[1];
+    var _61 = (0, react_1.useState)(false), exportExcel = _61[0], setExportExcel = _61[1];
+    var _62 = (0, react_1.useState)(""), exportType = _62[0], setExportType = _62[1];
+    var _63 = (0, react_1.useState)(false), exportQR = _63[0], setExportQR = _63[1];
+    var _64 = (0, react_1.useState)(false), signatureSigning = _64[0], setSignatureSigning = _64[1];
+    var _65 = (0, react_1.useState)({}), selectedData = _65[0], setSelectedData = _65[1];
+    var _66 = (0, react_1.useState)(""), selectedObjectStructureId = _66[0], setSelectedObjectStructureId = _66[1];
+    var _67 = (0, react_1.useState)(""), selectedObjectId = _67[0], setSelectedObjectId = _67[1];
+    var _68 = (0, react_1.useState)(""), selectedListAddressId = _68[0], setSelectedListAddressId = _68[1];
+    var _69 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _67[0], setSelectedListAddress = _67[1];
-    var _68 = (0, react_1.useState)({}), selectedObjectData = _68[0], setSelectedObjectData = _68[1];
-    var _69 = (0, react_1.useState)(false), referenceLoading = _69[0], setReferenceLoading = _69[1];
-    var _70 = (0, react_1.useState)({}), referencesOptions = _70[0], setReferencesOptions = _70[1];
-    var _71 = (0, react_1.useState)({}), referencesDetails = _71[0], setReferencesDetails = _71[1];
-    var _72 = (0, react_1.useState)({}), referenceDeleteTableData = _72[0], setReferenceDeleteTableData = _72[1];
-    var _73 = (0, react_1.useState)(0), referenceDeleteIndex = _73[0], setReferenceDeleteIndex = _73[1];
-    var _74 = (0, react_1.useState)({
+    }), selectedListAddress = _69[0], setSelectedListAddress = _69[1];
+    var _70 = (0, react_1.useState)({}), selectedObjectData = _70[0], setSelectedObjectData = _70[1];
+    var _71 = (0, react_1.useState)(false), referenceLoading = _71[0], setReferenceLoading = _71[1];
+    var _72 = (0, react_1.useState)({}), referencesOptions = _72[0], setReferencesOptions = _72[1];
+    var _73 = (0, react_1.useState)({}), referencesDetails = _73[0], setReferencesDetails = _73[1];
+    var _74 = (0, react_1.useState)({}), referenceDeleteTableData = _74[0], setReferenceDeleteTableData = _74[1];
+    var _75 = (0, react_1.useState)(0), referenceDeleteIndex = _75[0], setReferenceDeleteIndex = _75[1];
+    var _76 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _74[0], setReferenceCreationModal = _74[1];
-    var _75 = (0, react_1.useState)({}), referenceModelSchema = _75[0], setReferenceSchema = _75[1];
+    }), referenceCreationModal = _76[0], setReferenceCreationModal = _76[1];
+    var _77 = (0, react_1.useState)({}), referenceModelSchema = _77[0], setReferenceSchema = _77[1];
     // INFO ; Use to Trigger Update Prefill UI
-    var _76 = (0, react_1.useState)(false), prefillTrigger = _76[0], setPrefillTrigger = _76[1];
+    var _78 = (0, react_1.useState)(false), prefillTrigger = _78[0], setPrefillTrigger = _78[1];
     //INFO : Offline
-    var _77 = (0, react_1.useState)(0), offlineDataLength = _77[0], setOfflineDataLength = _77[1];
-    var _78 = (0, react_1.useState)(false), offlineModal = _78[0], setOfflineModal = _78[1];
+    var _79 = (0, react_1.useState)(0), offlineDataLength = _79[0], setOfflineDataLength = _79[1];
+    var _80 = (0, react_1.useState)(false), offlineModal = _80[0], setOfflineModal = _80[1];
     var devSettings = props.devSettings;
     var serverId = (0, utils_1.parseServerId)(devSettings.server);
-    var viewType = (_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.viewId) !== null && _h !== void 0 ? _h : "general";
+    var viewType = (_j = (_h = props.organise) === null || _h === void 0 ? void 0 : _h.viewId) !== null && _j !== void 0 ? _j : "general";
     var isFirebaseClient = devSettings.server === "firebase";
     var isFirebase = isFirebaseClient || devSettings.server === "fbServer";
-    var dbModule = isFirebaseClient ? (_j = props.lib) === null || _j === void 0 ? void 0 : _j.firebase : (_k = props.lib) === null || _k === void 0 ? void 0 : _k.axios;
+    var dbModule = isFirebaseClient ? (_k = props.lib) === null || _k === void 0 ? void 0 : _k.firebase : (_l = props.lib) === null || _l === void 0 ? void 0 : _l.axios;
     var schemaPresent = props.devSettings.schemaEndpoint ? true : false;
     var limit = props.limit ? props.limit : 10;
-    var isEditor = ((_l = props.edit) === null || _l === void 0 ? void 0 : _l.allEditable) ? true : false;
-    var isOffline = (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareOffline;
-    var showId = (_o = props.space) === null || _o === void 0 ? void 0 : _o.showId;
-    var idField = (_p = props.space) === null || _p === void 0 ? void 0 : _p.idField;
-    var pipeline = (_q = props === null || props === void 0 ? void 0 : props.space) === null || _q === void 0 ? void 0 : _q.pipeline;
-    var hasNavigation = ((_r = props.organise) === null || _r === void 0 ? void 0 : _r.handleNavigate) ? true : false;
-    var formColumn = ((_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareUpdateOneColumn)
+    var isEditor = ((_m = props.edit) === null || _m === void 0 ? void 0 : _m.allEditable) ? true : false;
+    var isOffline = (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareOffline;
+    var showId = (_p = props.space) === null || _p === void 0 ? void 0 : _p.showId;
+    var idField = (_q = props.space) === null || _q === void 0 ? void 0 : _q.idField;
+    var pipeline = (_r = props === null || props === void 0 ? void 0 : props.space) === null || _r === void 0 ? void 0 : _r.pipeline;
+    var hasNavigation = ((_s = props.organise) === null || _s === void 0 ? void 0 : _s.handleNavigate) ? true : false;
+    var formColumn = ((_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareUpdateOneColumn)
         ? "grid-cols-2"
         : "grid-cols-4";
-    var isActivityLog = (((_u = (_t = props.edit) === null || _t === void 0 ? void 0 : _t.activityLog) === null || _u === void 0 ? void 0 : _u.enableComments) &&
-        ((_v = props.edit) === null || _v === void 0 ? void 0 : _v.activityLog.commentCollectionId)) ||
-        (((_x = (_w = props.edit) === null || _w === void 0 ? void 0 : _w.activityLog) === null || _x === void 0 ? void 0 : _x.enableLogs) &&
-            ((_y = props.edit) === null || _y === void 0 ? void 0 : _y.activityLog.logsCollectionId));
+    var isActivityLog = (((_v = (_u = props.edit) === null || _u === void 0 ? void 0 : _u.activityLog) === null || _v === void 0 ? void 0 : _v.enableComments) &&
+        ((_w = props.edit) === null || _w === void 0 ? void 0 : _w.activityLog.commentCollectionId)) ||
+        (((_y = (_x = props.edit) === null || _x === void 0 ? void 0 : _x.activityLog) === null || _y === void 0 ? void 0 : _y.enableLogs) &&
+            ((_z = props.edit) === null || _z === void 0 ? void 0 : _z.activityLog.logsCollectionId));
+    var authMethodProviders = [
+        "email",
+        "google",
+        "phone",
+        "disabled",
+    ];
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_z = props.lib) === null || _z === void 0 ? void 0 : _z.axios,
+        dbModule: (_0 = props.lib) === null || _0 === void 0 ? void 0 : _0.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -286,7 +305,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_0 = props.lib) === null || _0 === void 0 ? void 0 : _0.axios,
+        dbModule: (_1 = props.lib) === null || _1 === void 0 ? void 0 : _1.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -294,7 +313,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.allEditable) && !isFirebase
+        ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.allEditable) && !isFirebase
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -343,7 +362,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             },
         },
     ].filter(Boolean);
-    if ((_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.moreSettings)
+    if ((_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     var renderImpSearchFilterConditions = function () {
         var _a;
@@ -496,8 +515,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.id,
         props.localURLEndpoint,
-        (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.extendedTabs,
-        (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.viewId,
+        (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.extendedTabs,
+        (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.viewId,
         props.type,
     ]);
     (0, react_1.useEffect)(function () {
@@ -505,9 +524,53 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             setReferenceSchema(props.devSettings.schemaReference);
     }, [props.devSettings.schemaReference]);
     (0, react_1.useEffect)(function () {
-        var query = renderImpSearchFilterConditions();
-        if (query)
-            setQueryList(query);
+        var newQuery = renderImpSearchFilterConditions();
+        var clonedTableData = {};
+        var clonedTableLoading = {};
+        var clonedPageIndex = {};
+        var clonedLastCurosr = {};
+        var clonedCursor = {};
+        if (groupIds.length > 0 && Object.keys(tableData).length > 1) {
+            if (newQuery &&
+                (newQuery === null || newQuery === void 0 ? void 0 : newQuery.length) > 0 &&
+                JSON.stringify(newQuery) !== JSON.stringify(queryList)) {
+                newQuery === null || newQuery === void 0 ? void 0 : newQuery.map(function (eachQuery) {
+                    var _a, _b;
+                    if (groupIds.includes((_a = eachQuery.queryId) !== null && _a !== void 0 ? _a : "")) {
+                        if (eachQuery.value && Array.isArray(eachQuery.value)) {
+                            (_b = eachQuery === null || eachQuery === void 0 ? void 0 : eachQuery.value) === null || _b === void 0 ? void 0 : _b.map(function (eachValue) {
+                                clonedTableData[eachValue] = tableData === null || tableData === void 0 ? void 0 : tableData[eachValue];
+                                clonedTableLoading[eachValue] = tableLoading === null || tableLoading === void 0 ? void 0 : tableLoading[eachValue];
+                                clonedPageIndex[eachValue] = pageIndex === null || pageIndex === void 0 ? void 0 : pageIndex[eachValue];
+                                clonedLastCurosr[eachValue] = lastCursor === null || lastCursor === void 0 ? void 0 : lastCursor[eachValue];
+                                clonedCursor[eachValue] = cursor === null || cursor === void 0 ? void 0 : cursor[eachValue];
+                                return null;
+                            });
+                        }
+                    }
+                    return null;
+                });
+            }
+            setTableData(clonedTableData);
+            setTableLoading(clonedTableLoading);
+            setPageIndex(clonedPageIndex);
+            setLastCursor(clonedLastCurosr);
+            setCursor(clonedCursor);
+        }
+        else {
+            clonedTableData["default"] = [];
+            clonedTableLoading["default"] = true;
+            clonedPageIndex["default"] = 0;
+            clonedLastCurosr["default"] = "";
+            clonedCursor["default"] = "";
+            setTableData(clonedTableData);
+            setTableLoading(clonedTableLoading);
+            setPageIndex(clonedPageIndex);
+            setLastCursor(clonedLastCurosr);
+            setCursor(clonedCursor);
+        }
+        if (newQuery)
+            setQueryList(newQuery);
     }, [filterSelection, filterReferenceDate, filterReference]);
     (0, react_1.useEffect)(function () {
         var _a;
@@ -556,7 +619,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
         return sort;
     };
-    var handleReadQueryHocCond = function () {
+    var handleReadQueryHocCond = function (prefix) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         var query = (_a = renderImpSearchFilterConditions()) !== null && _a !== void 0 ? _a : [];
         var calendarSettings = false;
@@ -647,7 +710,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var cond = {
             type: "list",
             query: query,
-            cursor: renderCursor(),
+            cursor: renderCursor(prefix),
             sort: handleReadQueryHocSort(query),
             limit: limit,
             pipeline: pipeline,
@@ -674,31 +737,42 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             props.bareSettings.bareListHandleSelection(value, selectedIds, query);
         }
     };
-    var handlePagination = function (value) {
+    var handlePagination = function (value, prefix) {
         var _a, _b, _c, _d, _e, _f;
         var isGridScroll = renderCheckGridScroll();
         if (!isFirebase && !isGridScroll) {
-            setTableLoading(true);
-            handleSetListData([], []);
+            tableLoading[prefix] = true;
+            setTableLoading(tableLoading);
+            handleSetListData([], [], prefix);
         }
         if (typeof value === "number") {
-            setPageIndex(value);
+            var clonedPageIndex = JSON.parse(JSON.stringify(pageIndex));
+            clonedPageIndex[prefix] = value;
+            setPageIndex(clonedPageIndex);
             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangePagination) === null || _b === void 0 ? void 0 : _b.call(_a, value);
         }
         else {
             if (value === "next") {
                 //INFO : Retrieve latest cursor data from Firebase only
                 if ((isFirebase || isGridScroll) &&
-                    cursor &&
-                    (pageIndex + 1) * limit + 1 > tableData.length) {
-                    setLastCursor(cursor);
+                    cursor[prefix] &&
+                    (pageIndex[prefix] + 1) * limit + 1 > tableData[prefix].length) {
+                    var clonedLastCursor = JSON.parse(JSON.stringify(lastCursor));
+                    clonedLastCursor[prefix] = cursor[prefix];
+                    console.log("see this");
+                    console.log(clonedLastCursor);
+                    setLastCursor(clonedLastCursor);
                 }
-                setPageIndex(pageIndex + 1);
-                (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.onChangePagination) === null || _d === void 0 ? void 0 : _d.call(_c, pageIndex + 1);
+                var clonedPageIndex = JSON.parse(JSON.stringify(pageIndex));
+                clonedPageIndex[prefix] = clonedPageIndex[prefix] + 1;
+                setPageIndex(clonedPageIndex);
+                (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.onChangePagination) === null || _d === void 0 ? void 0 : _d.call(_c, clonedPageIndex[prefix] + 1);
             }
             else {
-                setPageIndex(pageIndex - 1);
-                (_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.onChangePagination) === null || _f === void 0 ? void 0 : _f.call(_e, pageIndex - 1);
+                var clonedPageIndex = JSON.parse(JSON.stringify(pageIndex));
+                clonedPageIndex[prefix] = clonedPageIndex[prefix] - 1;
+                setPageIndex(clonedPageIndex);
+                (_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.onChangePagination) === null || _f === void 0 ? void 0 : _f.call(_e, clonedPageIndex[prefix] - 1);
             }
         }
     };
@@ -711,8 +785,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, props.type, props.id, id);
         }
     };
-    var handleSetListData = function (tableData, spaceTableData) {
+    var handleSetListData = function (newTableData, newSpaceTableData, prefix) {
         var _a, _b, _c, _d, _e;
+        tableData[prefix !== null && prefix !== void 0 ? prefix : "default"] = newTableData;
+        spaceTableData[prefix !== null && prefix !== void 0 ? prefix : "default"] = newSpaceTableData;
         setTableData(tableData);
         setSpaceTableData(spaceTableData);
         (_b = (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListHandleData) === null || _b === void 0 ? void 0 : _b.call(_a, tableData, spaceTableData);
@@ -724,14 +800,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, dummyPrettierDataList_1, selectedIndex_1, isGridScroll, newTableData, newPrettierTableData, isExists, cursor_1, lastDataId;
-        var _a, _b, _c, _d, _e, _f;
-        return __generator(this, function (_g) {
-            switch (_g.label) {
+    var handleGetListData = function (responseData, prefix, type, rowId) { return __awaiter(void 0, void 0, void 0, function () {
+        var dataList, prettierDataList, clonedTableData, clonedSpaceTableData, dummyPrettierDataList_1, selectedIndex_1, isGridScroll, clonedSize, newTableData, newPrettierTableData, isExists, clonedSize, cursor_1, lastDataId, clonedCursor;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return __generator(this, function (_j) {
+            switch (_j.label) {
                 case 0:
                     dataList = [];
                     prettierDataList = [];
+                    clonedTableData = JSON.parse(JSON.stringify(tableData));
+                    clonedSpaceTableData = JSON.parse(JSON.stringify(spaceTableData));
                     if (!responseData) return [3 /*break*/, 4];
                     if (!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareOffline)) return [3 /*break*/, 1];
                     dummyPrettierDataList_1 = [];
@@ -746,8 +824,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [3 /*break*/, 3];
                 case 1: return [4 /*yield*/, (0, listModule_1.handleListDataBasedOnModel)(responseData.data, props.devSettings, (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios, props.model, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.handleNavigate, ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.viewId) === "general", setActivityModal, setActivityId, isActivityLog ? (_e = props.edit) === null || _e === void 0 ? void 0 : _e.activityLog : undefined, (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListActionBtns)];
                 case 2:
-                    prettierDataList = _g.sent();
-                    _g.label = 3;
+                    prettierDataList = _j.sent();
+                    _j.label = 3;
                 case 3:
                     responseData.data.map(function (eachData) {
                         if (eachData["_id"]) {
@@ -757,35 +835,39 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                     });
                     dataList = responseData.data;
-                    _g.label = 4;
+                    _j.label = 4;
                 case 4:
                     if (type === "update" || type === "create") {
                         try {
                             if (type === "update") {
                                 selectedIndex_1 = -1;
-                                tableData.map(function (eachData, index) {
+                                clonedTableData[prefix !== null && prefix !== void 0 ? prefix : "default"].map(function (eachData, index) {
                                     if (eachData.id === rowId)
                                         selectedIndex_1 = index;
                                     return null;
                                 });
                                 if (selectedIndex_1 > -1) {
-                                    tableData[selectedIndex_1] = responseData.data[0];
-                                    spaceTableData[selectedIndex_1] = prettierDataList[0];
+                                    clonedTableData[selectedIndex_1] =
+                                        (_g = responseData.data) === null || _g === void 0 ? void 0 : _g[prefix !== null && prefix !== void 0 ? prefix : "default"][0];
+                                    clonedSpaceTableData[selectedIndex_1] =
+                                        prettierDataList === null || prettierDataList === void 0 ? void 0 : prettierDataList[prefix !== null && prefix !== void 0 ? prefix : "default"][0];
                                 }
                             }
                             else {
-                                tableData.push(responseData.data[0]);
-                                spaceTableData.push(prettierDataList[0]);
+                                clonedTableData[prefix !== null && prefix !== void 0 ? prefix : "default"].push(responseData.data[0]);
+                                clonedSpaceTableData[prefix !== null && prefix !== void 0 ? prefix : "default"].push(prettierDataList[0]);
                             }
-                            handleSetListData(tableData, spaceTableData);
+                            handleSetListData(clonedTableData, clonedSpaceTableData, prefix !== null && prefix !== void 0 ? prefix : "default");
                         }
                         catch (err) { }
                     }
                     else {
                         isGridScroll = renderCheckGridScroll();
                         if (!isGridScroll && !isFirebase) {
-                            handleSetListData(dataList, prettierDataList);
-                            setSize(responseData.count);
+                            handleSetListData(dataList, prettierDataList, prefix !== null && prefix !== void 0 ? prefix : "default");
+                            clonedSize = JSON.parse(JSON.stringify(size));
+                            clonedSize[prefix !== null && prefix !== void 0 ? prefix : "default"] = (_h = responseData.count) !== null && _h !== void 0 ? _h : 0;
+                            setSize(clonedSize);
                         }
                         else {
                             newTableData = [];
@@ -795,14 +877,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 newPrettierTableData = prettierDataList;
                             }
                             else {
-                                isExists = tableData.find(function (eachData) { var _a; return eachData.id === ((_a = dataList === null || dataList === void 0 ? void 0 : dataList[0]) === null || _a === void 0 ? void 0 : _a.id); });
-                                newTableData = isExists ? tableData : tableData.concat(dataList);
+                                isExists = clonedTableData[prefix !== null && prefix !== void 0 ? prefix : "default"].find(function (eachData) { var _a; return eachData.id === ((_a = dataList === null || dataList === void 0 ? void 0 : dataList[0]) === null || _a === void 0 ? void 0 : _a.id); });
+                                newTableData = isExists
+                                    ? clonedTableData[prefix !== null && prefix !== void 0 ? prefix : "default"]
+                                    : clonedTableData[prefix !== null && prefix !== void 0 ? prefix : "default"].concat(dataList);
                                 newPrettierTableData = isExists
-                                    ? spaceTableData
-                                    : spaceTableData.concat(prettierDataList);
+                                    ? clonedSpaceTableData[prefix !== null && prefix !== void 0 ? prefix : "default"]
+                                    : clonedSpaceTableData[prefix !== null && prefix !== void 0 ? prefix : "default"].concat(prettierDataList);
                             }
-                            handleSetListData(newTableData, newPrettierTableData);
-                            setSize(newTableData.length);
+                            handleSetListData(newTableData, newPrettierTableData, prefix);
+                            clonedSize = JSON.parse(JSON.stringify(size));
+                            clonedSize[prefix !== null && prefix !== void 0 ? prefix : "default"] = newTableData.length;
+                            setSize(clonedSize);
                             cursor_1 = responseData.count;
                             if (isGridScroll) {
                                 if (dataList.length === 0)
@@ -812,10 +898,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     cursor_1 = lastDataId;
                                 }
                             }
-                            setCursor(cursor_1);
+                            clonedCursor = JSON.parse(JSON.stringify(cursor_1));
+                            clonedCursor[prefix !== null && prefix !== void 0 ? prefix : "default"] = cursor_1;
+                            setCursor(clonedCursor);
                         }
                     }
-                    setTableLoading(false);
+                    tableLoading[prefix !== null && prefix !== void 0 ? prefix : "default"] = false;
+                    setTableLoading(tableLoading);
                     return [2 /*return*/];
             }
         });
@@ -841,7 +930,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             handleCheckOfflineDataLength();
         }, 500);
     };
-    var handleClearDataByFilter = function (ignore) {
+    var handleClearDataByFilter = function (ignore, id) {
         if (isFirebase) {
             if (ignore) {
                 if (ignore === "search") {
@@ -855,14 +944,28 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 }
             }
         }
-        handleSetListData([], []);
-        setPageIndex(0);
-        setCursor("");
-        setLastCursor("");
-        setTableLoading(true);
+        var keys = Object.keys(tableData).length > 0 ? Object.keys(tableData) : ["default"];
+        var clonedTableLoading = JSON.parse(JSON.stringify(tableLoading));
+        var clonedPageIndex = JSON.parse(JSON.stringify(pageIndex));
+        var clonedCursor = JSON.parse(JSON.stringify(cursor));
+        var clonedLastCurosr = JSON.parse(JSON.stringify(lastCursor));
+        keys.map(function (eachKey) {
+            if (id && groupIds.includes(id))
+                return null;
+            handleSetListData([], [], eachKey);
+            clonedTableLoading[eachKey] = true;
+            clonedPageIndex[eachKey] = 0;
+            clonedCursor[eachKey] = "";
+            clonedLastCurosr[eachKey] = "";
+            return null;
+        });
+        setPageIndex(clonedPageIndex);
+        setCursor(clonedCursor);
+        setLastCursor(clonedLastCurosr);
+        setTableLoading(clonedTableLoading);
     };
     var handleNameSearch = function (e) {
-        handleClearDataByFilter("search");
+        handleClearDataByFilter("search", e.target.id);
         var clonedFilterSearch = {};
         clonedFilterSearch[e.target.id] = e.target.value;
         setFilterSearch(clonedFilterSearch);
@@ -878,7 +981,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, 500);
     };
     var handleRangeFilterOnChange = function (id, value, type) {
-        handleClearDataByFilter("date");
+        handleClearDataByFilter("date", id);
         var clonedRangeFilter = JSON.parse(JSON.stringify(filterReferenceDate));
         clonedRangeFilter[id] =
             type === "start" ? value : filterReferenceDate.startDate;
@@ -899,7 +1002,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     var handleGetItemError = function (err) {
         var _a, _b, _c;
-        setTableLoading(false);
+        setTableLoading({ default: true });
         setModalVisible(false);
         setLoading(false);
         if (props.type === "update" || props.type === "read") {
@@ -2151,7 +2254,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
         });
     }); };
-    var handleSubmitData = function (type, rowId, columnId, data, offlineId, isOfflineUpdate) { return __awaiter(void 0, void 0, void 0, function () {
+    var handleSubmitData = function (type, rowId, columnId, data, offlineId, isOfflineUpdate, prefix) { return __awaiter(void 0, void 0, void 0, function () {
         var selectedId_2, id, createSelectedData_1, uniqueDataStructure, uniqueColumnId, res, offlineDataResp, offlineData, tempData, err_13, offlineDataResp, tempData, selectedIndex_3, offlineData, err_14, dataToSubmit, operationType, selectedIndex_4, dataId, err_15;
         var _a, _b;
         var _c, _d, _e, _f, _g, _h;
@@ -2301,19 +2404,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     if (!(type === "update")) return [3 /*break*/, 23];
                     if (!columnId) return [3 /*break*/, 22];
                     selectedIndex_4 = -1;
-                    tableData.map(function (eachData, index) {
+                    tableData[prefix !== null && prefix !== void 0 ? prefix : "default"].map(function (eachData, index) {
                         if (eachData.id === rowId || eachData._id === rowId) {
                             eachData[columnId] = createSelectedData_1[columnId];
                             selectedIndex_4 = index;
                         }
                         return null;
                     });
-                    return [4 /*yield*/, handleGetListData({ data: [tableData[selectedIndex_4]] }, "update", rowId)];
+                    return [4 /*yield*/, handleGetListData({ data: tableData[selectedIndex_4] }, prefix, "update", rowId)];
                 case 21:
                     _j.sent();
                     _j.label = 22;
                 case 22: return [3 /*break*/, 25];
-                case 23: return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, "create")];
+                case 23: return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, prefix, "create")];
                 case 24:
                     _j.sent();
                     _j.label = 25;
@@ -2326,7 +2429,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 case 27: return [3 /*break*/, 30];
                 case 28:
                     createSelectedData_1[serverId] = id;
-                    return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, selectedId_2 === "new" ? "create" : "update", id)];
+                    return [4 /*yield*/, handleGetListData({ data: [createSelectedData_1] }, prefix, selectedId_2 === "new" ? "create" : "update", id)];
                 case 29:
                     _j.sent();
                     setNotification({
@@ -3236,9 +3339,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             });
         return tableHeader;
     };
-    var renderCursor = function () {
+    var renderCursor = function (prefix) {
         if (!isFirebase) {
-            return pageIndex === 0 ? undefined : pageIndex * limit;
+            return pageIndex[prefix] === 0 ? undefined : pageIndex[prefix] * limit;
         }
         else {
             var selectedModel = props.model.find(function (eachModel) { var _a, _b; return eachModel.id === ((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.sort) === null || _b === void 0 ? void 0 : _b.sortId); });
@@ -3612,7 +3715,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     } }));
             return null;
         };
-        Object.keys(authMethods).map(function (eachMethod) {
+        authMethodProviders.map(function (eachMethod) {
             var _a, _b, _c;
             var divClassName = "flex flex-row items-center justify-center";
             var iconClassName = "text-gray-600 w-6 h-6 mr-2";
@@ -3657,8 +3760,68 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             react_1.default.createElement("p", { className: "text-md font-bold mb-1" }, "Authenticated Via : "),
             authList));
     };
+    var renderListRQHoc = function () {
+        var _a, _b, _c, _d;
+        var rqHOCCompList = [];
+        var query = (_a = renderImpSearchFilterConditions()) !== null && _a !== void 0 ? _a : [];
+        if (query.length > 0 &&
+            query.some(function (eachQuery) { var _a; return groupIds.includes((_a = eachQuery === null || eachQuery === void 0 ? void 0 : eachQuery.queryId) !== null && _a !== void 0 ? _a : ""); })) {
+            groupIds.map(function (eachAttribtueId) {
+                var includeGroupQuery = query.filter(function (eachQuery) { return eachQuery.queryId === eachAttribtueId; });
+                var excludeGroupQuery = query.filter(function (eachQuery) { return eachQuery.queryId !== eachAttribtueId; });
+                if (includeGroupQuery && includeGroupQuery.length > 0) {
+                    includeGroupQuery.map(function (eachQuery) {
+                        if (eachQuery.value && Array.isArray(eachQuery.value)) {
+                            eachQuery.value.map(function (eachValue) {
+                                var _a, _b, _c;
+                                rqHOCCompList.push(react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: listRQueryHocRef, database: {
+                                        dbModule: dbModule,
+                                        dbType: devSettings.server,
+                                        dbCollection: (_b = (_a = props === null || props === void 0 ? void 0 : props.space) === null || _a === void 0 ? void 0 : _a.pipelineDefaultSpaceId) !== null && _b !== void 0 ? _b : props.collectionId,
+                                        dbEndpoint: devSettings.dbEndpoint,
+                                        dbAPIToken: devSettings.dbAPIToken,
+                                        dbUserToken: devSettings.dbUserToken,
+                                    }, cond: {
+                                        type: "list",
+                                        query: JSON.parse(JSON.stringify(__spreadArray([
+                                            {
+                                                type: "=",
+                                                value: eachValue,
+                                                queryId: eachAttribtueId,
+                                            }
+                                        ], excludeGroupQuery, true))),
+                                        cursor: renderCursor(eachValue),
+                                        sort: handleReadQueryHocSort(query),
+                                        limit: limit,
+                                        pipeline: pipeline,
+                                    }, offline: (_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareOffline, onChangeData: function (data) {
+                                        handleGetListData(data, eachValue, "", "");
+                                    }, onError: handleGetItemError }));
+                                return null;
+                            });
+                        }
+                        return null;
+                    });
+                }
+                return null;
+            });
+        }
+        else {
+            rqHOCCompList.push(react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: listRQueryHocRef, database: {
+                    dbModule: dbModule,
+                    dbType: devSettings.server,
+                    dbCollection: (_c = (_b = props === null || props === void 0 ? void 0 : props.space) === null || _b === void 0 ? void 0 : _b.pipelineDefaultSpaceId) !== null && _c !== void 0 ? _c : props.collectionId,
+                    dbEndpoint: devSettings.dbEndpoint,
+                    dbAPIToken: devSettings.dbAPIToken,
+                    dbUserToken: devSettings.dbUserToken,
+                }, cond: handleReadQueryHocCond("default"), offline: (_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareOffline, onChangeData: function (data) {
+                    handleGetListData(data, "default", "", "");
+                }, onError: handleGetItemError }));
+        }
+        return rqHOCCompList;
+    };
     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;
+        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 isBottom = ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareUpdateActionBottom) ? true : false;
         var tabs = renderTabs();
         var pages = [
@@ -3773,27 +3936,21 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var filterComponent = renderSearchContent();
                 var dataComponent = renderTabContent(tabs, props.type, viewType);
                 var actionComponent = renderActionButtons(props.type);
-                var rqHOCComp = (react_1.default.createElement(readQueryHoc_1.ReadQueryHoc, { ref: listRQueryHocRef, database: {
-                        dbModule: dbModule,
-                        dbType: devSettings.server,
-                        dbCollection: (_t = (_s = props === null || props === void 0 ? void 0 : props.space) === null || _s === void 0 ? void 0 : _s.pipelineDefaultSpaceId) !== null && _t !== void 0 ? _t : props.collectionId,
-                        dbEndpoint: devSettings.dbEndpoint,
-                        dbAPIToken: devSettings.dbAPIToken,
-                        dbUserToken: devSettings.dbUserToken,
-                    }, cond: handleReadQueryHocCond(), offline: (_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareOffline, onChangeData: handleGetListData, onError: handleGetItemError }));
-                if ((_v = props.renderSettings) === null || _v === void 0 ? void 0 : _v.renderListUI) {
+                if ((_s = props.renderSettings) === null || _s === void 0 ? void 0 : _s.renderListUI) {
                     return (react_1.default.createElement(react_1.default.Fragment, null,
-                        rqHOCComp,
+                        renderListRQHoc(),
                         props.renderSettings.renderListUI(actionComponent, filterComponent, dataComponent)));
                 }
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    rqHOCComp,
+                    renderListRQHoc(),
                     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" }),
-                        !((_w = props.organise) === null || _w === void 0 ? void 0 : _w.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center mt-6 space-y-3 md:space-x-3 md:space-y-0 md:flex-row md:mt-0 md:mx-3" }, filterComponent)),
+                        !((_t = props.organise) === null || _t === void 0 ? void 0 : _t.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center mt-6 space-y-3 md:space-x-3 md:space-y-0 md:flex-row md:mt-0 md:mx-3" },
+                            ((_u = props === null || props === void 0 ? void 0 : props.organise) === null || _u === void 0 ? void 0 : _u.showGroupByFeature) && (react_1.default.createElement(select_1.Select, { label: "Group", options: (_0 = (_x = (_w = (_v = props === null || props === void 0 ? void 0 : props.organise) === null || _v === void 0 ? void 0 : _v.renderGroupByOptions) === null || _w === void 0 ? void 0 : _w.call(_v)) !== null && _x !== void 0 ? _x : (_z = (_y = props === null || props === void 0 ? void 0 : props.organise) === null || _y === void 0 ? void 0 : _y.renderReferenceLabelOptions) === null || _z === void 0 ? void 0 : _z.call(_y, props.collectionId, true)) !== null && _0 !== void 0 ? _0 : [], value: groupIds, onChange: function (value) { return setGroupIds(value); } })),
+                            filterComponent)),
                         react_1.default.createElement("div", { className: "mb-0.5 flex flex-row items-center my-6 justify-content space-x-2 md:my-0" },
                             schemaPresent && (react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(solid_1.ArrowsUpDownIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: "bg-white", onClick: function () {
@@ -3818,22 +3975,24 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         });
                                     }, bgColor: "bg-white" }))),
                             !isBottom && renderActionButtons(props.type),
-                            (schemaPresent || ((_x = props.organise) === null || _x === void 0 ? void 0 : _x.showExport)) && (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 (
+                            (schemaPresent || ((_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.showExport)) && (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: (_y = props === null || props === void 0 ? void 0 : props.lib) === null || _y === void 0 ? void 0 : _y.Transition,
+                                    Transition: (_2 = props === null || props === void 0 ? void 0 : props.lib) === null || _2 === void 0 ? void 0 : _2.Transition,
                                 } })))),
-                    ((_z = props.organise) === null || _z === void 0 ? void 0 : _z.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-wrap items-center justify-center my-6 gap-3" }, filterComponent.map(function (item, index) {
-                        var _a, _b;
-                        var filter = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.additionalQuery) === null || _b === void 0 ? void 0 : _b[index];
-                        return (react_1.default.createElement("div", { key: index, className: (filter === null || filter === void 0 ? void 0 : filter.type) === "range"
-                                ? "flex-grow sm:basis-full md:basis-1/2 lg:basis-1/3"
-                                : "flex-grow sm:flex-shrink-0 sm:basis-1/2 md:basis-1/4 lg:basis-1/6" }, item));
-                    }))),
-                    schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.darkMode })),
+                    ((_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.filterComponentNewRow) && (react_1.default.createElement("div", { className: "flex flex-wrap items-center justify-center my-6 gap-3" },
+                        ((_4 = props === null || props === void 0 ? void 0 : props.organise) === null || _4 === void 0 ? void 0 : _4.showGroupByFeature) && (react_1.default.createElement(select_1.Select, { label: "Group", options: (_10 = (_7 = (_6 = (_5 = props === null || props === void 0 ? void 0 : props.organise) === null || _5 === void 0 ? void 0 : _5.renderGroupByOptions) === null || _6 === void 0 ? void 0 : _6.call(_5)) !== null && _7 !== void 0 ? _7 : (_9 = (_8 = props === null || props === void 0 ? void 0 : props.organise) === null || _8 === void 0 ? void 0 : _8.renderReferenceLabelOptions) === null || _9 === void 0 ? void 0 : _9.call(_8, props.collectionId, true)) !== null && _10 !== void 0 ? _10 : [], value: groupIds, onChange: function (value) { return setGroupIds(value); } })),
+                        filterComponent.map(function (item, index) {
+                            var _a, _b;
+                            var filter = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.additionalQuery) === null || _b === void 0 ? void 0 : _b[index];
+                            return (react_1.default.createElement("div", { key: index, className: (filter === null || filter === void 0 ? void 0 : filter.type) === "range"
+                                    ? "flex-grow sm:basis-full md:basis-1/2 lg:basis-1/3"
+                                    : "flex-grow sm:flex-shrink-0 sm:basis-1/2 md:basis-1/4 lg:basis-1/6" }, item));
+                        }))),
+                    schemaPresent && (react_1.default.createElement(tabs_1.Tabs, { tabs: tabs, selectedId: viewType, linkType: props.linkType, custom: props.custom, onClick: function (id) { return handleSelectTab(id); }, darkMode: (_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.darkMode })),
                     renderTabContent(tabs, props.type, viewType),
                     isBottom && renderActionButtons(props.type, true)));
             default:
@@ -3897,7 +4056,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
         if (titleModel)
             titleKey = titleModel.id;
-        spaceTableData.forEach(function (eachData, index) {
+        Object.values(spaceTableData).forEach(function (eachData, index) {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
             var clonedEachData = JSON.parse(JSON.stringify(eachData));
             var allValues = Object.values(clonedEachData);
@@ -4072,56 +4231,63 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var _a, _b, _c;
         return (react_1.default.createElement(settingsModal_1.ExpressionModal, { selectedId: id, model: props.model, renderReferenceLabelOptions: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.renderReferenceSpaceOptions, onAddModelSchema: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.onAddColumns, onClose: onClose }));
     };
-    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, _11, _12, _13, _14, _15, _16, _17, _18, _19;
-        var selectedTabData = tabs.find(function (eachTab) {
-            if (eachTab.id === viewType) {
-                return eachTab;
-            }
-            else {
+    console.log(size);
+    console.log(cursor);
+    console.log(lastCursor);
+    var renderGroupTable = function (multipleSelect) {
+        var tableList = [];
+        Object.entries(tableData).map(function (data) {
+            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;
+            var eachKey = data[0];
+            if (Object.keys(tableData).length > 1 && eachKey === "default")
                 return null;
-            }
-        });
-        var multipleSelect = isEditor && !((_a = props.organise) === null || _a === void 0 ? void 0 : _a.disableMulti) ? true : false;
-        if (viewType === "general") {
-            if (dataType === "list") {
-                return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: isFirebase ? "cursor" : "page", data: tableData, spaceData: spaceTableData, size: size, limit: limit, cursor: cursor, loading: tableLoading, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+            var allOptions = Object.values(filterReferenceList).flat();
+            var label = (0, uuid_1.validate)(eachKey)
+                ? (_a = allOptions.find(function (eachOption) { return eachOption.key === eachKey; })) === null || _a === void 0 ? void 0 : _a.label
+                : eachKey;
+            tableList.push(react_1.default.createElement(react_1.default.Fragment, null,
+                eachKey !== "default" && (react_1.default.createElement("div", { className: "font-semibold text-md mt-5" },
+                    "Group By ",
+                    label)),
+                react_1.default.createElement(table_1.Table, { showId: showId, paginationType: isFirebase ? "cursor" : "page", data: (_b = tableData[eachKey]) !== null && _b !== void 0 ? _b : [], spaceData: (_c = spaceTableData[eachKey]) !== null && _c !== void 0 ? _c : [], size: (_d = size[eachKey]) !== null && _d !== void 0 ? _d : 0, limit: limit, cursor: (_e = cursor[eachKey]) !== null && _e !== void 0 ? _e : "", loading: (_f = tableLoading[eachKey]) !== null && _f !== void 0 ? _f : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                         selectedIds.length > 0 &&
-                            !((_b = props.edit) === null || _b === void 0 ? void 0 : _b.disabledUpdate) &&
-                            !((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
+                            !((_g = props.edit) === null || _g === void 0 ? void 0 : _g.disabledUpdate) &&
+                            !((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareHideTableExtraMultipleAction) && (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();
                                 } }))),
-                        ((_d = props.edit) === null || _d === void 0 ? void 0 : _d.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                        ((_j = props.edit) === null || _j === void 0 ? void 0 : _j.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 && !((_e = props.edit) === null || _e === void 0 ? void 0 : _e.disableBatchUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                        !isFirebase && !((_k = props.edit) === null || _k === void 0 ? void 0 : _k.disableBatchUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                                 setBatchUpdateModal(true);
                             } })),
-                        ((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListMultipleSelectAddtionalActions) &&
-                            ((_h = (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListMultipleSelectAddtionalActions) === null || _h === void 0 ? void 0 : _h.map(function (eachButton) {
+                        ((_l = props.bareSettings) === null || _l === void 0 ? void 0 : _l.bareListMultipleSelectAddtionalActions) &&
+                            ((_o = (_m = props.bareSettings) === null || _m === void 0 ? void 0 : _m.bareListMultipleSelectAddtionalActions) === null || _o === void 0 ? void 0 : _o.map(function (eachButton) {
                                 return (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm ".concat(eachButton.className), text: eachButton.text, onClick: function () {
                                         var _a, _b;
                                         (_a = eachButton.onClick) === null || _a === void 0 ? void 0 : _a.call(eachButton, selectedIds, selectAll, (_b = renderImpSearchFilterConditions()) !== null && _b !== void 0 ? _b : []);
                                     } }));
-                            }))), handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex, onClickRow: function (id) {
+                            }))), handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: (_p = pageIndex[eachKey]) !== null && _p !== void 0 ? _p : 0, 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: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: handlePagination, className: "mt-5", lib: { axios: (_j = props.lib) === null || _j === void 0 ? void 0 : _j.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_k = props.organise) === null || _k === void 0 ? void 0 : _k.fixedPagination, advSettings: {
-                        addColumnEnabled: (_l = props.organise) === null || _l === void 0 ? void 0 : _l.addColumnEnabled,
+                    }, linkType: props.linkType, custom: props.custom, newTabUrl: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                        handlePagination(value, eachKey);
+                    }, className: "mt-5", lib: { axios: (_q = props.lib) === null || _q === void 0 ? void 0 : _q.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.fixedPagination, advSettings: {
+                        addColumnEnabled: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.addColumnEnabled,
                         renderAddColumnElements: renderAddMathColumn,
-                        dragEnabled: (_m = props.organise) === null || _m === void 0 ? void 0 : _m.advDragEnabled,
-                        sortEnabled: (_o = props.organise) === null || _o === void 0 ? void 0 : _o.advSortEnabled,
-                        filterEnabled: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.advFilterEnabled,
-                        sortId: (_q = props.organise) === null || _q === void 0 ? void 0 : _q.sort,
-                        sortOptions: (_s = (_r = props.organise) === null || _r === void 0 ? void 0 : _r.renderReferenceLabelOptions) === null || _s === void 0 ? void 0 : _s.call(_r),
-                        onSortColumn: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.onChangeSort,
-                        onDragColumn: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.onChangeDrag,
-                        filterOptions: (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.additionalQuery) === null || _w === void 0 ? void 0 : _w.map(function (eachQuery) {
+                        dragEnabled: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.advDragEnabled,
+                        sortEnabled: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.advSortEnabled,
+                        filterEnabled: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.advFilterEnabled,
+                        sortId: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.sort,
+                        sortOptions: (_y = (_x = props.organise) === null || _x === void 0 ? void 0 : _x.renderReferenceLabelOptions) === null || _y === void 0 ? void 0 : _y.call(_x),
+                        onSortColumn: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.onChangeSort,
+                        onDragColumn: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.onChangeDrag,
+                        filterOptions: (_2 = (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.additionalQuery) === null || _2 === void 0 ? void 0 : _2.map(function (eachQuery) {
                             var _a;
                             return {
                                 key: eachQuery.value,
@@ -4138,7 +4304,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             return renderSearchContent(newQuery);
                         },
                     }, editable: {
-                        active: ((_x = props.edit) === null || _x === void 0 ? void 0 : _x.listEditable) && !props.edit.disabledUpdate
+                        active: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listEditable) && !props.edit.disabledUpdate
                             ? true
                             : false,
                         onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -4152,7 +4318,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             });
                         }); },
                     }, addable: {
-                        active: ((_y = props.edit) === null || _y === void 0 ? void 0 : _y.listAddable) ? true : false,
+                        active: ((_4 = props.edit) === null || _4 === void 0 ? void 0 : _4.listAddable) ? true : false,
                         onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
@@ -4163,54 +4329,78 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 }
                             });
                         }); },
-                    }, darkMode: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.darkMode, hidePagination: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.hidePagination }));
+                    }, darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode, hidePagination: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.hidePagination })));
+            return null;
+        });
+        return tableList;
+    };
+    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;
+        var selectedTabData = tabs.find(function (eachTab) {
+            if (eachTab.id === viewType) {
+                return eachTab;
+            }
+            else {
+                return null;
+            }
+        });
+        var multipleSelect = isEditor && !((_a = props.organise) === null || _a === void 0 ? void 0 : _a.disableMulti) ? true : false;
+        if (viewType === "general") {
+            if (dataType === "list") {
+                return react_1.default.createElement(react_1.default.Fragment, null, renderGroupTable(multipleSelect));
             }
             else if (dataType === "read") {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(detailList_1.DetailList, { model: props.model, referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: "General Details", list: renderDetailListData(props.model), handleReferenceLink: !schemaPresent && ((_1 = props.bareSettings) === null || _1 === void 0 ? void 0 : _1.bareReadReferenceView)
+                    react_1.default.createElement(detailList_1.DetailList, { model: props.model, referenceModel: referenceModelSchema, className: "mt-5 bg-white rounded-md", title: "General Details", list: renderDetailListData(props.model), handleReferenceLink: !schemaPresent && ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareReadReferenceView)
                             ? props.bareSettings.bareReadReferenceView
-                            : undefined, splitView: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.splitView }),
+                            : undefined, splitView: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.splitView }),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListAddress(dataType)),
                     react_1.default.createElement("div", { className: "mt-8" }, renderListObject(dataType))));
             }
         }
         else if (selectedTabData) {
-            if ((_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareListComponent) {
+            if ((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareListComponent) {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    props.bareSettings.bareListComponent(tableData, spaceTableData, tableLoading, pageIndex),
-                    !((_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: isFirebase ? "cursor" : "page", handleUpdatePageIndex: handlePagination, darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode }))));
+                    props.bareSettings.bareListComponent(tableData["default"], spaceTableData["default"], tableLoading["default"], pageIndex["default"]),
+                    !((_e = props.organise) === null || _e === void 0 ? void 0 : _e.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData["default"], size: size["default"], limit: limit["default"], cursor: cursor["default"], pageIndex: pageIndex["default"], paginationType: isFirebase ? "cursor" : "page", handleUpdatePageIndex: function (value) {
+                            handlePagination(value, "default");
+                        }, darkMode: (_f = props.organise) === null || _f === void 0 ? void 0 : _f.darkMode }))));
             }
             else if (selectedTabData.viewType === "iframe") {
-                return (react_1.default.createElement("iframe", { id: "blixify-iframe", className: "w-full mt-5", style: { height: "70vh" }, src: (_6 = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _6 !== void 0 ? _6 : "", title: (_7 = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _7 !== void 0 ? _7 : "", onLoad: props.onLoadIframe }));
+                return (react_1.default.createElement("iframe", { id: "blixify-iframe", className: "w-full mt-5", style: { height: "70vh" }, src: (_g = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.iframeSrc) !== null && _g !== void 0 ? _g : "", title: (_h = selectedTabData === null || selectedTabData === void 0 ? void 0 : selectedTabData.id) !== null && _h !== void 0 ? _h : "", 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, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
-                            selectedIds.length > 0 && !((_8 = props.edit) === null || _8 === void 0 ? void 0 : _8.disabledUpdate) && (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["default"], limit: limit, cursor: cursor["default"], loading: tableLoading["default"], pageIndex: pageIndex["default"], checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                            selectedIds.length > 0 && !((_j = props.edit) === null || _j === void 0 ? void 0 : _j.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();
                                     } }))),
-                            ((_9 = props.edit) === null || _9 === void 0 ? void 0 : _9.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                            ((_k = props.edit) === null || _k === void 0 ? void 0 : _k.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 && !((_10 = props.edit) === null || _10 === void 0 ? void 0 : _10.disabledUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                            !isFirebase && !((_l = props.edit) === null || _l === void 0 ? void 0 : _l.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: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: handlePagination, className: "mt-5", hidePagination: (_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.hidePagination })));
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                            handlePagination(value, "default");
+                        }, className: "mt-5", hidePagination: (_m = props.organise) === null || _m === void 0 ? void 0 : _m.hidePagination })));
             }
             else if (selectedTabData.viewType === "grid") {
                 var isGridScroll = renderCheckGridScroll();
                 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: isGridScroll || isFirebase ? "cursor" : "page", data: renderGridAndListData(selectedTabData.viewImage, "grid"), size: size["default"], limit: limit, cursor: cursor["default"], loading: tableLoading["default"], infinityScroll: isGridScroll, horizontalScroll: isGridScroll, pageIndex: pageIndex["default"], 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: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: handlePagination, gridColClassName: (_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareListGridColClassName, className: "mt-5", hidePagination: (_13 = props.organise) === null || _13 === void 0 ? void 0 : _13.hidePagination })));
+                        }, linkType: props.linkType, custom: props.custom, newTabUrl: "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                            handlePagination(value, "default");
+                        }, gridColClassName: (_o = props.bareSettings) === null || _o === void 0 ? void 0 : _o.bareListGridColClassName, className: "mt-5", hidePagination: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.hidePagination })));
             }
             else if (selectedTabData.viewType === "calendar") {
                 var calendarSettings_1 = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.calendarSettings;
@@ -4219,7 +4409,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     : ["red", "blue", "green", "indigo", "orange", "violet", "yellow"];
                 var valuesWithColour_1 = {};
                 if (calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.groupId) {
-                    spaceTableData.map(function (eachTableData) {
+                    spaceTableData["default"].map(function (eachTableData) {
                         var _a;
                         if (listOfColors_1.length === 0)
                             return null;
@@ -4236,8 +4426,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 var renderEventAvailabilities = function () {
                     var eventAvailabilities = [];
                     if (calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.startDate) {
-                        for (var _i = 0, spaceTableData_1 = spaceTableData; _i < spaceTableData_1.length; _i++) {
-                            var eachData = spaceTableData_1[_i];
+                        for (var _i = 0, _a = spaceTableData["default"]; _i < _a.length; _i++) {
+                            var eachData = _a[_i];
                             if (!eachData[calendarSettings_1.startDate])
                                 break;
                             else if (!(0, moment_1.default)(eachData[calendarSettings_1.startDate], "YYYY-MM-DD HH:mm A").isValid()) {
@@ -4304,11 +4494,11 @@ 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: (_14 = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _14 !== void 0 ? _14 : 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: (_q = calendarSettings_1 === null || calendarSettings_1 === void 0 ? void 0 : calendarSettings_1.defaultView) !== null && _q !== void 0 ? _q : calendarView, handleMonthChange: function (date) {
                         var startOfMonth = (0, moment_1.default)(calendarTabMonth).startOf("month");
                         var endOfMonth = (0, moment_1.default)(calendarTabMonth).endOf("month");
                         if (!(0, moment_1.default)(date).isBetween(startOfMonth, endOfMonth)) {
-                            setTableLoading(true);
+                            setTableLoading({ default: true });
                         }
                         setCalendarTabMonth(date);
                     }, handleViewChange: setCalendarView, renderEventAvailabilities: renderEventAvailabilities, onClickEvent: function (id) {
@@ -4320,7 +4510,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 = (_15 = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _15 === void 0 ? void 0 : _15.call(feedsSettings_1, tableData, spaceTableData);
+                var customFeedsData = (_r = feedsSettings_1 === null || feedsSettings_1 === void 0 ? void 0 : feedsSettings_1.customFeedsData) === null || _r === void 0 ? void 0 : _r.call(feedsSettings_1, tableData, spaceTableData);
                 if (customFeedsData && customFeedsData.length > 0) {
                     customFeedsData.map(function (eachData) {
                         var _a, _b, _c, _d;
@@ -4343,7 +4533,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     if (IconFound) {
                         selectedIcon_1 = react_1.default.createElement(IconFound, { className: "h-5 w-5 text-white" });
                     }
-                    spaceTableData.map(function (eachData) {
+                    spaceTableData["default"].map(function (eachData) {
                         var _a, _b;
                         if (feedsSettings_1 && feedsSettings_1.title && feedsSettings_1.desc) {
                             var content = {
@@ -4361,9 +4551,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: (_16 = props.organise) === null || _16 === void 0 ? void 0 : _16.darkMode }),
+                    react_1.default.createElement(feeds_1.Feeds, { bold: true, content: contentList_1, darkMode: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.darkMode }),
                     react_1.default.createElement("div", { className: "my-10" }),
-                    contentList_1.length > 0 && !((_17 = props.organise) === null || _17 === void 0 ? void 0 : _17.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData, size: size, limit: limit, cursor: cursor, pageIndex: pageIndex, paginationType: isFirebase ? "cursor" : "page", handleUpdatePageIndex: handlePagination, darkMode: (_18 = props.organise) === null || _18 === void 0 ? void 0 : _18.darkMode }))))));
+                    contentList_1.length > 0 && !((_t = props.organise) === null || _t === void 0 ? void 0 : _t.hidePagination) && (react_1.default.createElement(pagination_1.Pagination, { data: tableData["default"], size: size["default"], limit: limit["default"], cursor: cursor["default"], pageIndex: pageIndex["default"], paginationType: isFirebase ? "cursor" : "page", handleUpdatePageIndex: function (value) {
+                            handlePagination(value, "default");
+                        }, darkMode: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.darkMode }))))));
             }
             else if (selectedTabData.viewType === "map") {
                 var mapSettings_1 = selectedTabData.mapSettings;
@@ -4379,7 +4571,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         "purple",
                     ];
                     if (mapSettings_1.group) {
-                        spaceTableData.map(function (eachData) {
+                        spaceTableData["default"].map(function (eachData) {
                             if (eachData[mapSettings_1.group] &&
                                 !uniqueGroupList_1.includes(eachData[mapSettings_1.group])) {
                                 uniqueGroupList_1.push(eachData[mapSettings_1.group]);
@@ -4410,7 +4602,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     var infoWindowHeaderComponent = function (_, data) {
                         return (react_1.default.createElement("p", { className: "text-primary-500 font-semibold text-base" }, data.title));
                     };
-                    spaceTableData.map(function (eachData) {
+                    spaceTableData["default"].map(function (eachData) {
                         var _a, _b, _c, _d, _e, _f, _g, _h;
                         var eachMarkerColor = "white";
                         if (mapSettings_1.group) {
@@ -4462,7 +4654,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 = (_19 = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _19 !== void 0 ? _19 : "";
+                var kanbanTitle_2 = (_v = kanbanSettings === null || kanbanSettings === void 0 ? void 0 : kanbanSettings.title) !== null && _v !== void 0 ? _v : "";
                 var nullColumn_1 = false;
                 var groupBy_1 = [];
                 var groupLabel_1 = [];
@@ -4482,7 +4674,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return null;
                 });
                 var kanbanData = renderGridAndListData("", "grid", kanbanTitle_2);
-                return (react_1.default.createElement(kanban_1.Kanban, { data: kanbanData, loading: tableLoading, groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
+                return (react_1.default.createElement(kanban_1.Kanban, { data: kanbanData, loading: tableLoading["default"], groupBy: groupBy_1, groupId: kanbanTitle_2 !== null && kanbanTitle_2 !== void 0 ? kanbanTitle_2 : "", groupLabel: groupLabel_1.length > 0 ? groupLabel_1 : undefined, nullColumn: nullColumn_1, alertMessage: kanbanData.length === limit
                         ? "Data has exceeded limit, please apply filters"
                         : "", draggable: true, droppable: kanbanDroppable, onUpdateData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                         var _a;
@@ -5058,7 +5250,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_6 = (_5 = props.renderSettings) === null || _5 === void 0 ? void 0 : _5.renderLoadingUI) === null || _6 === void 0 ? void 0 : _6.call(_5)) && loading ? ((_7 = props.renderSettings) === null || _7 === void 0 ? void 0 : _7.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_7 = (_6 = props.renderSettings) === null || _6 === void 0 ? void 0 : _6.renderLoadingUI) === null || _7 === void 0 ? void 0 : _7.call(_6)) && loading ? ((_8 = props.renderSettings) === null || _8 === void 0 ? void 0 : _8.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;