blixify-ui-web 1.2.181 → 1.2.183

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

@@ -82,7 +82,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DataTemplate = void 0;
+exports.DataTemplate = exports.FORMULA_VIEW_MAX_ROWS = void 0;
 var outline_1 = require("@heroicons/react/24/outline");
 var HeroIcons = __importStar(require("@heroicons/react/24/solid"));
 // INFO: the outline bookmark, for a tab that is not the default one. HeroIcons
@@ -135,8 +135,8 @@ var link_1 = require("../../structure/link");
 var authModule_1 = require("../authModule");
 var blobModule_1 = require("../blobModule");
 var listModule_1 = require("../listModule");
+var formula_1 = require("../formula");
 var moduleUtils_1 = require("../moduleUtils");
-var queryForm_1 = require("../queryForm");
 var readModule_1 = require("../readModule");
 var readQuery_1 = require("../readQuery");
 var unionPagination_1 = require("./unionPagination");
@@ -146,7 +146,6 @@ var utils_1 = require("../utils");
 var writeQuery_1 = require("../writeQuery");
 var activityModal_1 = require("./activityModal");
 var authModal_1 = require("./authModal");
-var dataStateModel_1 = require("./dataStateModel");
 var indexedDb_1 = require("./indexedDb");
 var socket_1 = require("./socket");
 var newPagination_1 = require("../../display/newPagination");
@@ -187,6 +186,9 @@ var handleIsEmptyElement = function (element) {
 };
 // INFO: rows-per-page choices offered in the view settings panel
 var PAGE_LIMIT_OPTIONS = [10, 25, 50, 100];
+// INFO: the most rows a formula sort or filter reads into the browser; each is
+// evaluated, filtered and ordered locally, so a larger read could freeze the tab
+exports.FORMULA_VIEW_MAX_ROWS = 5000;
 var CALENDAR_VIEW_BY_SWITCH = {
     month: "dayGridMonth",
     week: "timeGridWeek",
@@ -212,10 +214,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // Every read of the view type below uses resolvedType. The distinction matters
     // most in effect dependency arrays — following props.type there would leave
     // the list never refetching while the panel is open, which fails silently.
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91, _92;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91, _92, _93, _94;
     // INFO: the panel cannot navigate its way out — handleNavigate("read") is
     // routed straight back into it — so expand-to-full-page is local state.
-    var _93 = (0, react_1.useState)(false), drawerPageView = _93[0], setDrawerPageView = _93[1];
+    var _95 = (0, react_1.useState)(false), drawerPageView = _95[0], setDrawerPageView = _95[1];
     // INFO: the panel keeps rendering the record it was opened with rather than
     // live props. Without this, navigating back to the list would re-render the
     // still-mounted panel as a second list behind the overlay.
@@ -307,18 +309,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _94 = intialiseDefaultFilterValues(), initialFilterSearch = _94.initialFilterSearch, initialFilterSearchParams = _94.initialFilterSearchParams, initialFilterSelection = _94.initialFilterSelection, initialFilterReference = _94.initialFilterReference, initialFilterReferenceDate = _94.initialFilterReferenceDate;
+    var _96 = intialiseDefaultFilterValues(), initialFilterSearch = _96.initialFilterSearch, initialFilterSearchParams = _96.initialFilterSearchParams, initialFilterSelection = _96.initialFilterSelection, initialFilterReference = _96.initialFilterReference, initialFilterReferenceDate = _96.initialFilterReferenceDate;
     // INFO: Persist view state hook — handles storage read/write for filter/sort/column state
-    var _95 = (0, viewStatePersistence_1.usePersistedViewState)({
+    var _97 = (0, viewStatePersistence_1.usePersistedViewState)({
         mode: (_b = props.organise) === null || _b === void 0 ? void 0 : _b.persistViewState,
         collectionId: props.collectionId,
         persistKey: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.persistKey,
         type: resolvedType,
-    }), rawPersistedState = _95.persistedState, isPersistEnabled = _95.isEnabled, handleSaveView = _95.handleSaveView, handleRegisterViewSnapshot = _95.handleRegisterViewSnapshot;
+    }), rawPersistedState = _97.persistedState, isPersistEnabled = _97.isEnabled, handleSaveView = _97.handleSaveView, handleRegisterViewSnapshot = _97.handleRegisterViewSnapshot;
     // INFO: drop stored filters/sort on removed columns — they would empty the table
     var persistedState = (0, react_1.useMemo)(function () { return (0, viewStatePersistence_1.handlePruneStaleColumns)(rawPersistedState, props.model); }, [rawPersistedState, props.model]);
-    var _96 = (0, react_1.useState)(false), loading = _96[0], setLoading = _96[1];
-    var _97 = (0, react_1.useState)(), notification = _97[0], setNotification = _97[1];
+    var _98 = (0, react_1.useState)(false), loading = _98[0], setLoading = _98[1];
+    var _99 = (0, react_1.useState)(), notification = _99[0], setNotification = _99[1];
     // INFO: a success toast is confirmation, not a decision — it clears itself so
     // it never sits on the floating step bar; errors stay until dismissed
     (0, react_1.useEffect)(function () {
@@ -328,63 +330,62 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return function () { return clearTimeout(timer); };
     }, [notification]);
     //INFO : Used by List
-    var _98 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _d !== void 0 ? _d : initialFilterSearch), filterSearch = _98[0], setFilterSearch = _98[1];
-    var _99 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _e !== void 0 ? _e : initialFilterSearchParams), filterSearchParams = _99[0], setFilterSearchParams = _99[1];
-    var _100 = (0, react_1.useState)((_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _f !== void 0 ? _f : initialFilterSelection), filterSelection = _100[0], setFilterSelection = _100[1];
-    var _101 = (0, react_1.useState)((_g = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _g !== void 0 ? _g : initialFilterReference), filterReference = _101[0], setFilterReference = _101[1];
-    var _102 = (0, react_1.useState)({}), filterReferenceSearch = _102[0], setFilterReferenceSearch = _102[1];
-    var _103 = (0, react_1.useState)({}), filterReferenceList = _103[0], setFilterReferenceList = _103[1];
-    var _104 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
+    var _100 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _d !== void 0 ? _d : initialFilterSearch), filterSearch = _100[0], setFilterSearch = _100[1];
+    var _101 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _e !== void 0 ? _e : initialFilterSearchParams), filterSearchParams = _101[0], setFilterSearchParams = _101[1];
+    var _102 = (0, react_1.useState)((_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _f !== void 0 ? _f : initialFilterSelection), filterSelection = _102[0], setFilterSelection = _102[1];
+    var _103 = (0, react_1.useState)((_g = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _g !== void 0 ? _g : initialFilterReference), filterReference = _103[0], setFilterReference = _103[1];
+    var _104 = (0, react_1.useState)({}), filterReferenceSearch = _104[0], setFilterReferenceSearch = _104[1];
+    var _105 = (0, react_1.useState)({}), filterReferenceList = _105[0], setFilterReferenceList = _105[1];
+    var _106 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
         ? (0, viewStatePersistence_1.parseDateFilterState)(persistedState.filterReferenceDate)
-        : initialFilterReferenceDate), filterReferenceDate = _104[0], setFilterReferenceDate = _104[1];
-    var _105 = (0, react_1.useState)(true), tableLoading = _105[0], setTableLoading = _105[1];
-    var _106 = (0, react_1.useState)(""), cursor = _106[0], setCursor = _106[1];
-    var _107 = (0, react_1.useState)(""), lastCursor = _107[0], setLastCursor = _107[1];
-    var _108 = (0, react_1.useState)([]), tableData = _108[0], setTableData = _108[1];
-    var _109 = (0, react_1.useState)([]), spaceTableData = _109[0], setSpaceTableData = _109[1];
+        : initialFilterReferenceDate), filterReferenceDate = _106[0], setFilterReferenceDate = _106[1];
+    var _107 = (0, react_1.useState)(true), tableLoading = _107[0], setTableLoading = _107[1];
+    var _108 = (0, react_1.useState)(""), cursor = _108[0], setCursor = _108[1];
+    var _109 = (0, react_1.useState)(""), lastCursor = _109[0], setLastCursor = _109[1];
+    var _110 = (0, react_1.useState)([]), tableData = _110[0], setTableData = _110[1];
+    var _111 = (0, react_1.useState)([]), spaceTableData = _111[0], setSpaceTableData = _111[1];
     // INFO: a save resolves after later renders, so it reads the table from here —
     // the state it closed over can predate an earlier save on the same row
     var tableDataRef = (0, react_1.useRef)([]);
     var spaceTableDataRef = (0, react_1.useRef)([]);
     tableDataRef.current = tableData;
     spaceTableDataRef.current = spaceTableData;
-    var _110 = (0, react_1.useState)(0), size = _110[0], setSize = _110[1];
-    var _111 = (0, react_1.useState)((_k = (_h = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _h !== void 0 ? _h : (_j = props.organise) === null || _j === void 0 ? void 0 : _j.pageIndex) !== null && _k !== void 0 ? _k : 0), pageIndex = _111[0], setPageIndex = _111[1];
-    var _112 = (0, react_1.useState)([]), selectedIds = _112[0], setSelectedIds = _112[1];
-    var _113 = (0, react_1.useState)(false), selectAll = _113[0], setSelectAll = _113[1];
-    var _114 = (0, react_1.useState)(""), deletePasscode = _114[0], setDeletePasscode = _114[1];
-    var _115 = (0, react_1.useState)(""), deletePasscodeInput = _115[0], setDeletePasscodeInput = _115[1];
-    var _116 = (0, react_1.useState)(""), deleteFeedId = _116[0], setDeleteFeedId = _116[1];
+    var _112 = (0, react_1.useState)(0), size = _112[0], setSize = _112[1];
+    var _113 = (0, react_1.useState)((_k = (_h = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _h !== void 0 ? _h : (_j = props.organise) === null || _j === void 0 ? void 0 : _j.pageIndex) !== null && _k !== void 0 ? _k : 0), pageIndex = _113[0], setPageIndex = _113[1];
+    var _114 = (0, react_1.useState)([]), selectedIds = _114[0], setSelectedIds = _114[1];
+    var _115 = (0, react_1.useState)(false), selectAll = _115[0], setSelectAll = _115[1];
+    var _116 = (0, react_1.useState)(""), deletePasscode = _116[0], setDeletePasscode = _116[1];
+    var _117 = (0, react_1.useState)(""), deletePasscodeInput = _117[0], setDeletePasscodeInput = _117[1];
+    var _118 = (0, react_1.useState)(""), deleteFeedId = _118[0], setDeleteFeedId = _118[1];
     //INFO : Used by List Organise
     // INFO: Internal sort state that overrides props.organise?.sort when
     // persistViewState is enabled and a persisted sort exists
-    var _117 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _l !== void 0 ? _l : undefined), persistedSort = _117[0], setPersistedSort = _117[1];
-    var _118 = (0, react_1.useState)(false), filterDraft = _118[0], setFilterDraft = _118[1];
-    var _119 = (0, react_1.useState)(false), addTabModal = _119[0], setAddTabModal = _119[1];
-    var _120 = (0, react_1.useState)(-1), editTabIndex = _120[0], setEditTabIndex = _120[1];
+    var _119 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _l !== void 0 ? _l : undefined), persistedSort = _119[0], setPersistedSort = _119[1];
+    var _120 = (0, react_1.useState)(false), filterDraft = _120[0], setFilterDraft = _120[1];
+    var _121 = (0, react_1.useState)(false), addTabModal = _121[0], setAddTabModal = _121[1];
+    var _122 = (0, react_1.useState)(-1), editTabIndex = _122[0], setEditTabIndex = _122[1];
     //INFO : resolve the initial tab synchronously so the mount cond is already
     // tab-scoped — an empty initial tab caused a second wasted list fetch
-    var _121 = (0, react_1.useState)(function () {
+    var _123 = (0, react_1.useState)(function () {
         var _a, _b;
         return (0, listModule_1.renderSelectedRefreshTab)(props.localURLEndpoint, resolvedType, props.collectionId, props.id, (_a = props.organise) === null || _a === void 0 ? void 0 : _a.extendedTabs, (_b = props.organise) === null || _b === void 0 ? void 0 : _b.viewId);
-    }), selectedTab = _121[0], setSelectedTab = _121[1];
-    var _122 = (0, react_1.useState)("dayGridMonth"), calendarView = _122[0], setCalendarView = _122[1];
+    }), selectedTab = _123[0], setSelectedTab = _123[1];
+    var _124 = (0, react_1.useState)("dayGridMonth"), calendarView = _124[0], setCalendarView = _124[1];
     // INFO: bareNewDTW calendar viewSwitch mode — drives the NewCalendar variant
     // (calendarView above drives the matching range query)
-    var _123 = (0, react_1.useState)("month"), newCalendarViewMode = _123[0], setNewCalendarViewMode = _123[1];
-    var _124 = (0, react_1.useState)(new Date()), calendarTabMonth = _124[0], setCalendarTabMonth = _124[1];
+    var _125 = (0, react_1.useState)("month"), newCalendarViewMode = _125[0], setNewCalendarViewMode = _125[1];
+    var _126 = (0, react_1.useState)(new Date()), calendarTabMonth = _126[0], setCalendarTabMonth = _126[1];
     // INFO: defaultViewSwitch picks the opening view only — the tab re-inits
     // whenever its settings change, and that must not undo the user's switch
     var calendarViewInitRef = (0, react_1.useRef)(false);
-    var _125 = (0, react_1.useState)(true), kanbanDroppable = _125[0], setKanbanDroppable = _125[1];
-    var _126 = (0, react_1.useState)([]), kanbanOptions = _126[0], setKanbanOptions = _126[1];
-    var _127 = (0, react_1.useState)(false), queryForm = _127[0], setQueryForm = _127[1];
-    var _128 = (0, react_1.useState)(false), batchUpdateModal = _128[0], setBatchUpdateModal = _128[1];
-    var _129 = (0, react_1.useState)({
+    var _127 = (0, react_1.useState)(true), kanbanDroppable = _127[0], setKanbanDroppable = _127[1];
+    var _128 = (0, react_1.useState)([]), kanbanOptions = _128[0], setKanbanOptions = _128[1];
+    var _129 = (0, react_1.useState)(false), batchUpdateModal = _129[0], setBatchUpdateModal = _129[1];
+    var _130 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _129[0], setBatchUpdateData = _129[1];
-    var _130 = (0, react_1.useState)(function () {
+    }), batchUpdateData = _130[0], setBatchUpdateData = _130[1];
+    var _131 = (0, react_1.useState)(function () {
         var baseModel = (props === null || props === void 0 ? void 0 : props.model) || [];
         if (!persistedState)
             return baseModel;
@@ -410,8 +411,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             });
         }
         return model;
-    }), structure = _130[0], setStructure = _130[1];
-    var _131 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _131[0], setAdditionalQuery = _131[1];
+    }), structure = _131[0], setStructure = _131[1];
+    var _132 = (0, react_1.useState)(((_m = props === null || props === void 0 ? void 0 : props.organise) === null || _m === void 0 ? void 0 : _m.additionalQuery) || []), additionalQuery = _132[0], setAdditionalQuery = _132[1];
     // INFO: State for user-configurable flex filters (Monday.com-style)
     // INFO: Initialize with one empty row so users see inputs immediately without clicking "Add Filter"
     var defaultFlexFilterRow = [
@@ -422,9 +423,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             value: undefined,
         },
     ];
-    var _132 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _133 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFilters = _132[0], setFlexFilters = _132[1];
+        : defaultFlexFilterRow), flexFilters = _133[0], setFlexFilters = _133[1];
     // INFO: always-current mirror of flexFilters, read by the imperative apply/
     // clear methods so chained calls in one tick aren't stale.
     var flexFiltersRef = (0, react_1.useRef)(flexFilters);
@@ -437,74 +438,76 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     }, [flexFilters]);
     // INFO: Debounced version of flexFilters used by renderImpSearchFilterConditions
     // to prevent API calls on every keystroke when typing in value inputs
-    var _133 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _134 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFiltersDebounced = _133[0], setFlexFiltersDebounced = _133[1];
-    var _134 = (0, react_1.useState)({}), flexFilterReferenceOptions = _134[0], setFlexFilterReferenceOptions = _134[1];
-    var _135 = (0, react_1.useState)({}), flexFilterReferenceSearch = _135[0], setFlexFilterReferenceSearch = _135[1];
-    var _136 = (0, react_1.useState)(false), flexFilterModalOpen = _136[0], setFlexFilterModalOpen = _136[1];
-    var _137 = (0, react_1.useState)(false), viewSettingsModalOpen = _137[0], setViewSettingsModalOpen = _137[1];
+        : defaultFlexFilterRow), flexFiltersDebounced = _134[0], setFlexFiltersDebounced = _134[1];
+    // INFO: the filter rows of the export being set up — started from the
+    // list's own when the export opens, so changing them leaves the list as it is
+    var _135 = (0, react_1.useState)(defaultFlexFilterRow), exportFlexFilters = _135[0], setExportFlexFilters = _135[1];
+    var _136 = (0, react_1.useState)({}), flexFilterReferenceOptions = _136[0], setFlexFilterReferenceOptions = _136[1];
+    var _137 = (0, react_1.useState)({}), flexFilterReferenceSearch = _137[0], setFlexFilterReferenceSearch = _137[1];
+    var _138 = (0, react_1.useState)(false), flexFilterModalOpen = _138[0], setFlexFilterModalOpen = _138[1];
+    var _139 = (0, react_1.useState)(false), viewSettingsModalOpen = _139[0], setViewSettingsModalOpen = _139[1];
     // INFO: Columns the end user chose to hide (bareSettings.bareViewSettings).
     // Deliberately kept out of `structure`: the props-sync effect below resets
     // structure to props.model whenever props change, which would wipe the
     // choice, and the persist effect derives schema-level hiddenColumnIds from
     // structure — writing user hides there would blur the two concepts.
-    var _138 = (0, react_1.useState)((_o = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _o !== void 0 ? _o : []), userHiddenColumnIds = _138[0], setUserHiddenColumnIds = _138[1];
-    var _139 = (0, react_1.useState)(""), columnSearch = _139[0], setColumnSearch = _139[1];
-    var _140 = (0, react_1.useState)([]), savedViews = _140[0], setSavedViews = _140[1];
-    var _141 = (0, react_1.useState)(null), activeSavedViewId = _141[0], setActiveSavedViewId = _141[1];
+    var _140 = (0, react_1.useState)((_o = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _o !== void 0 ? _o : []), userHiddenColumnIds = _140[0], setUserHiddenColumnIds = _140[1];
+    var _141 = (0, react_1.useState)(""), columnSearch = _141[0], setColumnSearch = _141[1];
+    var _142 = (0, react_1.useState)([]), savedViews = _142[0], setSavedViews = _142[1];
+    var _143 = (0, react_1.useState)(null), activeSavedViewId = _143[0], setActiveSavedViewId = _143[1];
     // INFO: null while the name box is closed
-    var _142 = (0, react_1.useState)(null), savedViewName = _142[0], setSavedViewName = _142[1];
-    var _143 = (0, react_1.useState)(null), deletingSavedViewId = _143[0], setDeletingSavedViewId = _143[1];
-    var _144 = (0, react_1.useState)(null), draggingColumnId = _144[0], setDraggingColumnId = _144[1];
+    var _144 = (0, react_1.useState)(null), savedViewName = _144[0], setSavedViewName = _144[1];
+    var _145 = (0, react_1.useState)(null), deletingSavedViewId = _145[0], setDeletingSavedViewId = _145[1];
+    var _146 = (0, react_1.useState)(null), draggingColumnId = _146[0], setDraggingColumnId = _146[1];
     var columnRowRefs = (0, react_1.useRef)({});
     //INFO : Used by Auth
-    var _145 = (0, react_1.useState)({
+    var _147 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _145[0], setAuthMethods = _145[1];
-    var _146 = (0, react_1.useState)(""), selectedAuthMethod = _146[0], setSelectedAuthMethod = _146[1];
+    }), authMethods = _147[0], setAuthMethods = _147[1];
+    var _148 = (0, react_1.useState)(""), selectedAuthMethod = _148[0], setSelectedAuthMethod = _148[1];
     // INFO: the sign-in check of a users datasheet's record is running; the
     // panel shows a spinner rather than nothing, which read as "no login"
-    var _147 = (0, react_1.useState)(false), authLoading = _147[0], setAuthLoading = _147[1];
+    var _149 = (0, react_1.useState)(false), authLoading = _149[0], setAuthLoading = _149[1];
     // INFO: a delete is running — the ref answers a second tap at once, before
     // the state has rendered, and the state disables the confirm button
     var deletingRef = (0, react_1.useRef)(false);
-    var _148 = (0, react_1.useState)(false), deleting = _148[0], setDeleting = _148[1];
+    var _150 = (0, react_1.useState)(false), deleting = _150[0], setDeleting = _150[1];
     // INFO: Used by Activity Log
-    var _149 = (0, react_1.useState)(false), activityModal = _149[0], setActivityModal = _149[1];
-    var _150 = (0, react_1.useState)(""), activityId = _150[0], setActivityId = _150[1];
+    var _151 = (0, react_1.useState)(false), activityModal = _151[0], setActivityModal = _151[1];
+    var _152 = (0, react_1.useState)(""), activityId = _152[0], setActivityId = _152[1];
     //INFO : Used by Export
-    var _151 = (0, react_1.useState)(null), csvFile = _151[0], setCSVFile = _151[1];
-    var _152 = (0, react_1.useState)([]), csvFileData = _152[0], setCSVFileData = _152[1];
-    var _153 = (0, react_1.useState)(0), stepCSVIndex = _153[0], setStepCSVIndex = _153[1];
-    var _154 = (0, react_1.useState)({}), listCSVMapAttribute = _154[0], setListCSVMapAttribute = _154[1];
-    var _155 = (0, react_1.useState)({}), listCSVObjAttribute = _155[0], setListCSVObjAttribute = _155[1];
-    var _156 = (0, react_1.useState)([]), csvAPIAttribute = _156[0], setCSVAPIAttribute = _156[1];
-    var _157 = (0, react_1.useState)(((_p = props.devSettings.currentUser) === null || _p === void 0 ? void 0 : _p.userEmail) || ""), exportCSVEmail = _157[0], setExportCSVEmail = _157[1];
-    var _158 = (0, react_1.useState)(((_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.defaultExportPDFName) || ""), exportPDFTitle = _158[0], setExportPDFTitle = _158[1];
-    var _159 = (0, react_1.useState)(false), exportPDFLoading = _159[0], setExportPDFLoading = _159[1];
-    var _160 = (0, react_1.useState)(false), exportReadPDFLoading = _160[0], setExportReadPDFLoading = _160[1];
-    var _161 = (0, react_1.useState)((_u = (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.sumColumnId) !== null && _u !== void 0 ? _u : []), exportSumAttributeIds = _161[0], setExportSumAttributeIds = _161[1];
-    var _162 = (0, react_1.useState)((_x = (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.exportSettings) === null || _w === void 0 ? void 0 : _w.hideSubItems) !== null && _x !== void 0 ? _x : false), hideSubItems = _162[0], setHideSubItems = _162[1];
-    var _163 = (0, react_1.useState)([]), importTableData = _163[0], setImportTableData = _163[1];
-    var _164 = (0, react_1.useState)([]), queryList = _164[0], setQueryList = _164[1];
-    var _165 = (0, react_1.useState)(undefined), allQueryList = _165[0], setAllQueryList = _165[1];
-    var _166 = (0, react_1.useState)(-1), queryIndex = _166[0], setQueryIndex = _166[1];
+    var _153 = (0, react_1.useState)(null), csvFile = _153[0], setCSVFile = _153[1];
+    var _154 = (0, react_1.useState)([]), csvFileData = _154[0], setCSVFileData = _154[1];
+    var _155 = (0, react_1.useState)(0), stepCSVIndex = _155[0], setStepCSVIndex = _155[1];
+    var _156 = (0, react_1.useState)({}), listCSVMapAttribute = _156[0], setListCSVMapAttribute = _156[1];
+    var _157 = (0, react_1.useState)({}), listCSVObjAttribute = _157[0], setListCSVObjAttribute = _157[1];
+    var _158 = (0, react_1.useState)([]), csvAPIAttribute = _158[0], setCSVAPIAttribute = _158[1];
+    var _159 = (0, react_1.useState)(((_p = props.devSettings.currentUser) === null || _p === void 0 ? void 0 : _p.userEmail) || ""), exportCSVEmail = _159[0], setExportCSVEmail = _159[1];
+    var _160 = (0, react_1.useState)(((_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.defaultExportPDFName) || ""), exportPDFTitle = _160[0], setExportPDFTitle = _160[1];
+    var _161 = (0, react_1.useState)(false), exportPDFLoading = _161[0], setExportPDFLoading = _161[1];
+    var _162 = (0, react_1.useState)(false), exportReadPDFLoading = _162[0], setExportReadPDFLoading = _162[1];
+    var _163 = (0, react_1.useState)((_u = (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.sumColumnId) !== null && _u !== void 0 ? _u : []), exportSumAttributeIds = _163[0], setExportSumAttributeIds = _163[1];
+    var _164 = (0, react_1.useState)((_x = (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.exportSettings) === null || _w === void 0 ? void 0 : _w.hideSubItems) !== null && _x !== void 0 ? _x : false), hideSubItems = _164[0], setHideSubItems = _164[1];
+    var _165 = (0, react_1.useState)([]), importTableData = _165[0], setImportTableData = _165[1];
+    var _166 = (0, react_1.useState)([]), queryList = _166[0], setQueryList = _166[1];
+    var _167 = (0, react_1.useState)(undefined), allQueryList = _167[0], setAllQueryList = _167[1];
     // INFO: a restored state wins over the prop; its "" is a list the user
     // ungrouped, so it opens ungrouped
-    var _167 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.groupBy) !== undefined
+    var _168 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.groupBy) !== undefined
         ? persistedState.groupBy || undefined
-        : (_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _167[0], setGroupId = _167[1];
+        : (_y = props.organise) === null || _y === void 0 ? void 0 : _y.groupBy), groupId = _168[0], setGroupId = _168[1];
     // INFO: Monday-board per-group paging. Keyed by the group key that
     // handleBuildNewTableGroups() produces (a list option or "Unknown/No Value").
     // Each group tracks its own loaded cursor + total so it can lazily load its
     // next page as the user scrolls inside that band, independent of every other
     // group. Only used when renderCheckGroupPaging() is true.
-    var _168 = (0, react_1.useState)({}), groupPageState = _168[0], setGroupPageState = _168[1];
+    var _169 = (0, react_1.useState)({}), groupPageState = _169[0], setGroupPageState = _169[1];
     // INFO: read fresh inside the async per-group fetch so chained scroll fires
     // in one tick do not re-fetch an already in-flight page.
     var groupPageStateRef = (0, react_1.useRef)({});
@@ -513,59 +516,59 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // list was re-read (new search, filter, sort or grouping) is dropped on
     // arrival instead of appending rows that belong to the old list
     var groupPagingGenRef = (0, react_1.useRef)(0);
-    var _169 = (0, react_1.useState)(""), readTabSection = _169[0], setReadTabSection = _169[1];
-    var _170 = (0, react_1.useState)(false), readFloatingNav = _170[0], setReadFloatingNav = _170[1];
+    var _170 = (0, react_1.useState)(""), readTabSection = _170[0], setReadTabSection = _170[1];
+    var _171 = (0, react_1.useState)(false), readFloatingNav = _171[0], setReadFloatingNav = _171[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _171 = (0, react_1.useState)(false), modalVisible = _171[0], setModalVisible = _171[1];
-    var _172 = (0, react_1.useState)(false), deleteModal = _172[0], setDeleteModal = _172[1];
-    var _173 = (0, react_1.useState)(false), excelModal = _173[0], setExcelModal = _173[1];
-    var _174 = (0, react_1.useState)(false), exportExcel = _174[0], setExportExcel = _174[1];
-    var _175 = (0, react_1.useState)(""), exportType = _175[0], setExportType = _175[1];
-    var _176 = (0, react_1.useState)(false), exportQR = _176[0], setExportQR = _176[1];
-    var _177 = (0, react_1.useState)(function () {
+    var _172 = (0, react_1.useState)(false), modalVisible = _172[0], setModalVisible = _172[1];
+    var _173 = (0, react_1.useState)(false), deleteModal = _173[0], setDeleteModal = _173[1];
+    var _174 = (0, react_1.useState)(false), excelModal = _174[0], setExcelModal = _174[1];
+    var _175 = (0, react_1.useState)(false), exportExcel = _175[0], setExportExcel = _175[1];
+    var _176 = (0, react_1.useState)(""), exportType = _176[0], setExportType = _176[1];
+    var _177 = (0, react_1.useState)(false), exportQR = _177[0], setExportQR = _177[1];
+    var _178 = (0, react_1.useState)(function () {
         var _a, _b;
         var firstTabId = (_b = (_a = structure.find(function (item) { return item.tabId; })) === null || _a === void 0 ? void 0 : _a.tabId) !== null && _b !== void 0 ? _b : "";
         return firstTabId;
-    }), activeTab = _177[0], setActiveTab = _177[1];
-    var _178 = (0, react_1.useState)(false), signatureSigning = _178[0], setSignatureSigning = _178[1];
-    var _179 = (0, react_1.useState)({}), selectedData = _179[0], setSelectedData = _179[1];
-    var _180 = (0, react_1.useState)(""), selectedObjectStructureId = _180[0], setSelectedObjectStructureId = _180[1];
-    var _181 = (0, react_1.useState)(""), selectedObjectId = _181[0], setSelectedObjectId = _181[1];
-    var _182 = (0, react_1.useState)(""), selectedListAddressId = _182[0], setSelectedListAddressId = _182[1];
-    var _183 = (0, react_1.useState)(-1), selectedListAddressIndex = _183[0], setSelectedListAddressIndex = _183[1];
-    var _184 = (0, react_1.useState)({
+    }), activeTab = _178[0], setActiveTab = _178[1];
+    var _179 = (0, react_1.useState)(false), signatureSigning = _179[0], setSignatureSigning = _179[1];
+    var _180 = (0, react_1.useState)({}), selectedData = _180[0], setSelectedData = _180[1];
+    var _181 = (0, react_1.useState)(""), selectedObjectStructureId = _181[0], setSelectedObjectStructureId = _181[1];
+    var _182 = (0, react_1.useState)(""), selectedObjectId = _182[0], setSelectedObjectId = _182[1];
+    var _183 = (0, react_1.useState)(""), selectedListAddressId = _183[0], setSelectedListAddressId = _183[1];
+    var _184 = (0, react_1.useState)(-1), selectedListAddressIndex = _184[0], setSelectedListAddressIndex = _184[1];
+    var _185 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _184[0], setSelectedListAddress = _184[1];
-    var _185 = (0, react_1.useState)({}), selectedObjectData = _185[0], setSelectedObjectData = _185[1];
-    var _186 = (0, react_1.useState)(null), objectCellEdit = _186[0], setObjectCellEdit = _186[1];
-    var _187 = (0, react_1.useState)(false), referenceLoading = _187[0], setReferenceLoading = _187[1];
-    var _188 = (0, react_1.useState)({}), referencesOptions = _188[0], setReferencesOptions = _188[1];
-    var _189 = (0, react_1.useState)({}), referencesDetails = _189[0], setReferencesDetails = _189[1];
-    var _190 = (0, react_1.useState)({}), listReferencesOptions = _190[0], setListReferencesOptions = _190[1];
-    var _191 = (0, react_1.useState)({}), referenceDeleteTableData = _191[0], setReferenceDeleteTableData = _191[1];
-    var _192 = (0, react_1.useState)([]), relatedSections = _192[0], setRelatedSections = _192[1];
-    var _193 = (0, react_1.useState)(0), referenceDeleteIndex = _193[0], setReferenceDeleteIndex = _193[1];
-    var _194 = (0, react_1.useState)({
+    }), selectedListAddress = _185[0], setSelectedListAddress = _185[1];
+    var _186 = (0, react_1.useState)({}), selectedObjectData = _186[0], setSelectedObjectData = _186[1];
+    var _187 = (0, react_1.useState)(null), objectCellEdit = _187[0], setObjectCellEdit = _187[1];
+    var _188 = (0, react_1.useState)(false), referenceLoading = _188[0], setReferenceLoading = _188[1];
+    var _189 = (0, react_1.useState)({}), referencesOptions = _189[0], setReferencesOptions = _189[1];
+    var _190 = (0, react_1.useState)({}), referencesDetails = _190[0], setReferencesDetails = _190[1];
+    var _191 = (0, react_1.useState)({}), listReferencesOptions = _191[0], setListReferencesOptions = _191[1];
+    var _192 = (0, react_1.useState)({}), referenceDeleteTableData = _192[0], setReferenceDeleteTableData = _192[1];
+    var _193 = (0, react_1.useState)([]), relatedSections = _193[0], setRelatedSections = _193[1];
+    var _194 = (0, react_1.useState)(0), referenceDeleteIndex = _194[0], setReferenceDeleteIndex = _194[1];
+    var _195 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _194[0], setReferenceCreationModal = _194[1];
-    var _195 = (0, react_1.useState)({}), referenceModelSchema = _195[0], setReferenceSchema = _195[1];
-    var _196 = (0, react_1.useState)([]), kanbanChecked = _196[0], setKanbanChecked = _196[1];
+    }), referenceCreationModal = _195[0], setReferenceCreationModal = _195[1];
+    var _196 = (0, react_1.useState)({}), referenceModelSchema = _196[0], setReferenceSchema = _196[1];
+    var _197 = (0, react_1.useState)([]), kanbanChecked = _197[0], setKanbanChecked = _197[1];
     //INFO : Offline
-    var _197 = (0, react_1.useState)(0), offlineDataLength = _197[0], setOfflineDataLength = _197[1];
-    var _198 = (0, react_1.useState)(false), offlineModal = _198[0], setOfflineModal = _198[1];
+    var _198 = (0, react_1.useState)(0), offlineDataLength = _198[0], setOfflineDataLength = _198[1];
+    var _199 = (0, react_1.useState)(false), offlineModal = _199[0], setOfflineModal = _199[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _199 = (0, react_1.useState)(false), isLive = _199[0], setIsLive = _199[1];
-    var _200 = (0, react_1.useState)(false), isLiveOffline = _200[0], setIsLiveOffline = _200[1];
+    var _200 = (0, react_1.useState)(false), isLive = _200[0], setIsLive = _200[1];
+    var _201 = (0, react_1.useState)(false), isLiveOffline = _201[0], setIsLiveOffline = _201[1];
     // INFO: true when navigator is offline — used to switch ReadQueryHoc between
     // server reads (online, full pagination) and IndexedDB reads (offline, cached data).
     // Independent of SSE status so it works even when bareSocketName is not set.
-    var _201 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _201[0], setIsNetworkOffline = _201[1];
+    var _202 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _202[0], setIsNetworkOffline = _202[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -785,7 +788,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var isSchemaHideMode = ((_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.onChangeHide) ? true : false;
     // INFO: rows per page is a view setting the user can change, so it starts from
     // the persisted value and falls back to the consumer's limit
-    var _202 = (0, react_1.useState)((_12 = (_11 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _11 !== void 0 ? _11 : props.limit) !== null && _12 !== void 0 ? _12 : 10), pageLimit = _202[0], setPageLimit = _202[1];
+    var _203 = (0, react_1.useState)((_12 = (_11 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _11 !== void 0 ? _11 : props.limit) !== null && _12 !== void 0 ? _12 : 10), pageLimit = _203[0], setPageLimit = _203[1];
     var limit = pageLimit;
     var isSavedViewsEnabled = !!((_13 = props.organise) === null || _13 === void 0 ? void 0 : _13.savedViews) && resolvedType === "list";
     // INFO: an app that stores views takes over from this browser's storage, so
@@ -810,18 +813,88 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         setCursor("");
         setLastCursor("");
     };
-    var _203 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _203.canUpdateRecord, canInlineUpdate = _203.canInlineUpdate, canBatchUpdate = _203.canBatchUpdate, canDeleteRecord = _203.canDeleteRecord;
-    var isEditor = ((_17 = props.edit) === null || _17 === void 0 ? void 0 : _17.allEditable) ? true : false;
-    var isOffline = (_18 = props.bareSettings) === null || _18 === void 0 ? void 0 : _18.bareOffline;
+    //=====================================================================================
+    //SECTION: Formula columns — sorted and filtered on their computed value
+    //=====================================================================================
+    // INFO: a formula has no stored field, so a server sort or filter on one
+    // matches nothing. monday sorts and filters a formula on the value it shows,
+    // so the list does the same: the request leaves the formula out, reads every
+    // matching row, and the rows are filtered and ordered here. Only
+    // type "formula" columns take part — math columns behave as they always have.
+    var formulaColumnIds = structure
+        .filter(function (eachModel) { return eachModel.type === "formula"; })
+        .map(function (eachModel) { return eachModel.id; });
+    // INFO: Firebase pages by document cursor and a union by skip, so neither
+    // can hand over the whole set — there formula columns are not offered for
+    // sorting or filtering, rather than ordering one page
+    var isFormulaViewSupported = !isFirebase && !((_18 = (_17 = props.organise) === null || _17 === void 0 ? void 0 : _17.unionCollections) === null || _18 === void 0 ? void 0 : _18.length);
+    var formulaSort = isFormulaViewSupported &&
+        (activeSortId === null || activeSortId === void 0 ? void 0 : activeSortId.sortId) &&
+        formulaColumnIds.includes(activeSortId.sortId)
+        ? activeSortId
+        : undefined;
+    var formulaFlexQueries = isFormulaViewSupported && formulaColumnIds.length > 0
+        ? (0, listModule_1.renderFlexFilterConditions)(flexFiltersDebounced, structure).filter(function (eachQuery) { var _a; return formulaColumnIds.includes((_a = eachQuery.queryId) !== null && _a !== void 0 ? _a : ""); })
+        : [];
+    var isFormulaView = !!formulaSort || formulaFlexQueries.length > 0;
+    // INFO: the columns the flex filters offer — formulas only where they can
+    // be filtered on
+    var flexFilterStructure = isFormulaViewSupported
+        ? structure
+        : structure.filter(function (eachModel) { return eachModel.type !== "formula"; });
+    // INFO: an export's filters run on the export server, which cannot work out
+    // a formula, so its rows leave formula columns out — a formula filter on
+    // the list still narrows the export, by the ids of the rows it kept
+    var exportFilterStructure = structure.filter(function (eachModel) { return eachModel.type !== "formula"; });
+    // INFO: every matching row of a formula view, unsorted — pages are cut
+    // from it locally, so paging does not read the collection again
+    // INFO: the formula sort and filter the row cap was last announced for
+    var formulaCapNoticeRef = (0, react_1.useRef)("");
+    var formulaFullReadRef = (0, react_1.useRef)(null);
+    var handleApplyFormulaView = function (rows, displayRows) {
+        if (!isFormulaView)
+            return { rows: rows, displayRows: displayRows };
+        var entries = rows.map(function (eachRow, index) { return ({
+            row: eachRow,
+            displayRow: displayRows[index],
+            results: (0, formula_1.handleEvaluateFormulaRow)(eachRow, displayRows[index], structure),
+        }); });
+        var filtered = entries.filter(function (eachEntry) {
+            return formulaFlexQueries.every(function (eachQuery) {
+                var _a;
+                return (0, formula_1.handleMatchFormulaQuery)(eachEntry.results[(_a = eachQuery.queryId) !== null && _a !== void 0 ? _a : ""], eachQuery);
+            });
+        });
+        if (formulaSort) {
+            var direction_1 = formulaSort.type === "asc" ? 1 : -1;
+            filtered.sort(function (a, b) {
+                var aResult = a.results[formulaSort.sortId];
+                var bResult = b.results[formulaSort.sortId];
+                var aEmpty = (0, formula_1.handleIsFormulaEmpty)(aResult);
+                var bEmpty = (0, formula_1.handleIsFormulaEmpty)(bResult);
+                // INFO: blanks and errors sink to the bottom in either direction
+                if (aEmpty || bEmpty)
+                    return aEmpty === bEmpty ? 0 : aEmpty ? 1 : -1;
+                return direction_1 * (0, formula_1.handleCompareFormulaResults)(aResult, bResult);
+            });
+        }
+        return {
+            rows: filtered.map(function (eachEntry) { return eachEntry.row; }),
+            displayRows: filtered.map(function (eachEntry) { return eachEntry.displayRow; }),
+        };
+    };
+    var _204 = (0, permissions_1.handleResolveDataTemplateWritePermissions)(props.edit), canUpdateRecord = _204.canUpdateRecord, canInlineUpdate = _204.canInlineUpdate, canBatchUpdate = _204.canBatchUpdate, canDeleteRecord = _204.canDeleteRecord;
+    var isEditor = ((_19 = props.edit) === null || _19 === void 0 ? void 0 : _19.allEditable) ? true : false;
+    var isOffline = (_20 = props.bareSettings) === null || _20 === void 0 ? void 0 : _20.bareOffline;
     // INFO: when bareOfflineNetworkAware is true, the save path is also gated on
     // the live network state — online saves go to the server even if bareOffline
     // is true, offline saves go to IDB as normal.
-    var isOfflineNetworkListener = isOffline && ((_19 = props.bareSettings) === null || _19 === void 0 ? void 0 : _19.bareOfflineNetworkListener);
-    var showId = (_20 = props.space) === null || _20 === void 0 ? void 0 : _20.showId;
+    var isOfflineNetworkListener = isOffline && ((_21 = props.bareSettings) === null || _21 === void 0 ? void 0 : _21.bareOfflineNetworkListener);
+    var showId = (_22 = props.space) === null || _22 === void 0 ? void 0 : _22.showId;
     var remainId = showId || selectedObjectStructureId ? true : false;
-    var idField = ((_21 = props.space) === null || _21 === void 0 ? void 0 : _21.idField) || ((_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.idField);
-    var pipeline = (_23 = props === null || props === void 0 ? void 0 : props.space) === null || _23 === void 0 ? void 0 : _23.pipeline;
-    if ((_24 = props.bareSettings) === null || _24 === void 0 ? void 0 : _24.bareListPipeline) {
+    var idField = ((_23 = props.space) === null || _23 === void 0 ? void 0 : _23.idField) || ((_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.idField);
+    var pipeline = (_25 = props === null || props === void 0 ? void 0 : props.space) === null || _25 === void 0 ? void 0 : _25.pipeline;
+    if ((_26 = props.bareSettings) === null || _26 === void 0 ? void 0 : _26.bareListPipeline) {
         pipeline = pipeline
             ? __spreadArray(__spreadArray([], pipeline, true), props.bareSettings.bareListPipeline, true) : props.bareSettings.bareListPipeline;
     }
@@ -834,24 +907,24 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
      * three records came back instead of five files, and each tile received the
      * whole array rather than one file, so every one of them read "Attachment".
      */
-    var fileViewColumnId = (_28 = (_27 = ((_26 = (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.extendedTabs) !== null && _26 !== void 0 ? _26 : []).find(function (eachTab) {
+    var fileViewColumnId = (_30 = (_29 = ((_28 = (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.extendedTabs) !== null && _28 !== void 0 ? _28 : []).find(function (eachTab) {
         return eachTab.viewType === "file" &&
             (0, utils_1.lowercaseTextToId)(eachTab.name) === viewType;
-    })) === null || _27 === void 0 ? void 0 : _27.fileSettings) === null || _28 === void 0 ? void 0 : _28.columnId;
-    var hasNavigation = ((_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.handleNavigate) ? true : false;
+    })) === null || _29 === void 0 ? void 0 : _29.fileSettings) === null || _30 === void 0 ? void 0 : _30.columnId;
+    var hasNavigation = ((_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.handleNavigate) ? true : false;
     var formColumn = "grid-cols-12";
-    var useMobileView = (_31 = (_30 = props.bareSettings) === null || _30 === void 0 ? void 0 : _30.bareUpdateMobileView) !== null && _31 !== void 0 ? _31 : false;
+    var useMobileView = (_33 = (_32 = props.bareSettings) === null || _32 === void 0 ? void 0 : _32.bareUpdateMobileView) !== null && _33 !== void 0 ? _33 : false;
     var gridGap = useMobileView ? "gap-x-6 gap-y-2 md:gap-y-6" : "gap-6";
-    var isActivityLog = (((_33 = (_32 = props.edit) === null || _32 === void 0 ? void 0 : _32.activityLog) === null || _33 === void 0 ? void 0 : _33.enableComments) &&
-        ((_34 = props.edit) === null || _34 === void 0 ? void 0 : _34.activityLog.commentCollectionId)) ||
-        (((_36 = (_35 = props.edit) === null || _35 === void 0 ? void 0 : _35.activityLog) === null || _36 === void 0 ? void 0 : _36.enableLogs) &&
-            ((_37 = props.edit) === null || _37 === void 0 ? void 0 : _37.activityLog.logsCollectionId));
-    var customPaginationSize = ((_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.customPaginationCount)
+    var isActivityLog = (((_35 = (_34 = props.edit) === null || _34 === void 0 ? void 0 : _34.activityLog) === null || _35 === void 0 ? void 0 : _35.enableComments) &&
+        ((_36 = props.edit) === null || _36 === void 0 ? void 0 : _36.activityLog.commentCollectionId)) ||
+        (((_38 = (_37 = props.edit) === null || _37 === void 0 ? void 0 : _37.activityLog) === null || _38 === void 0 ? void 0 : _38.enableLogs) &&
+            ((_39 = props.edit) === null || _39 === void 0 ? void 0 : _39.activityLog.logsCollectionId));
+    var customPaginationSize = ((_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.customPaginationCount)
         ? props.organise.customPaginationCount(size)
         : undefined;
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_39 = props.lib) === null || _39 === void 0 ? void 0 : _39.axios,
+        dbModule: (_41 = props.lib) === null || _41 === void 0 ? void 0 : _41.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -859,7 +932,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_40 = props.lib) === null || _40 === void 0 ? void 0 : _40.axios,
+        dbModule: (_42 = props.lib) === null || _42 === void 0 ? void 0 : _42.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -867,12 +940,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_41 = props.edit) === null || _41 === void 0 ? void 0 : _41.allEditable) &&
+        ((_43 = props.edit) === null || _43 === void 0 ? void 0 : _43.allEditable) &&
             // INFO: the import runs on the server (importEndpoint), so a Firestore
             // datasheet served through one can import; only the browser-direct
             // Firebase client has no server to import through
             !isFirebaseClient &&
-            !((_43 = (_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.exportSettings) === null || _43 === void 0 ? void 0 : _43.hideImportCSV)
+            !((_45 = (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.exportSettings) === null || _45 === void 0 ? void 0 : _45.hideImportCSV)
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -881,7 +954,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_45 = (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.exportSettings) === null || _45 === void 0 ? void 0 : _45.hideExportCSV)
+        !((_47 = (_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.exportSettings) === null || _47 === void 0 ? void 0 : _47.hideExportCSV)
             ? {
                 text: "Export CSV",
                 onClick: function () {
@@ -891,7 +964,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_47 = (_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.exportSettings) === null || _47 === void 0 ? void 0 : _47.hideExportExcel)
+        !((_49 = (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.exportSettings) === null || _49 === void 0 ? void 0 : _49.hideExportExcel)
             ? {
                 text: "Export Excel",
                 onClick: function () {
@@ -901,7 +974,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_49 = (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.exportSettings) === null || _49 === void 0 ? void 0 : _49.hideExportPDF)
+        !((_51 = (_50 = props.organise) === null || _50 === void 0 ? void 0 : _50.exportSettings) === null || _51 === void 0 ? void 0 : _51.hideExportPDF)
             ? {
                 text: "Export PDF",
                 onClick: function () {
@@ -911,7 +984,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_51 = (_50 = props.organise) === null || _50 === void 0 ? void 0 : _50.exportSettings) === null || _51 === void 0 ? void 0 : _51.hideExportQR)
+        !((_53 = (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.exportSettings) === null || _53 === void 0 ? void 0 : _53.hideExportQR)
             ? {
                 text: "Export QR",
                 onClick: function () {
@@ -921,7 +994,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_53 = (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.exportSettings) === null || _53 === void 0 ? void 0 : _53.hideExportQR)
+        !((_55 = (_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.exportSettings) === null || _55 === void 0 ? void 0 : _55.hideExportQR)
             ? {
                 text: "Export QR(Data)",
                 onClick: function () {
@@ -931,7 +1004,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_55 = (_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.exportSettings) === null || _55 === void 0 ? void 0 : _55.hideExportPrint)
+        !((_57 = (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.exportSettings) === null || _57 === void 0 ? void 0 : _57.hideExportPrint)
             ? {
                 text: "Print",
                 onClick: function () {
@@ -941,7 +1014,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_57 = (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.exportSettings) === null || _57 === void 0 ? void 0 : _57.hideExportDraft)
+        !((_59 = (_58 = props.organise) === null || _58 === void 0 ? void 0 : _58.exportSettings) === null || _59 === void 0 ? void 0 : _59.hideExportDraft)
             ? {
                 text: filterDraft ? "Show All Items" : "Filter Draft",
                 onClick: function () {
@@ -950,7 +1023,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             : null,
     ].filter(Boolean);
-    if ((_58 = props.organise) === null || _58 === void 0 ? void 0 : _58.moreSettings)
+    if ((_60 = props.organise) === null || _60 === void 0 ? void 0 : _60.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     //=====================================================================================
     //SECTION: User Column Visibility Handlers
@@ -1175,8 +1248,61 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             return (__assign(__assign({}, prev), (_a = {}, _a[columnId] = search, _a)));
         });
     };
-    var renderImpSearchFilterConditions = function () {
+    // INFO: the export's own filter rows, handled like the list's but never
+    // reading the list again — a reference column's options are shared with it
+    var handleNewExportFilterRow = function () { return ({
+        id: (0, uuid_1.v4)(),
+        columnId: "",
+        operator: "=",
+        value: undefined,
+    }); };
+    var exportFlexActions = {
+        handleAddFilter: function () {
+            return setExportFlexFilters(function (previous) { return __spreadArray(__spreadArray([], previous, true), [
+                handleNewExportFilterRow(),
+            ], false); });
+        },
+        handleRemoveFilter: function (filterId) {
+            return setExportFlexFilters(function (previous) {
+                var remaining = previous.filter(function (each) { return each.id !== filterId; });
+                return remaining.length > 0 ? remaining : [handleNewExportFilterRow()];
+            });
+        },
+        handleClearAllFilters: function () {
+            return setExportFlexFilters([handleNewExportFilterRow()]);
+        },
+        handleColumnChange: function (filterId, columnId) {
+            return setExportFlexFilters(function (previous) {
+                return previous.map(function (each) {
+                    var _a, _b, _c;
+                    if (each.id !== filterId)
+                        return each;
+                    var operators = flexFilter_1.FLEX_FILTER_OPERATOR_MAP[(_b = (_a = structure.find(function (eachModel) { return eachModel.id === columnId; })) === null || _a === void 0 ? void 0 : _a.type) !== null && _b !== void 0 ? _b : ""];
+                    return __assign(__assign({}, each), { columnId: columnId, operator: (_c = operators === null || operators === void 0 ? void 0 : operators[0]) !== null && _c !== void 0 ? _c : "=", value: undefined });
+                });
+            });
+        },
+        handleOperatorChange: function (filterId, operator) {
+            return setExportFlexFilters(function (previous) {
+                return previous.map(function (each) {
+                    return each.id === filterId ? __assign(__assign({}, each), { operator: operator, value: undefined }) : each;
+                });
+            });
+        },
+        handleValueChange: function (filterId, value) {
+            return setExportFlexFilters(function (previous) {
+                return previous.map(function (each) {
+                    return each.id === filterId ? __assign(__assign({}, each), { value: value }) : each;
+                });
+            });
+        },
+        handleReferenceOptionsLoaded: handleFlexFilterReferenceOptionsLoaded,
+        handleReferenceSearch: handleFlexFilterReferenceSearch,
+    };
+    // INFO: flexRows defaults to the list's filters; an export passes its own
+    var renderImpSearchFilterConditions = function (flexRows) {
         var _a;
+        if (flexRows === void 0) { flexRows = flexFiltersDebounced; }
         var query = (0, listModule_1.renderSearchFilterConditions)(structure, devSettings, {
             filterSearchParams: filterSearchParams,
             filterSelection: filterSelection,
@@ -1185,8 +1311,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             filterDraft: filterDraft,
         }, additionalQuery !== null && additionalQuery !== void 0 ? additionalQuery : [], (_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareListFilterQuery, selectedTab);
         // INFO: Merge flex filter conditions into the query array (uses debounced state to avoid API calls on every keystroke)
-        if (flexFiltersDebounced.length > 0) {
-            var flexQuery = (0, listModule_1.renderFlexFilterConditions)(flexFiltersDebounced, structure);
+        if (flexRows.length > 0) {
+            // INFO: formula conditions never reach the server — the field is not
+            // stored — and are applied to the rows by handleApplyFormulaView
+            var flexQuery = (0, listModule_1.renderFlexFilterConditions)(flexRows, structure).filter(function (eachQuery) { var _a; return !formulaColumnIds.includes((_a = eachQuery.queryId) !== null && _a !== void 0 ? _a : ""); });
             if (flexQuery.length > 0) {
                 if (query) {
                     query = __spreadArray(__spreadArray([], query, true), flexQuery, true);
@@ -1261,7 +1389,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     //=====================================================================================
     //SECTION: Saved Views
     //=====================================================================================
-    var savedViewsKey = (0, viewStatePersistence_1.buildSavedViewsKey)(props.collectionId, (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.persistKey, (_60 = devSettings.currentUser) === null || _60 === void 0 ? void 0 : _60.userEmail);
+    var savedViewsKey = (0, viewStatePersistence_1.buildSavedViewsKey)(props.collectionId, (_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.persistKey, (_62 = devSettings.currentUser) === null || _62 === void 0 ? void 0 : _62.userEmail);
     (0, react_1.useEffect)(function () {
         if (isSavedViewsEnabled && !isAppViews)
             setSavedViews((0, viewStatePersistence_1.handleReadSavedViews)(savedViewsKey));
@@ -1316,7 +1444,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var lastSentSharedViewsRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(function () {
         lastSentSharedViewsRef.current = null;
-    }, [(_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.sharedViews]);
+    }, [(_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.sharedViews]);
     var handleStoreSharedViews = function (update) {
         var _a, _b, _c;
         if (!((_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeSharedViews))
@@ -1352,13 +1480,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         /* eslint-disable */
     }, [
         isSavedViewsEnabled,
-        (_62 = props.organise) === null || _62 === void 0 ? void 0 : _62.initialSavedViewId,
-        (_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.defaultSavedViewId,
-        (_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.sharedViews,
+        (_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.initialSavedViewId,
+        (_65 = props.organise) === null || _65 === void 0 ? void 0 : _65.defaultSavedViewId,
+        (_66 = props.organise) === null || _66 === void 0 ? void 0 : _66.sharedViews,
         savedViews,
     ]);
     /* eslint-enable */
-    var defaultSavedViewIds = ((_66 = (_65 = props.organise) === null || _65 === void 0 ? void 0 : _65.defaultSavedViews) !== null && _66 !== void 0 ? _66 : [])
+    var defaultSavedViewIds = ((_68 = (_67 = props.organise) === null || _67 === void 0 ? void 0 : _67.defaultSavedViews) !== null && _68 !== void 0 ? _68 : [])
         .map(function (eachView) { var _a; return (_a = eachView.id) !== null && _a !== void 0 ? _a : ""; })
         .join("|");
     // INFO: keyed on the ids, not the array, so an inline literal passed on every
@@ -1623,7 +1751,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var isOtherListReturn = !(0, viewStatePersistence_1.handleIsLastDrill)(props.collectionId, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.persistKey);
         scrollRestoredRef.current = isSwitch || isOtherListReturn;
         /* eslint-disable */
-    }, [props.collectionId, (_67 = props.organise) === null || _67 === void 0 ? void 0 : _67.persistKey]);
+    }, [props.collectionId, (_69 = props.organise) === null || _69 === void 0 ? void 0 : _69.persistKey]);
     /* eslint-enable */
     // INFO: wait a frame — rows land in state one tick before layout
     (0, react_1.useEffect)(function () {
@@ -1658,7 +1786,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         handleOfflinePrefetch();
         /* eslint-disable */
-    }, [props.collectionId, (_68 = props.bareSettings) === null || _68 === void 0 ? void 0 : _68.bareOffline]);
+    }, [props.collectionId, (_70 = props.bareSettings) === null || _70 === void 0 ? void 0 : _70.bareOffline]);
     /* eslint-enable */
     // INFO: MRQ polling — calls handleRefresh every N ms (e.g. 1500) as a fallback.
     // Calls through handleRefreshRef so the interval always dispatches the latest
@@ -1678,7 +1806,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, interval);
         return function () { return clearInterval(timer); };
         /* eslint-disable */
-    }, [(_69 = props.bareSettings) === null || _69 === void 0 ? void 0 : _69.barePollingInterval, isLive, isNetworkOffline]);
+    }, [(_71 = props.bareSettings) === null || _71 === void 0 ? void 0 : _71.barePollingInterval, isLive, isNetworkOffline]);
     /* eslint-enable */
     // INFO: Pub/Sub → SSE live-stream — driven by bareSettings.bareSocketName
     // EventSource URL: {sseEndpoint}/{room}?bm_apiToken={token}
@@ -1720,7 +1848,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         };
         /* eslint-disable */
     }, [
-        (_70 = props.bareSettings) === null || _70 === void 0 ? void 0 : _70.bareSocketName,
+        (_72 = props.bareSettings) === null || _72 === void 0 ? void 0 : _72.bareSocketName,
         props.collectionId,
         props.devSettings.sseEndpoint,
         props.devSettings.dbAPIToken,
@@ -1980,10 +2108,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.model,
         props.localURLEndpoint,
-        (_71 = props.organise) === null || _71 === void 0 ? void 0 : _71.extendedTabs,
-        (_72 = props.organise) === null || _72 === void 0 ? void 0 : _72.viewId,
-        (_73 = props.organise) === null || _73 === void 0 ? void 0 : _73.additionalQuery,
-        (_74 = props.organise) === null || _74 === void 0 ? void 0 : _74.groupBy,
+        (_73 = props.organise) === null || _73 === void 0 ? void 0 : _73.extendedTabs,
+        (_74 = props.organise) === null || _74 === void 0 ? void 0 : _74.viewId,
+        (_75 = props.organise) === null || _75 === void 0 ? void 0 : _75.additionalQuery,
+        (_76 = props.organise) === null || _76 === void 0 ? void 0 : _76.groupBy,
         resolvedType,
     ]);
     /**
@@ -2041,6 +2169,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         if (props.devSettings.schemaReference)
             setReferenceSchema(props.devSettings.schemaReference);
     }, [props.devSettings.schemaReference]);
+    // INFO: an export starts from the filters the list shows, formula rows
+    // aside (see exportFilterStructure)
+    (0, react_1.useEffect)(function () {
+        if (!exportExcel && !exportQR)
+            return;
+        var rows = flexFiltersRef.current.filter(function (eachFilter) { return !formulaColumnIds.includes(eachFilter.columnId); });
+        setExportFlexFilters(rows.length > 0
+            ? JSON.parse(JSON.stringify(rows))
+            : [handleNewExportFilterRow()]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [exportExcel, exportQR]);
     (0, react_1.useEffect)(function () {
         var _a;
         var newQuery = renderImpSearchFilterConditions();
@@ -2124,7 +2263,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             };
         }, 100);
         return function () { return clearTimeout(timeoutId); };
-    }, [(_75 = props.organise) === null || _75 === void 0 ? void 0 : _75.showReadFloatingNav, resolvedType, props.id, loading]);
+    }, [(_77 = props.organise) === null || _77 === void 0 ? void 0 : _77.showReadFloatingNav, resolvedType, props.id, loading]);
     (0, react_1.useEffect)(function () {
         if (resolvedType !== "read")
             return;
@@ -2604,7 +2743,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     var handleReadQueryHocSort = function (query) {
         // INFO: Use persisted sort when persistViewState is active, otherwise fall back to prop sort
-        var sort = activeSortId || undefined;
+        // INFO: a formula sort is applied to the rows, so the server gets none
+        var sort = (activeSortId === null || activeSortId === void 0 ? void 0 : activeSortId.sortId) && formulaColumnIds.includes(activeSortId.sortId)
+            ? undefined
+            : activeSortId || undefined;
         if (isFirebase) {
             // INFO: Firestore requires the first orderBy to match the range/startAt
             // field, so a search query always forces the sort onto the search column
@@ -2779,8 +2921,123 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             cond.skip = (0, unionPagination_1.handleGetUnionPageSkip)(pageIndex, limit);
             cond.sort = (0, unionPagination_1.handleBuildUnionPageSort)(handleReadQueryHocSort(query));
         }
+        // INFO: sorting or filtering on a formula reads the matching rows, as
+        // monday orders the whole board and not just the page on screen — up to
+        // FORMULA_VIEW_MAX_ROWS, so one header click cannot pull a whole large
+        // collection into the browser. The cursor is left out so paging cuts from
+        // the rows already read.
+        if (isFormulaView) {
+            cond.limit = exports.FORMULA_VIEW_MAX_ROWS;
+            cond.stopLimit = undefined;
+            cond.cursor = undefined;
+            cond.skip = 0;
+            // INFO: past the cap the server picks which rows come back, so a fixed
+            // order keeps those rows the same from one read to the next
+            if (!cond.sort)
+                cond.sort = { sortId: serverId, type: "asc" };
+        }
         return cond;
     };
+    // INFO: views that draw every row at once rather than a page of them — the
+    // same views handleReadQueryHocCond reads in full
+    var handleCheckFullSetView = function () {
+        var _a;
+        return (!!selectedTab &&
+            (selectedTab.viewType === "calendar" ||
+                selectedTab.viewType === "map" ||
+                selectedTab.viewType === "timeline")) ||
+            (!!groupId && !((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW));
+    };
+    var handleShowFormulaPage = function (index) {
+        var _a;
+        var cached = formulaFullReadRef.current;
+        if (!cached)
+            return;
+        var view = handleApplyFormulaView(cached.rows, cached.displayRows);
+        // INFO: page mode shows one page at a time, and so does NewTable in
+        // cursor mode — it draws whatever rows it is given, where the legacy
+        // Table cuts cursor pages itself. Scroll mode holds every row. A calendar,
+        // map, timeline or legacy grouped list draws every row, so it is never cut.
+        var paginationType = renderResolvedPaginationType();
+        if (!handleCheckFullSetView() &&
+            (paginationType === "page" ||
+                (paginationType === "cursor" && !!((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW)))) {
+            var start = index * limit;
+            handleSetListData(view.rows.slice(start, start + limit), view.displayRows.slice(start, start + limit));
+        }
+        else {
+            handleSetListData(view.rows, view.displayRows);
+            setCursor("");
+        }
+        setSize(view.rows.length);
+        setTableLoading(false);
+    };
+    // INFO: adding or changing a formula changes no stored value, so nothing is
+    // read again — the formula cells on screen are worked out afresh, as a
+    // monday formula updates the moment it is set
+    var formulaSignature = JSON.stringify(structure
+        .filter(function (eachModel) { return eachModel.type === "formula"; })
+        .map(function (eachModel) { return [eachModel.id, eachModel.formulaExpression]; }));
+    var previousFormulaSignatureRef = (0, react_1.useRef)(formulaSignature);
+    (0, react_1.useEffect)(function () {
+        if (previousFormulaSignatureRef.current === formulaSignature)
+            return;
+        previousFormulaSignatureRef.current = formulaSignature;
+        var handleRecomputeCells = function (rows, displayRows) {
+            return displayRows.map(function (eachDisplayRow, index) {
+                if (!eachDisplayRow || !rows[index])
+                    return eachDisplayRow;
+                var nextDisplayRow = __assign({}, eachDisplayRow);
+                var results = (0, formula_1.handleEvaluateFormulaRow)(rows[index], eachDisplayRow, structure);
+                Object.entries(results).forEach(function (_a) {
+                    var columnId = _a[0], result = _a[1];
+                    nextDisplayRow[columnId] = (0, formula_1.handleFormatFormulaValue)(result);
+                });
+                return nextDisplayRow;
+            });
+        };
+        var cached = formulaFullReadRef.current;
+        if (cached) {
+            cached.displayRows = handleRecomputeCells(cached.rows, cached.displayRows);
+            handleShowFormulaPage(pageIndex);
+            return;
+        }
+        if (tableDataRef.current.length === 0)
+            return;
+        handleSetListData(tableDataRef.current, handleRecomputeCells(tableDataRef.current, spaceTableDataRef.current));
+        /* eslint-disable */
+    }, [formulaSignature]);
+    /* eslint-enable */
+    // INFO: the read request of the previous render. A formula sort or filter
+    // is not part of the request, so on a view that already reads every row
+    // (calendar, map, timeline, legacy grouped) turning one on changes nothing
+    // the reader would see — then the read is asked for here.
+    var formulaCondKeyRef = (0, react_1.useRef)("");
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (formulaFullReadRef.current) {
+            // INFO: a page, page-size or formula change needs no new read — the
+            // matching rows are already held
+            handleShowFormulaPage(pageIndex);
+        }
+        else if (isFormulaView &&
+            formulaCondKeyRef.current === JSON.stringify(handleReadQueryHocCond())) {
+            (_a = listRQueryHocRef.current) === null || _a === void 0 ? void 0 : _a.handleRefresh();
+        }
+        /* eslint-disable */
+    }, [
+        pageIndex,
+        limit,
+        JSON.stringify(formulaSort !== null && formulaSort !== void 0 ? formulaSort : null),
+        JSON.stringify(formulaFlexQueries),
+    ]);
+    /* eslint-enable */
+    (0, react_1.useEffect)(function () {
+        // INFO: a table without formula columns does no formula bookkeeping
+        if (formulaColumnIds.length === 0)
+            return;
+        formulaCondKeyRef.current = JSON.stringify(handleReadQueryHocCond());
+    });
     var handleSelectIds = function (selectedIds) {
         var _a;
         setSelectedIds(selectedIds);
@@ -2914,16 +3171,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
     };
     var handleGetListData = function (responseData, type, rowId, requestCond) { return __awaiter(void 0, void 0, void 0, function () {
-        var dataList, prettierDataList, clonedTableData, clonedSpaceTableData, dummyPrettierDataList_1, resolvedData, selectedIndex_1, isScrollMode, newTableData, newPrettierTableData, isFirstPage, listedIds_1, newIndexes, isExists, cursorResp, lastDataId, err_1;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        return __generator(this, function (_l) {
-            switch (_l.label) {
+        var dataList, prettierDataList, clonedTableData, clonedSpaceTableData, dummyPrettierDataList_1, resolvedData, selectedIndex_1, cachedFormulaRows, cachedIndex, capKey, isScrollMode, newTableData, newPrettierTableData, isFirstPage, listedIds_1, newIndexes, isExists, cursorResp, lastDataId, err_1;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        return __generator(this, function (_p) {
+            switch (_p.label) {
                 case 0:
                     dataList = [];
                     prettierDataList = [];
-                    _l.label = 1;
+                    _p.label = 1;
                 case 1:
-                    _l.trys.push([1, 7, , 8]);
+                    _p.trys.push([1, 7, , 8]);
                     clonedTableData = __spreadArray([], tableDataRef.current, true);
                     clonedSpaceTableData = __spreadArray([], spaceTableDataRef.current, true);
                     if (!(responseData === null || responseData === void 0 ? void 0 : responseData.data)) return [3 /*break*/, 6];
@@ -2931,7 +3188,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     dummyPrettierDataList_1 = [];
                     return [4 /*yield*/, handleResolveOfflineReferences(responseData.data)];
                 case 2:
-                    resolvedData = _l.sent();
+                    resolvedData = _p.sent();
                     resolvedData.map(function (eachData) {
                         var _a, _b;
                         var tempData = eachData;
@@ -2943,7 +3200,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     return [3 /*break*/, 5];
                 case 3: return [4 /*yield*/, (0, listModule_1.handleListDataBasedOnModel)(responseData === null || responseData === void 0 ? void 0 : responseData.data, props.devSettings, (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios, structure, (_c = props.organise) === null || _c === void 0 ? void 0 : _c.handleNavigate, setActivityModal, setActivityId, isActivityLog ? (_d = props.edit) === null || _d === void 0 ? void 0 : _d.activityLog : undefined, (_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListActionBtns, !canUpdateRecord, undefined, handleSeedListReferenceOptions)];
                 case 4:
-                    prettierDataList = _l.sent();
+                    prettierDataList = _p.sent();
                     if (props.groupId) {
                         prettierDataList.forEach(function (item, idx) {
                             var _a, _b;
@@ -2952,7 +3209,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }
-                    _l.label = 5;
+                    _p.label = 5;
                 case 5:
                     (_f = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _f === void 0 ? void 0 : _f.map(function (eachData, eachIndex) {
                         if (eachData["_id"]) {
@@ -2978,7 +3235,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                     });
                     dataList = responseData.data;
-                    _l.label = 6;
+                    _p.label = 6;
                 case 6:
                     if (type === "update" || type === "create") {
                         try {
@@ -2998,15 +3255,54 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 clonedTableData.push((_h = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _h === void 0 ? void 0 : _h[0]);
                                 clonedSpaceTableData.push(prettierDataList === null || prettierDataList === void 0 ? void 0 : prettierDataList[0]);
                             }
-                            handleSetListData(clonedTableData, clonedSpaceTableData);
+                            cachedFormulaRows = formulaFullReadRef.current;
+                            if (cachedFormulaRows) {
+                                cachedIndex = cachedFormulaRows.rows.findIndex(function (eachData) {
+                                    return (eachData === null || eachData === void 0 ? void 0 : eachData.id) === rowId || (eachData === null || eachData === void 0 ? void 0 : eachData.recordId) === rowId;
+                                });
+                                if (type === "update" && cachedIndex > -1) {
+                                    cachedFormulaRows.rows[cachedIndex] = (_j = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _j === void 0 ? void 0 : _j[0];
+                                    cachedFormulaRows.displayRows[cachedIndex] =
+                                        prettierDataList === null || prettierDataList === void 0 ? void 0 : prettierDataList[0];
+                                }
+                                else if (type === "create") {
+                                    cachedFormulaRows.rows.push((_k = responseData === null || responseData === void 0 ? void 0 : responseData.data) === null || _k === void 0 ? void 0 : _k[0]);
+                                    cachedFormulaRows.displayRows.push(prettierDataList === null || prettierDataList === void 0 ? void 0 : prettierDataList[0]);
+                                }
+                                handleShowFormulaPage(pageIndex);
+                            }
+                            else
+                                handleSetListData(clonedTableData, clonedSpaceTableData);
                         }
                         catch (err) { }
                     }
+                    else if (isFormulaView &&
+                        (requestCond === null || requestCond === void 0 ? void 0 : requestCond.limit) === exports.FORMULA_VIEW_MAX_ROWS &&
+                        !(requestCond === null || requestCond === void 0 ? void 0 : requestCond.cursor)) {
+                        // INFO: a formula view's read — held, then filtered, ordered and paged
+                        // from here
+                        formulaFullReadRef.current = {
+                            rows: dataList,
+                            displayRows: prettierDataList,
+                        };
+                        handleShowFormulaPage(pageIndex);
+                        capKey = JSON.stringify([formulaSort, formulaFlexQueries]);
+                        if (((_l = responseData.count) !== null && _l !== void 0 ? _l : 0) > dataList.length &&
+                            formulaCapNoticeRef.current !== capKey) {
+                            formulaCapNoticeRef.current = capKey;
+                            setNotification({
+                                type: true,
+                                title: "Sorted and filtered within ".concat(exports.FORMULA_VIEW_MAX_ROWS.toLocaleString("en-US"), " rows"),
+                                msg: "A formula sort or filter reads at most ".concat(exports.FORMULA_VIEW_MAX_ROWS.toLocaleString("en-US"), " of the ").concat(Number(responseData.count).toLocaleString("en-US"), " matching rows."),
+                            });
+                        }
+                    }
                     else {
+                        formulaFullReadRef.current = null;
                         isScrollMode = renderCheckScrollMode();
                         if (!isScrollMode && !isFirebase) {
                             handleSetListData(dataList, prettierDataList);
-                            setSize((_j = responseData.count) !== null && _j !== void 0 ? _j : 0);
+                            setSize((_m = responseData.count) !== null && _m !== void 0 ? _m : 0);
                             if (renderCheckGroupPaging())
                                 handleLoadGroupFirstPages();
                         }
@@ -3066,13 +3362,13 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                             setCursor(cursorResp);
                             if (isScrollMode && !isFirebase) {
-                                setSize((_k = responseData.count) !== null && _k !== void 0 ? _k : 0);
+                                setSize((_o = responseData.count) !== null && _o !== void 0 ? _o : 0);
                             }
                         }
                     }
                     return [3 /*break*/, 8];
                 case 7:
-                    err_1 = _l.sent();
+                    err_1 = _p.sent();
                     return [3 /*break*/, 8];
                 case 8:
                     // INFO: inline writes update rows too, but do not finish a pending list read.
@@ -6340,18 +6636,27 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     }); };
     var handleExportCSVData = function (downloadLinkOnly, printOnly) { return __awaiter(void 0, void 0, void 0, function () {
-        var exportQueryList, baseUrl, apiEndpoint, reqData, res, dataList, csvDownloadLink, notificaitonMsg, err_27;
-        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;
-        return __generator(this, function (_1) {
-            switch (_1.label) {
+        var exportQueryList, formulaRows, kept, baseUrl, apiEndpoint, reqData, res, dataList, csvDownloadLink, notificaitonMsg, err_27;
+        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;
+        return __generator(this, function (_2) {
+            switch (_2.label) {
                 case 0:
-                    _1.trys.push([0, 5, , 6]);
+                    _2.trys.push([0, 5, , 6]);
                     setLoading(true);
-                    exportQueryList = JSON.parse(JSON.stringify(queryList));
-                    if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareCSVExportSettings) {
+                    exportQueryList = ((_a = renderImpSearchFilterConditions(exportFlexFilters)) !== null && _a !== void 0 ? _a : []).filter(function (eachQuery) { return eachQuery.type !== "search"; });
+                    if ((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareCSVExportSettings) {
                         if (props.bareSettings.bareListFilterQuery)
                             exportQueryList.push.apply(exportQueryList, props.bareSettings.bareListFilterQuery);
                     }
+                    formulaRows = formulaFullReadRef.current;
+                    if (formulaFlexQueries.length > 0 && formulaRows) {
+                        kept = handleApplyFormulaView(formulaRows.rows, formulaRows.displayRows).rows;
+                        exportQueryList.push({
+                            type: "in",
+                            queryId: serverId,
+                            value: kept.map(function (eachRow) { return eachRow === null || eachRow === void 0 ? void 0 : eachRow[serverId]; }),
+                        });
+                    }
                     baseUrl = props.devSettings.functionEndpoint;
                     apiEndpoint = baseUrl;
                     switch (exportType) {
@@ -6369,20 +6674,20 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         apiEndpoint += "/handleExportCSV";
                     reqData = __assign(__assign({ spaceId: props.collectionId, query: exportQueryList, userData: {
                             userEmail: downloadLinkOnly ? "" : exportCSVEmail,
-                            userName: (_c = (_b = props.devSettings.currentUser) === null || _b === void 0 ? void 0 : _b.userName) !== null && _c !== void 0 ? _c : "",
-                        }, downloadLinkOnly: downloadLinkOnly, exportType: exportType === "excel" ? "excel" : undefined, excludeReferenceId: (_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.exportSettings) === null || _e === void 0 ? void 0 : _e.excludeReferenceId, excludeSecondaryLabel: (_g = (_f = props.organise) === null || _f === void 0 ? void 0 : _f.exportSettings) === null || _g === void 0 ? void 0 : _g.excludeSecondaryLabel, csvHeaderUseName: (_j = (_h = props.organise) === null || _h === void 0 ? void 0 : _h.exportSettings) === null || _j === void 0 ? void 0 : _j.csvHeaderUseName, dateFormatString: (_l = (_k = props.organise) === null || _k === void 0 ? void 0 : _k.exportSettings) === null || _l === void 0 ? void 0 : _l.dateFormatString, excludeDataId: (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.excludeDataId, columnIds: (_q = (_p = props.organise) === null || _p === void 0 ? void 0 : _p.exportSettings) === null || _q === void 0 ? void 0 : _q.columnIds, sort: (_s = (_r = props.organise) === null || _r === void 0 ? void 0 : _r.exportSettings) === null || _s === void 0 ? void 0 : _s.sort, groupBy: groupId, sumAttributeId: exportSumAttributeIds, viewId: (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.id) !== "general" ? selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name : undefined }, (exportType === "qr-data" && {
+                            userName: (_d = (_c = props.devSettings.currentUser) === null || _c === void 0 ? void 0 : _c.userName) !== null && _d !== void 0 ? _d : "",
+                        }, downloadLinkOnly: downloadLinkOnly, exportType: exportType === "excel" ? "excel" : undefined, excludeReferenceId: (_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.excludeReferenceId, excludeSecondaryLabel: (_h = (_g = props.organise) === null || _g === void 0 ? void 0 : _g.exportSettings) === null || _h === void 0 ? void 0 : _h.excludeSecondaryLabel, csvHeaderUseName: (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.csvHeaderUseName, dateFormatString: (_m = (_l = props.organise) === null || _l === void 0 ? void 0 : _l.exportSettings) === null || _m === void 0 ? void 0 : _m.dateFormatString, excludeDataId: (_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.exportSettings) === null || _p === void 0 ? void 0 : _p.excludeDataId, columnIds: (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.columnIds, sort: (_t = (_s = props.organise) === null || _s === void 0 ? void 0 : _s.exportSettings) === null || _t === void 0 ? void 0 : _t.sort, groupBy: groupId, sumAttributeId: exportSumAttributeIds, viewId: (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.id) !== "general" ? selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name : undefined }, (exportType === "qr-data" && {
                         public: true,
                         publicLink: window.location.origin,
                     })), { hideSubItems: hideSubItems });
-                    return [4 /*yield*/, ((_t = props.lib) === null || _t === void 0 ? void 0 : _t.axios({
+                    return [4 /*yield*/, ((_u = props.lib) === null || _u === void 0 ? void 0 : _u.axios({
                             url: apiEndpoint,
                             method: "post",
                             data: { data: reqData },
                         }))];
                 case 1:
-                    res = _1.sent();
-                    if (!(downloadLinkOnly && ((_u = res === null || res === void 0 ? void 0 : res.data) === null || _u === void 0 ? void 0 : _u.dataList))) return [3 /*break*/, 4];
-                    dataList = (_v = res === null || res === void 0 ? void 0 : res.data) === null || _v === void 0 ? void 0 : _v.dataList;
+                    res = _2.sent();
+                    if (!(downloadLinkOnly && ((_v = res === null || res === void 0 ? void 0 : res.data) === null || _v === void 0 ? void 0 : _v.dataList))) return [3 /*break*/, 4];
+                    dataList = (_w = res === null || res === void 0 ? void 0 : res.data) === null || _w === void 0 ? void 0 : _w.dataList;
                     if (!(dataList && typeof dataList === "object")) return [3 /*break*/, 4];
                     csvDownloadLink = Object.values(dataList)[0];
                     if (!(exportType === "csv" ||
@@ -6394,10 +6699,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     if (!(exportType === "pdf" ||
                         printOnly ||
                         exportType === "print")) return [3 /*break*/, 4];
-                    return [4 /*yield*/, (0, listModule_1.handleExportPDF)(csvDownloadLink, exportPDFTitle, printOnly, (_y = (_x = (_w = props.organise) === null || _w === void 0 ? void 0 : _w.exportSettings) === null || _x === void 0 ? void 0 : _x.generateBy) !== null && _y !== void 0 ? _y : "Admin")];
+                    return [4 /*yield*/, (0, listModule_1.handleExportPDF)(csvDownloadLink, exportPDFTitle, printOnly, (_z = (_y = (_x = props.organise) === null || _x === void 0 ? void 0 : _x.exportSettings) === null || _y === void 0 ? void 0 : _y.generateBy) !== null && _z !== void 0 ? _z : "Admin")];
                 case 3:
-                    _1.sent();
-                    _1.label = 4;
+                    _2.sent();
+                    _2.label = 4;
                 case 4:
                     notificaitonMsg = "A download link will be sent to your email. This may take a while if the data is huge, contact our team if you do not receive any email after 10 minutes (Check your Junk Email too).";
                     if (downloadLinkOnly)
@@ -6411,10 +6716,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     setLoading(false);
                     handlePopUpModal(false);
-                    setExportCSVEmail((_0 = (_z = props.devSettings.currentUser) === null || _z === void 0 ? void 0 : _z.userEmail) !== null && _0 !== void 0 ? _0 : "");
+                    setExportCSVEmail((_1 = (_0 = props.devSettings.currentUser) === null || _0 === void 0 ? void 0 : _0.userEmail) !== null && _1 !== void 0 ? _1 : "");
                     return [3 /*break*/, 6];
                 case 5:
-                    err_27 = _1.sent();
+                    err_27 = _2.sent();
                     setNotification({
                         type: true,
                         title: "Export Failed",
@@ -6800,43 +7105,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
         });
     }); };
-    var handleViewQuery = function (index) {
-        setQueryIndex(index);
-        setQueryForm(!queryForm);
-    };
-    var handleSortQuery = function (index, sortType) {
-        var _a;
-        var sortList = JSON.parse(JSON.stringify(queryList));
-        var ascIndex = sortType === "up" ? index - 1 : index + 1;
-        _a = [
-            sortList[ascIndex],
-            sortList[index],
-        ], sortList[index] = _a[0], sortList[ascIndex] = _a[1];
-        setQueryList(sortList);
-    };
-    var handlePushQueryList = function (queryInput, queryIndex) {
-        var tempQueryList = [];
-        tempQueryList = queryList;
-        if (!tempQueryList.some(function (eachQuery) { return eachQuery.queryId === queryInput.queryId; })) {
-            tempQueryList.push(queryInput);
-            setQueryList(tempQueryList);
-            setQueryForm(false);
-        }
-        else if (queryIndex >= 0) {
-            var newQueryList = tempQueryList.map(function (eachQuery) {
-                return eachQuery.queryId === queryInput.queryId ? queryInput : eachQuery;
-            });
-            setQueryList(newQueryList);
-            handleViewQuery(-1);
-        }
-        else {
-            setNotification({
-                type: false,
-                title: "Failed to add",
-                msg: "Query with column ID already exists",
-            });
-        }
-    };
     //=====================================================================================
     //SECTION: Handle Utils
     //=====================================================================================
@@ -6901,16 +7169,18 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         var header = Object.keys(csvFileData[0]);
         var dataList = [];
         csvAPIAttribute.map(function (eachAttribute) {
+            var _a, _b;
             dataList.push({
                 header: header[eachAttribute.ori],
-                detail: eachAttribute.id,
+                // INFO: the field's name, as the mapping step showed it
+                detail: (_b = (_a = structure.find(function (eachModel) { return eachModel.id === eachAttribute.id; })) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : eachAttribute.id,
             });
             return null;
         });
         return dataList;
     };
     var renderStepCSV = function () {
-        var _a;
+        var _a, _b;
         switch (stepCSVIndex) {
             case 0:
                 return (react_1.default.createElement(uploadInput_1.UploadInput, { lib: { axios: (_a = props.lib) === null || _a === void 0 ? void 0 : _a.axios }, label: "Please insert a csv file", fileDescription: "CSV file thats doesn't exceeds 30MB and row not more than 100 data", accept: ".csv", hidePreview: true, onChange: handleOnChangeCSV }));
@@ -6926,37 +7196,47 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     return "";
                 });
-                return (react_1.default.createElement(react_1.default.Fragment, null, csvFileData.length > 0 && (react_1.default.createElement("div", { className: "pb-32" }, Object.entries(csvFileData[0]).map(function (eachRow, index) {
-                    var eachKey = eachRow[0];
-                    if (!eachKey)
-                        return null;
-                    var clonedListValue = JSON.parse(JSON.stringify(listCSVMapAttribute));
-                    var selectedObjectModel = structure.find(function (eachModel) {
-                        return ((eachModel.id === clonedListValue[index] &&
-                            eachModel.type === "listObject") ||
-                            (eachModel.id === clonedListValue[index] &&
-                                eachModel.type === "object"));
-                    });
-                    return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { className: "grid items-center grid-cols-3 mt-6" },
-                            eachKey,
-                            react_1.default.createElement(select_1.Select, { portalDropdown: true, containerClassName: selectedObjectModel ? "ml-2" : "ml-2 col-span-2", label: "", options: filterOptions_1, value: clonedListValue[index], onChange: function (value) {
-                                    var clonedListValueAttribute = JSON.parse(JSON.stringify(listCSVMapAttribute));
-                                    clonedListValueAttribute[index] = value;
-                                    setListCSVMapAttribute(clonedListValueAttribute);
-                                } }),
-                            selectedObjectModel && (react_1.default.createElement(select_1.Select, { portalDropdown: true, containerClassName: "ml-4", label: "", options: (0, readModule_1.renderObjectOptions)(selectedObjectModel.objectData), value: listCSVObjAttribute[index], onChange: function (value) {
-                                    var clonedListObjectValueAttribute = JSON.parse(JSON.stringify(listCSVObjAttribute));
-                                    clonedListObjectValueAttribute[index] = value;
-                                    setListCSVObjAttribute(clonedListObjectValueAttribute);
-                                } })))));
-                })))));
+                return (react_1.default.createElement(react_1.default.Fragment, null, csvFileData.length > 0 && (
+                // INFO: one compact row per Excel column — its header, then the
+                // field it fills — so a wide sheet maps without a long form
+                react_1.default.createElement("div", { className: "pb-32" },
+                    react_1.default.createElement("div", { className: "grid grid-cols-[minmax(0,2fr)_1rem_minmax(0,3fr)] items-center gap-x-2 border-b pb-1 text-xs font-medium ".concat(((_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkMode) ? "border-gray-700 text-gray-400" : "border-gray-200 text-gray-500") },
+                        react_1.default.createElement("span", null, "Excel column"),
+                        react_1.default.createElement("span", null),
+                        react_1.default.createElement("span", null, "Field")),
+                    Object.entries(csvFileData[0]).map(function (eachRow, index) {
+                        var _a;
+                        var eachKey = eachRow[0];
+                        if (!eachKey)
+                            return null;
+                        var clonedListValue = JSON.parse(JSON.stringify(listCSVMapAttribute));
+                        var selectedObjectModel = structure.find(function (eachModel) {
+                            return ((eachModel.id === clonedListValue[index] &&
+                                eachModel.type === "listObject") ||
+                                (eachModel.id === clonedListValue[index] &&
+                                    eachModel.type === "object"));
+                        });
+                        return (react_1.default.createElement("div", { key: "".concat(eachKey, "-").concat(index), className: "grid grid-cols-[minmax(0,2fr)_1rem_minmax(0,3fr)] items-center gap-x-2 py-1.5" },
+                            react_1.default.createElement("span", { className: "truncate text-sm ".concat(((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "text-gray-200" : "text-gray-700") }, eachKey),
+                            react_1.default.createElement(outline_1.ArrowRightIcon, { className: "h-4 w-4 text-gray-400", "aria-hidden": "true" }),
+                            react_1.default.createElement("div", { className: "flex min-w-0 gap-x-2" },
+                                react_1.default.createElement(select_1.Select, { portalDropdown: true, size: "xs", containerClassName: "min-w-0 flex-1", label: "", options: filterOptions_1, value: clonedListValue[index], onChange: function (value) {
+                                        var clonedListValueAttribute = JSON.parse(JSON.stringify(listCSVMapAttribute));
+                                        clonedListValueAttribute[index] = value;
+                                        setListCSVMapAttribute(clonedListValueAttribute);
+                                    } }),
+                                selectedObjectModel && (react_1.default.createElement(select_1.Select, { portalDropdown: true, size: "xs", containerClassName: "min-w-0 flex-1", label: "", options: (0, readModule_1.renderObjectOptions)(selectedObjectModel.objectData), value: listCSVObjAttribute[index], onChange: function (value) {
+                                        var clonedListObjectValueAttribute = JSON.parse(JSON.stringify(listCSVObjAttribute));
+                                        clonedListObjectValueAttribute[index] = value;
+                                        setListCSVObjAttribute(clonedListObjectValueAttribute);
+                                    } })))));
+                    })))));
             case 2:
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", { className: "flex flex-col mx-auto mt-2" }, "Mapped Column"),
                     react_1.default.createElement(table_1.Table, { loading: false, data: renderExcelReviewData(), hidePagination: true, limit: csvAPIAttribute.length + 1, header: [
-                            { key: "header", title: "Excel Column" },
-                            { key: "detail", title: "Mapping Column" },
+                            { key: "header", title: "Excel column" },
+                            { key: "detail", title: "Field" },
                         ] })));
             case 3:
                 return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -6969,40 +7249,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return null;
         }
     };
-    var renderQueryData = function () {
-        var queryStructureView = [];
-        var sortComponent = undefined;
-        queryList.map(function (data, index) {
-            if (queryList.length > 1) {
-                var upData_1 = index === queryList.length - 1;
-                sortComponent = (react_1.default.createElement("div", { className: "ml-2 cursor-pointer", onClick: function () {
-                        handleSortQuery(index, upData_1 ? "up" : "down");
-                    } }, upData_1 ? (react_1.default.createElement(outline_1.ArrowUpIcon, { className: "block w-5 h-5 text-primary-600" })) : (react_1.default.createElement(outline_1.ArrowDownIcon, { className: "block w-5 h-5 text-primary-600" }))));
-            }
-            var value = data.value;
-            var isDate = (0, dayjs_1.default)(value);
-            if (isDate.isValid())
-                value = (0, dayjs_1.default)(value).format("DD/MM/YYYY h:mm a");
-            queryStructureView.push({
-                key: index,
-                name: data.queryId,
-                value: value,
-                sort: sortComponent,
-                view: (react_1.default.createElement("div", { className: "ml-2 cursor-pointer", onClick: function () {
-                        handleViewQuery(index);
-                    } },
-                    react_1.default.createElement(outline_1.EyeIcon, { className: "block w-5 h-5 text-primary-600" }))),
-                del: (react_1.default.createElement("div", { className: "ml-2 cursor-pointer", onClick: function () {
-                        var temp = JSON.parse(JSON.stringify(queryList));
-                        temp.splice(index, 1);
-                        setQueryList(temp);
-                    } },
-                    react_1.default.createElement(outline_1.TrashIcon, { className: "block w-5 h-5 text-primary-600" }))),
-            });
-            return "";
-        });
-        return queryStructureView;
-    };
     //=====================================================================================
     //SECTION: Render CRUD
     //=====================================================================================
@@ -7037,6 +7283,35 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // INFO: in schema-hide mode a hidden column must stay listed so it can be
     // shown again; in per-user mode a developer-hidden column is never togglable
     var getViewSettingsColumns = function () { return getTogglableColumns(isSchemaHideMode); };
+    // INFO: the header sort options, unchanged for every other column. Formula
+    // columns sort on their computed value, so they are added where that is
+    // supported and left out where it is not (Firebase, union).
+    var handleGetSortOptions = function () {
+        var _a, _b, _c;
+        var baseOptions = (_c = (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.renderReferenceLabelOptions) === null || _b === void 0 ? void 0 : _b.call(_a)) !== null && _c !== void 0 ? _c : (isViewSettingsEnabled
+            ? getViewSettingsColumns().map(function (eachColumn) {
+                var _a;
+                return ({
+                    key: eachColumn.id,
+                    label: (_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id,
+                });
+            })
+            : undefined);
+        if (!baseOptions || formulaColumnIds.length === 0)
+            return baseOptions;
+        var otherOptions = baseOptions.filter(function (eachOption) { return !formulaColumnIds.includes(eachOption.key); });
+        if (!isFormulaViewSupported)
+            return otherOptions;
+        return __spreadArray(__spreadArray([], otherOptions, true), structure
+            .filter(function (eachModel) { return eachModel.type === "formula"; })
+            .map(function (eachModel) {
+            var _a;
+            return ({
+                key: eachModel.id,
+                label: (_a = eachModel.name) !== null && _a !== void 0 ? _a : eachModel.id,
+            });
+        }), true);
+    };
     var getIsColumnHidden = function (column) {
         return isSchemaHideMode
             ? !!column.hide
@@ -7093,7 +7368,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 react_1.default.createElement("p", { className: "text-sm font-medium ".concat(labelColor) }, "Sort"),
                 react_1.default.createElement("div", { className: "mt-1 flex flex-row items-center gap-x-2" },
                     react_1.default.createElement("div", { className: "grow min-w-0" },
-                        react_1.default.createElement(select_1.Select, { id: "dtw-view-sort-column", portalDropdown: true, label: "", containerClassName: "min-w-0", value: (_b = activeSortId === null || activeSortId === void 0 ? void 0 : activeSortId.sortId) !== null && _b !== void 0 ? _b : "", placeholder: "Column", darkMode: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkMode, options: viewColumns.map(function (eachColumn) {
+                        react_1.default.createElement(select_1.Select, { id: "dtw-view-sort-column", portalDropdown: true, label: "", containerClassName: "min-w-0", value: (_b = activeSortId === null || activeSortId === void 0 ? void 0 : activeSortId.sortId) !== null && _b !== void 0 ? _b : "", placeholder: "Column", darkMode: (_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkMode, options: viewColumns
+                                .filter(function (eachColumn) {
+                                return isFormulaViewSupported || eachColumn.type !== "formula";
+                            })
+                                .map(function (eachColumn) {
                                 var _a;
                                 return ({
                                     key: eachColumn.id,
@@ -8329,7 +8608,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         };
                         // INFO: Desktop — PopUp (hidden on mobile)
                         actionElementList.push(react_1.default.createElement("div", { className: "hidden md:block" },
-                            react_1.default.createElement(popUp_1.PopUp, { darkMode: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.darkMode, ctaComp: flexFilterIconBtn(), renderComp: (0, flexFilter_1.renderFlexFilterPopupContent)(flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, (_z = props.bareSettings) === null || _z === void 0 ? void 0 : _z.bareListFilterQuery, searchInput, (_0 = props.bareSettings) === null || _0 === void 0 ? void 0 : _0.bareListFilterAddComponent, undefined, {
+                            react_1.default.createElement(popUp_1.PopUp, { darkMode: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.darkMode, ctaComp: flexFilterIconBtn(), renderComp: (0, flexFilter_1.renderFlexFilterPopupContent)(flexFilters, flexFilterStructure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, (_z = props.bareSettings) === null || _z === void 0 ? void 0 : _z.bareListFilterQuery, searchInput, (_0 = props.bareSettings) === null || _0 === void 0 ? void 0 : _0.bareListFilterAddComponent, undefined, {
                                     darkMode: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.darkMode,
                                     darkModeBg: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.darkModeBg,
                                 }), anchor: "right", excludePortalIds: ["datepicker-portal", "select-portal"], lib: { Transition: (_3 = props === null || props === void 0 ? void 0 : props.lib) === null || _3 === void 0 ? void 0 : _3.Transition } })));
@@ -8337,7 +8616,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         actionElementList.push(react_1.default.createElement("div", { className: "block md:hidden" },
                             !((_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareListMobileFloatingSearch) &&
                                 flexFilterIconBtn(true),
-                            (0, flexFilter_1.renderFlexFilterModal)(flexFilterModalOpen, flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, function () { return setFlexFilterModalOpen(false); }, (_5 = props.bareSettings) === null || _5 === void 0 ? void 0 : _5.bareListFilterQuery, searchInput, (_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareListFilterAddComponent, {
+                            (0, flexFilter_1.renderFlexFilterModal)(flexFilterModalOpen, flexFilters, flexFilterStructure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, function () { return setFlexFilterModalOpen(false); }, (_5 = props.bareSettings) === null || _5 === void 0 ? void 0 : _5.bareListFilterQuery, searchInput, (_6 = props.bareSettings) === null || _6 === void 0 ? void 0 : _6.bareListFilterAddComponent, {
                                 darkMode: (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.darkMode,
                                 darkModeBg: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.darkModeBg,
                             })));
@@ -8714,6 +8993,11 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             return false;
         if (!groupId || isFirebase)
             return false;
+        // INFO: a formula sort or filter needs every row read and ordered at
+        // once; band pages come straight from the server without it, so the bands
+        // are built from the formula-ordered rows instead
+        if (isFormulaView)
+            return false;
         // INFO: a union list pages by skip, which a per-band cursor cannot express,
         // so it keeps the single pager and groups the loaded rows
         if ((_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.unionCollections) === null || _b === void 0 ? void 0 : _b.length)
@@ -9234,7 +9518,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     };
     var renderGroupTable = function (multipleSelect) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24;
         if (groupId && !((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareNewDTW)) {
             var groupAttributeDS_1 = structure.find(function (eachDS) { return eachDS.id === groupId; });
             var groupedSpaceTableData = spaceTableData.reduce(function (acc, eachData) {
@@ -9262,7 +9546,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             else {
                 return Object.entries(groupedSpaceTableData).map(function (_a) {
-                    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+                    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
                     var eachKey = _a[0], eachValue = _a[1];
                     var dataList = eachValue;
                     var ids = (dataList === null || dataList === void 0 ? void 0 : dataList.map(function (eachData) { return eachData._id; })) || [];
@@ -9273,7 +9557,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         react_1.default.createElement("div", { className: "font-semibold text-md mt-5" },
                             "Group By ",
                             eachKey),
-                        react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: filterTableData, spaceData: dataList !== null && dataList !== void 0 ? dataList : [], referencesOptions: listReferencesOptions, size: (_b = dataList.length) !== null && _b !== void 0 ? _b : 0, limit: 5, cursor: "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.disableSelectFullData) === null || _d === void 0 ? void 0 : _d.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                        react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: filterTableData, spaceData: dataList !== null && dataList !== void 0 ? dataList : [], referencesOptions: listReferencesOptions, size: (_b = dataList.length) !== null && _b !== void 0 ? _b : 0, limit: 5, cursor: "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: ((_d = (_c = props.organise) === null || _c === void 0 ? void 0 : _c.disableSelectFullData) === null || _d === void 0 ? void 0 : _d.table) ||
+                                isFormulaView, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                                 selectedIds.length > 0 &&
                                     canBatchUpdate &&
                                     !((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
@@ -9308,15 +9593,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 // INFO: per-column header filter is replaced by the flex filters
                                 filterEnabled: false,
                                 sortId: activeSortId,
-                                sortOptions: (_t = (_s = (_r = props.organise) === null || _r === void 0 ? void 0 : _r.renderReferenceLabelOptions) === null || _s === void 0 ? void 0 : _s.call(_r)) !== null && _t !== void 0 ? _t : (isViewSettingsEnabled
-                                    ? getViewSettingsColumns().map(function (eachColumn) {
-                                        var _a;
-                                        return ({
-                                            key: eachColumn.id,
-                                            label: (_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id,
-                                        });
-                                    })
-                                    : undefined),
+                                sortOptions: handleGetSortOptions(),
                                 onSortColumn: handleSortColumn,
                                 // INFO: header drag and the panel handle run the same reorder, so the
                                 // order persists identically whichever one the user grabs
@@ -9354,7 +9631,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     });
                                 }); },
                             }, onObjectEdit: handleObjectCellEdit, addable: {
-                                active: ((_u = props.edit) === null || _u === void 0 ? void 0 : _u.listAddable) ? true : false,
+                                active: ((_r = props.edit) === null || _r === void 0 ? void 0 : _r.listAddable) ? true : false,
                                 onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                                     var createdId;
                                     return __generator(this, function (_a) {
@@ -9368,7 +9645,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         }
                                     });
                                 }); },
-                            }, darkMode: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.darkMode, hidePagination: true, disableEllipsisOnLongWord: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.disableEllipsisOnLongWord })));
+                            }, darkMode: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.darkMode, hidePagination: true, disableEllipsisOnLongWord: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.disableEllipsisOnLongWord })));
                 });
             }
         }
@@ -9384,7 +9661,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         ? function (groupKey, page) {
                             return handleFetchGroupPage(groupKey, page);
                         }
-                        : undefined, groupLoadingStatus: renderCheckGroupPaging() ? groupPageState : undefined, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.disableSelectFullData) === null || _e === void 0 ? void 0 : _e.table, maxSelectedCount: (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListMaxSelectedCount, mobileView: (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListMobileView, mobileTooltip: (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareMobileTooltip, multiActionFloatingBtns: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (canBatchUpdate &&
+                        : undefined, groupLoadingStatus: renderCheckGroupPaging() ? groupPageState : undefined, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: ((_e = (_d = props.organise) === null || _d === void 0 ? void 0 : _d.disableSelectFullData) === null || _e === void 0 ? void 0 : _e.table) || isFormulaView, maxSelectedCount: (_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareListMaxSelectedCount, mobileView: (_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareListMobileView, mobileTooltip: (_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareMobileTooltip, multiActionFloatingBtns: __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (canBatchUpdate &&
                         !((_j = props.bareSettings) === null || _j === void 0 ? void 0 : _j.bareHideTableExtraMultipleAction)
                         ? [
                             {
@@ -9454,28 +9731,23 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 return structure.find(function (eachColumn) { return eachColumn.id === columnId; });
                             }
                             : undefined,
-                        renderAddColumnElements: ((_z = props.bareSettings) === null || _z === void 0 ? void 0 : _z.bareAddColumns)
+                        getSchema: ((_z = props.bareSettings) === null || _z === void 0 ? void 0 : _z.bareAddColumns)
+                            ? function () { return structure; }
+                            : undefined,
+                        renderAddColumnElements: ((_0 = props.bareSettings) === null || _0 === void 0 ? void 0 : _0.bareAddColumns)
                             ? undefined
                             : renderAddMathColumn,
                         // INFO: the popup's reference pickers read from the same providers
                         // the schema editor uses — without them a reference column would be
                         // created with no target and resolve nothing
-                        renderReferenceSpaceOptions: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.renderReferenceSpaceOptions,
-                        renderReferenceLabelOptions: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.renderReferenceLabelOptions,
+                        renderReferenceSpaceOptions: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.renderReferenceSpaceOptions,
+                        renderReferenceLabelOptions: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.renderReferenceLabelOptions,
                         dragEnabled: isViewSettingsEnabled,
                         sortEnabled: isViewSettingsEnabled,
                         // INFO: per-column header filter is replaced by the flex filters
                         filterEnabled: false,
                         sortId: activeSortId,
-                        sortOptions: (_4 = (_3 = (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.renderReferenceLabelOptions) === null || _3 === void 0 ? void 0 : _3.call(_2)) !== null && _4 !== void 0 ? _4 : (isViewSettingsEnabled
-                            ? getViewSettingsColumns().map(function (eachColumn) {
-                                var _a;
-                                return ({
-                                    key: eachColumn.id,
-                                    label: (_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id,
-                                });
-                            })
-                            : undefined),
+                        sortOptions: handleGetSortOptions(),
                         onSortColumn: handleSortColumn,
                         // INFO: header drag and the panel handle run the same reorder, so the
                         // order persists identically whichever one the user grabs
@@ -9514,7 +9786,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             });
                         }); },
                     }, onObjectEdit: handleObjectCellEdit, addable: {
-                        active: ((_5 = props.edit) === null || _5 === void 0 ? void 0 : _5.listAddable) ? true : false,
+                        active: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listAddable) ? true : false,
                         onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                             var createdId;
                             return __generator(this, function (_a) {
@@ -9528,16 +9800,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 }
                             });
                         }); },
-                    }, darkMode: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.darkMode, 
+                    }, darkMode: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.darkMode, 
                     // INFO: each band pages itself, so the list-wide pager would only
                     // page the read that seeded them
-                    hidePagination: ((_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.hidePagination) ||
-                        (renderCheckGroupPaging() && !renderCheckScrollMode()), customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.disableEllipsisOnLongWord, pinColumns: (_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareListTablePinColumns }));
+                    hidePagination: ((_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.hidePagination) ||
+                        (renderCheckGroupPaging() && !renderCheckScrollMode()), customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.disableEllipsisOnLongWord, pinColumns: (_7 = props.bareSettings) === null || _7 === void 0 ? void 0 : _7.bareListTablePinColumns }));
             }
-            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: (_11 = (_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.disableSelectFullData) === null || _11 === void 0 ? void 0 : _11.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+            return (react_1.default.createElement(table_1.Table, { showId: showId, paginationType: renderResolvedPaginationType(), data: tableData, spaceData: spaceTableData !== null && spaceTableData !== void 0 ? spaceTableData : [], referencesOptions: listReferencesOptions, size: size !== null && size !== void 0 ? size : 0, limit: limit, cursor: cursor !== null && cursor !== void 0 ? cursor : "", loading: tableLoading !== null && tableLoading !== void 0 ? tableLoading : true, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, selectAllText: selectAll ? "from filter" : "", disableSelectFullData: ((_9 = (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.disableSelectFullData) === null || _9 === void 0 ? void 0 : _9.table) || isFormulaView, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                     selectedIds.length > 0 &&
                         canBatchUpdate &&
-                        !((_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
+                        !((_10 = props.bareSettings) === null || _10 === void 0 ? void 0 : _10.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();
                             } }),
@@ -9551,8 +9823,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     !isFirebase && canBatchUpdate && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                             setBatchUpdateModal(true);
                         } })),
-                    ((_13 = props.bareSettings) === null || _13 === void 0 ? void 0 : _13.bareListMultipleSelectAddtionalActions) &&
-                        ((_15 = (_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareListMultipleSelectAddtionalActions) === null || _15 === void 0 ? void 0 : _15.map(function (eachButton) {
+                    ((_11 = props.bareSettings) === null || _11 === void 0 ? void 0 : _11.bareListMultipleSelectAddtionalActions) &&
+                        ((_13 = (_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareListMultipleSelectAddtionalActions) === null || _13 === void 0 ? void 0 : _13.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 : []);
@@ -9561,25 +9833,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     var _a, _b;
                     handleCaptureListScroll(id);
                     (_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: (_17 = (_16 = props.newTabUrl) === null || _16 === void 0 ? void 0 : _16.default) !== null && _17 !== void 0 ? _17 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_19 = (_18 = props.newTabUrl) === null || _18 === void 0 ? void 0 : _18.addons) !== null && _19 !== void 0 ? _19 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
+                }, linkType: props.linkType, custom: props.custom, newTabUrl: (_15 = (_14 = props.newTabUrl) === null || _14 === void 0 ? void 0 : _14.default) !== null && _15 !== void 0 ? _15 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_17 = (_16 = props.newTabUrl) === null || _16 === void 0 ? void 0 : _16.addons) !== null && _17 !== void 0 ? _17 : "&type=read&collection=".concat(props.collectionId, "&view=general"), handleUpdatePageIndex: function (value) {
                     handlePagination(value);
-                }, className: "mt-5", lib: { axios: (_20 = props.lib) === null || _20 === void 0 ? void 0 : _20.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.fixedPagination, advSettings: {
-                    addColumnEnabled: (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.addColumnEnabled,
+                }, className: "mt-5", lib: { axios: (_18 = props.lib) === null || _18 === void 0 ? void 0 : _18.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_19 = props.organise) === null || _19 === void 0 ? void 0 : _19.fixedPagination, advSettings: {
+                    addColumnEnabled: (_20 = props.organise) === null || _20 === void 0 ? void 0 : _20.addColumnEnabled,
                     renderAddColumnElements: renderAddMathColumn,
                     dragEnabled: isViewSettingsEnabled,
                     sortEnabled: isViewSettingsEnabled,
                     // INFO: per-column header filter is replaced by the flex filters
                     filterEnabled: false,
                     sortId: activeSortId,
-                    sortOptions: (_25 = (_24 = (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.renderReferenceLabelOptions) === null || _24 === void 0 ? void 0 : _24.call(_23)) !== null && _25 !== void 0 ? _25 : (isViewSettingsEnabled
-                        ? getViewSettingsColumns().map(function (eachColumn) {
-                            var _a;
-                            return ({
-                                key: eachColumn.id,
-                                label: (_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id,
-                            });
-                        })
-                        : undefined),
+                    sortOptions: handleGetSortOptions(),
                     onSortColumn: handleSortColumn,
                     // INFO: header drag and the panel handle run the same reorder, so the
                     // order persists identically whichever one the user grabs
@@ -9615,7 +9879,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                     }); },
                 }, onObjectEdit: handleObjectCellEdit, addable: {
-                    active: ((_26 = props.edit) === null || _26 === void 0 ? void 0 : _26.listAddable) ? true : false,
+                    active: ((_21 = props.edit) === null || _21 === void 0 ? void 0 : _21.listAddable) ? true : false,
                     onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                         var createdId;
                         return __generator(this, function (_a) {
@@ -9629,7 +9893,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }); },
-                }, darkMode: (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.darkMode, hidePagination: (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.disableEllipsisOnLongWord }));
+                }, darkMode: (_22 = props.organise) === null || _22 === void 0 ? void 0 : _22.darkMode, hidePagination: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.disableEllipsisOnLongWord }));
         }
     };
     // INFO: `hidden` keeps the markers out of space-y spacing
@@ -9932,7 +10196,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             else if (selectedTabData.viewType === "list") {
                 // INFO: when bareNewDTW is enabled, render NewList instead of legacy List
                 if ((_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareNewDTW) {
-                    return (react_1.default.createElement(newList_1.NewList, { darkModeBg: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.darkModeBg, paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list", undefined, true), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.disableSelectFullData) === null || _w === void 0 ? void 0 : _w.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", maxSelectedCount: (_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareListMaxSelectedCount, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                    return (react_1.default.createElement(newList_1.NewList, { darkModeBg: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.darkModeBg, paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list", undefined, true), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: ((_w = (_v = props.organise) === null || _v === void 0 ? void 0 : _v.disableSelectFullData) === null || _w === void 0 ? void 0 : _w.list) || isFormulaView, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", maxSelectedCount: (_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareListMaxSelectedCount, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                             selectedIds.length > 0 && canBatchUpdate && (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();
@@ -9955,7 +10219,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }, darkMode: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.darkMode, className: "mt-5", hidePagination: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.hidePagination, customPaginationSize: customPaginationSize, mobileTooltip: (_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareListMobileTooltip }));
                 }
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(list_1.List, { darkModeBg: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkModeBg, paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list", undefined, true), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: (_7 = (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.disableSelectFullData) === null || _7 === void 0 ? void 0 : _7.list, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
+                    react_1.default.createElement(list_1.List, { darkModeBg: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkModeBg, paginationType: renderResolvedPaginationType(), list: renderGridAndListData(selectedTabData.viewImage, "list", undefined, true), size: size, limit: limit, cursor: cursor, loading: tableLoading, pageIndex: pageIndex, checkbox: multipleSelect, selectAll: selectAll, selectedIds: selectedIds, disableSelectFullData: ((_7 = (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.disableSelectFullData) === null || _7 === void 0 ? void 0 : _7.list) || isFormulaView, handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, selectAllText: selectAll ? "from filter" : "", multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                             selectedIds.length > 0 && canBatchUpdate && (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();
@@ -10728,52 +10992,37 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }
         else if (exportExcel || exportQR) {
             var showEmail = exportType !== "pdf" && !((_f = (_e = props.organise) === null || _e === void 0 ? void 0 : _e.exportSettings) === null || _f === void 0 ? void 0 : _f.disableEmail);
-            return (react_1.default.createElement(react_1.default.Fragment, null, queryForm ? (react_1.default.createElement(queryForm_1.QueryForm, { dbModule: (_g = props.lib) === null || _g === void 0 ? void 0 : _g.axios, model: structure, updateQuery: queryIndex >= 0 ? queryList[queryIndex] : undefined, devSettings: props.devSettings, handleCloseForm: function () {
-                    handleViewQuery(-1);
-                }, handleQueryOnComplete: function (queryData) {
-                    handlePushQueryList(queryData, queryIndex);
-                }, renderReferenceLabelOptions: ((_h = props.organise) === null || _h === void 0 ? void 0 : _h.renderReferenceLabelOptions)
-                    ? (_j = props.organise) === null || _j === void 0 ? void 0 : _j.renderReferenceLabelOptions
-                    : function () {
-                        return [];
-                    } })) : (react_1.default.createElement("div", null,
-                showEmail ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", null,
-                        react_1.default.createElement("h1", null, "Download file or send it via email."),
-                        react_1.default.createElement("p", { className: "pt-2 mb-4 text-sm text-gray-600" },
-                            exportExcel
-                                ? "Export your data to .csv format to be viewable on Excel."
-                                : "Export your data to .pdf format to be viewable on Adobe/Browser.",
-                            "Filter your data exported based on conditions by creating queries at the table below."),
-                        react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(textInput_1.TextInput, { ref: exportCSVEmailInputRef, value: exportCSVEmail, type: "email", label: "Email", subLabel: "A download link will be sent to your email", placeholder: (_l = (_k = props.devSettings.currentUser) === null || _k === void 0 ? void 0 : _k.userEmail) !== null && _l !== void 0 ? _l : "Enter your email", onChange: function (e) { return setExportCSVEmail(e.target.value); } }),
-                            react_1.default.createElement("div", { className: "flex mt-5 items-center justify-end" },
-                                react_1.default.createElement(iconButton_1.IconButton, { className: "sm", icon: react_1.default.createElement(outline_1.PlusCircleIcon, { className: "w-6 h-6 text-white" }), background: "bg-primary-500 hover:bg-primary-600", onClick: function () { return setQueryForm(!queryForm); } })))),
-                    react_1.default.createElement(table_1.Table, { className: "mt-5", header: dataStateModel_1.queryTableHeader, data: renderQueryData(), loading: false }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("p", null, "Click the button below to download."),
-                    (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(textInput_1.TextInput, { containerClassName: "mt-5", value: exportPDFTitle, type: "text", label: "Title (Optional)", placeholder: (_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.exportSettings) === null || _o === void 0 ? void 0 : _o.defaultExportPDFName) !== null && _p !== void 0 ? _p : "Enter your report title", onChange: function (e) { return setExportPDFTitle(e.target.value); } })),
-                    (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Sum Attribute", containerClassName: "mt-5", value: exportSumAttributeIds, options: (_s = (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.renderReferenceLabelOptions) === null || _r === void 0 ? void 0 : _r.call(_q, "", false, "number")) !== null && _s !== void 0 ? _s : [], staticDropdown: true, onChange: function (value) {
-                            setExportSumAttributeIds(value);
-                        } })))),
-                react_1.default.createElement("div", { className: "mt-5 flex items-center justify-between" },
-                    react_1.default.createElement("label", { className: "text-sm font-medium ".concat(((_t = props.organise) === null || _t === void 0 ? void 0 : _t.darkMode) ? "text-gray-200" : "text-gray-700") }, "Hide Sub Items"),
-                    react_1.default.createElement(toggle_1.Toggle, { text: "", direction: "right", value: hideSubItems, onClick: function () { return setHideSubItems(!hideSubItems); } })),
-                react_1.default.createElement("div", { className: "flex justify-end mt-5 " },
-                    showEmail && (react_1.default.createElement(button_1.Button, { text: "Send to email", size: "small", type: "normal", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, exportCSVEmailInputRef.current.handleSubmit()];
-                                    case 1:
-                                        if (_a.sent()) {
-                                            handleExportCSVData();
-                                        }
-                                        return [2 /*return*/];
-                                }
-                            });
-                        }); } })),
-                    react_1.default.createElement(button_1.Button, { type: "normal", text: "Download", size: "small", className: "ml-3", onClick: function () {
-                            return handleExportCSVData(true, exportType === "print");
-                        } }))))));
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", null,
+                    showEmail ? (react_1.default.createElement(textInput_1.TextInput, { ref: exportCSVEmailInputRef, value: exportCSVEmail, type: "email", label: "Email", size: "xs", placeholder: (_h = (_g = props.devSettings.currentUser) === null || _g === void 0 ? void 0 : _g.userEmail) !== null && _h !== void 0 ? _h : "Enter your email", onChange: function (e) { return setExportCSVEmail(e.target.value); } })) : (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("p", null, "Click the button below to download."),
+                        (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(textInput_1.TextInput, { containerClassName: "mt-5", value: exportPDFTitle, type: "text", label: "Title (Optional)", placeholder: (_l = (_k = (_j = props.organise) === null || _j === void 0 ? void 0 : _j.exportSettings) === null || _k === void 0 ? void 0 : _k.defaultExportPDFName) !== null && _l !== void 0 ? _l : "Enter your report title", onChange: function (e) { return setExportPDFTitle(e.target.value); } })),
+                        (exportType === "pdf" || exportType === "print") && (react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Sum Attribute", containerClassName: "mt-5", value: exportSumAttributeIds, options: (_p = (_o = (_m = props.organise) === null || _m === void 0 ? void 0 : _m.renderReferenceLabelOptions) === null || _o === void 0 ? void 0 : _o.call(_m, "", false, "number")) !== null && _p !== void 0 ? _p : [], staticDropdown: true, onChange: function (value) {
+                                setExportSumAttributeIds(value);
+                            } })))),
+                    react_1.default.createElement("div", { className: "mt-3 -mx-4 [&>div]:w-full [&>div]:max-w-none" }, (0, flexFilter_1.renderFlexFilterPopupContent)(exportFlexFilters, exportFilterStructure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, exportFlexActions, (_q = props.bareSettings) === null || _q === void 0 ? void 0 : _q.bareListFilterQuery, undefined, undefined, true, {
+                        darkMode: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.darkMode,
+                        darkModeBg: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.darkModeBg,
+                    })),
+                    react_1.default.createElement("div", { className: "mt-3 flex items-center justify-between" },
+                        react_1.default.createElement("label", { className: "text-sm font-medium ".concat(((_t = props.organise) === null || _t === void 0 ? void 0 : _t.darkMode) ? "text-gray-200" : "text-gray-700") }, "Hide Sub Items"),
+                        react_1.default.createElement(toggle_1.Toggle, { text: "", direction: "right", value: hideSubItems, onClick: function () { return setHideSubItems(!hideSubItems); } })),
+                    react_1.default.createElement("div", { className: "flex justify-end mt-5 " },
+                        showEmail && (react_1.default.createElement(button_1.Button, { text: "Send to email", size: "small", type: "normal", onClick: function () { return __awaiter(void 0, void 0, void 0, function () {
+                                return __generator(this, function (_a) {
+                                    switch (_a.label) {
+                                        case 0: return [4 /*yield*/, exportCSVEmailInputRef.current.handleSubmit()];
+                                        case 1:
+                                            if (_a.sent()) {
+                                                handleExportCSVData();
+                                            }
+                                            return [2 /*return*/];
+                                    }
+                                });
+                            }); } })),
+                        react_1.default.createElement(button_1.Button, { type: "normal", text: "Download", size: "small", className: "ml-3", onClick: function () {
+                                return handleExportCSVData(true, exportType === "print");
+                            } })))));
         }
         else if (addTabModal) {
             return (react_1.default.createElement(settingsModal_1.TabModal, { type: resolvedType, tabs: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.extendedTabs, editIndex: editTabIndex >= 0 ? editTabIndex : undefined, onChangeTabs: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.onChangeTabs, model: structure, collectionId: props.collectionId, renderReferenceLabelOptions: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions, onClose: function () {
@@ -11131,18 +11380,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_77 = (_76 = props.renderSettings) === null || _76 === void 0 ? void 0 : _76.renderLoadingUI) === null || _77 === void 0 ? void 0 : _77.call(_76)) && loading ? ((_78 = props.renderSettings) === null || _78 === void 0 ? void 0 : _78.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_79 = props.organise) === null || _79 === void 0 ? void 0 : _79.darkMode, darkModeBg: (_80 = props.organise) === null || _80 === void 0 ? void 0 : _80.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_79 = (_78 = props.renderSettings) === null || _78 === void 0 ? void 0 : _78.renderLoadingUI) === null || _79 === void 0 ? void 0 : _79.call(_78)) && loading ? ((_80 = props.renderSettings) === null || _80 === void 0 ? void 0 : _80.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_81 = props.organise) === null || _81 === void 0 ? void 0 : _81.darkMode, darkModeBg: (_82 = props.organise) === null || _82 === void 0 ? void 0 : _82.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;
-                if (queryForm)
-                    handleViewQuery(-1);
-                else {
-                    handlePopUpModal(false);
-                    setExportCSVEmail((_b = (_a = props.devSettings.currentUser) === null || _a === void 0 ? void 0 : _a.userEmail) !== null && _b !== void 0 ? _b : "");
-                }
+                handlePopUpModal(false);
+                setExportCSVEmail((_b = (_a = props.devSettings.currentUser) === null || _a === void 0 ? void 0 : _a.userEmail) !== null && _b !== void 0 ? _b : "");
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) })),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_81 = props.organise) === null || _81 === void 0 ? void 0 : _81.darkMode, darkModeBg: (_82 = props.organise) === null || _82 === void 0 ? void 0 : _82.darkModeBg, maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_83 = props.organise) === null || _83 === void 0 ? void 0 : _83.darkMode, darkModeBg: (_84 = props.organise) === null || _84 === void 0 ? void 0 : _84.darkModeBg, maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
                 return (react_1.default.createElement(referenceModal_1.ReferenceModal, { referenceModelSchema: referenceModelSchema, referenceDataStructure: referenceCreationModal, devSettings: props.devSettings, handleCreateRefId: function (dataId) {
                         if (dataId) {
                             var currentValue = selectedData[referenceCreationModal.id];
@@ -11158,19 +11403,19 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setReferenceCreationModal({ id: "", name: "", type: "string" });
             } }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_83 = props.organise) === null || _83 === void 0 ? void 0 : _83.darkMode, darkModeBg: (_84 = props.organise) === null || _84 === void 0 ? void 0 : _84.darkModeBg, maxWidth: "2xl", open: Object.keys(referenceDeleteTableData).length > 0, renderContent: renderReferenceDeleteTable, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_85 = props.organise) === null || _85 === void 0 ? void 0 : _85.darkMode, darkModeBg: (_86 = props.organise) === null || _86 === void 0 ? void 0 : _86.darkModeBg, maxWidth: "2xl", open: Object.keys(referenceDeleteTableData).length > 0, renderContent: renderReferenceDeleteTable, onClose: function () {
                 setReferenceDeleteTableData({});
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_85 = props.organise) === null || _85 === void 0 ? void 0 : _85.darkMode, darkModeBg: (_86 = props.organise) === null || _86 === void 0 ? void 0 : _86.darkModeBg, open: deleteModal, renderContent: renderDeleteModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_87 = props.organise) === null || _87 === void 0 ? void 0 : _87.darkMode, darkModeBg: (_88 = props.organise) === null || _88 === void 0 ? void 0 : _88.darkModeBg, open: deleteModal, renderContent: renderDeleteModalContent, onClose: function () {
                 setDeletePasscodeInput("");
                 setDeleteModal(!deleteModal);
                 setDeleteFeedId("");
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_87 = props.organise) === null || _87 === void 0 ? void 0 : _87.darkMode, darkModeBg: (_88 = props.organise) === null || _88 === void 0 ? void 0 : _88.darkModeBg, open: batchUpdateModal, renderContent: renderBatchUpdateModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_89 = props.organise) === null || _89 === void 0 ? void 0 : _89.darkMode, darkModeBg: (_90 = props.organise) === null || _90 === void 0 ? void 0 : _90.darkModeBg, open: batchUpdateModal, renderContent: renderBatchUpdateModalContent, onClose: function () {
                 setBatchUpdateData({ columnId: "", columnData: {} });
                 setBatchUpdateModal(false);
             }, notification: react_1.default.createElement(react_1.default.Fragment, null, renderNotification("modal")) }),
-        react_1.default.createElement(modal_1.Modal, { darkMode: (_89 = props.organise) === null || _89 === void 0 ? void 0 : _89.darkMode, darkModeBg: (_90 = props.organise) === null || _90 === void 0 ? void 0 : _90.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_91 = props.organise) === null || _91 === void 0 ? void 0 : _91.darkMode, darkModeBg: (_92 = props.organise) === null || _92 === void 0 ? void 0 : _92.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
                 var _a, _b;
                 if (props.space)
                     return (react_1.default.createElement(authModal_1.AuthModal, { space: props.space, userId: (_a = props.id) !== null && _a !== void 0 ? _a : "", client: (_b = props.lib) === null || _b === void 0 ? void 0 : _b.axios, type: selectedAuthMethod, authMethods: authMethods, onComplete: handleAuthComplete }));
@@ -11178,7 +11423,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setSelectedAuthMethod("");
             } }),
-        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_91 = props.organise) === null || _91 === void 0 ? void 0 : _91.darkMode, darkModeBg: (_92 = props.organise) === null || _92 === void 0 ? void 0 : _92.darkModeBg, open: activityModal, title: "Activity Log", renderContent: function () {
+        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_93 = props.organise) === null || _93 === void 0 ? void 0 : _93.darkMode, darkModeBg: (_94 = props.organise) === null || _94 === void 0 ? void 0 : _94.darkModeBg, open: activityModal, title: "Activity Log", renderContent: function () {
                 var _a, _b;
                 return (react_1.default.createElement(activityModal_1.ActivityModal, { title: props.title && typeof props.title === "string"
                         ? props.title