blixify-ui-web 1.2.67 → 1.2.69

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

@@ -108,6 +108,7 @@ var calendar_1 = require("../../display/calendar");
 var detailList_1 = require("../../display/detailList");
 var emptyState_1 = require("../../display/emptyState");
 var feeds_1 = require("../../display/feeds");
+var scrollShadow_1 = require("../../display/scrollShadow");
 var newFeeds_1 = require("../../display/newFeeds");
 var grid_1 = require("../../display/grid");
 var kanban_1 = require("../../display/kanban");
@@ -180,8 +181,10 @@ var handleIsEmptyElement = function (element) {
             element.type === react_1.default.Fragment &&
             !((_a = element.props) === null || _a === void 0 ? void 0 : _a.children));
 };
+// INFO: rows-per-page choices offered in the view settings panel
+var PAGE_LIMIT_OPTIONS = [10, 25, 50, 100];
 exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _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;
+    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;
     var intialiseDefaultFilterValues = function () {
         var _a;
         var initialFilterSearch = {};
@@ -242,16 +245,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             initialFilterReferenceDate: initialFilterReferenceDate,
         };
     };
-    var _65 = intialiseDefaultFilterValues(), initialFilterSearch = _65.initialFilterSearch, initialFilterSearchParams = _65.initialFilterSearchParams, initialFilterSelection = _65.initialFilterSelection, initialFilterReference = _65.initialFilterReference, initialFilterReferenceDate = _65.initialFilterReferenceDate;
+    var _70 = intialiseDefaultFilterValues(), initialFilterSearch = _70.initialFilterSearch, initialFilterSearchParams = _70.initialFilterSearchParams, initialFilterSelection = _70.initialFilterSelection, initialFilterReference = _70.initialFilterReference, initialFilterReferenceDate = _70.initialFilterReferenceDate;
     // INFO: Persist view state hook — handles storage read/write for filter/sort/column state
-    var _66 = (0, viewStatePersistence_1.usePersistedViewState)({
+    var _71 = (0, viewStatePersistence_1.usePersistedViewState)({
         mode: (_a = props.organise) === null || _a === void 0 ? void 0 : _a.persistViewState,
         collectionId: props.collectionId,
         uniqueLabel: props.uniqueLabel,
         type: props.type,
-    }), persistedState = _66.persistedState, isPersistEnabled = _66.isEnabled, handleSaveView = _66.handleSaveView;
-    var _67 = (0, react_1.useState)(false), loading = _67[0], setLoading = _67[1];
-    var _68 = (0, react_1.useState)(), notification = _68[0], setNotification = _68[1];
+    }), persistedState = _71.persistedState, isPersistEnabled = _71.isEnabled, handleSaveView = _71.handleSaveView;
+    var _72 = (0, react_1.useState)(false), loading = _72[0], setLoading = _72[1];
+    var _73 = (0, react_1.useState)(), notification = _73[0], setNotification = _73[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 () {
@@ -261,56 +264,53 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return function () { return clearTimeout(timer); };
     }, [notification]);
     //INFO : Used by List
-    var _69 = (0, react_1.useState)((_b = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _b !== void 0 ? _b : initialFilterSearch), filterSearch = _69[0], setFilterSearch = _69[1];
-    var _70 = (0, react_1.useState)((_c = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _c !== void 0 ? _c : initialFilterSearchParams), filterSearchParams = _70[0], setFilterSearchParams = _70[1];
-    var _71 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _d !== void 0 ? _d : initialFilterSelection), filterSelection = _71[0], setFilterSelection = _71[1];
-    var _72 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _e !== void 0 ? _e : initialFilterReference), filterReference = _72[0], setFilterReference = _72[1];
-    var _73 = (0, react_1.useState)({}), filterReferenceSearch = _73[0], setFilterReferenceSearch = _73[1];
-    var _74 = (0, react_1.useState)({}), filterReferenceList = _74[0], setFilterReferenceList = _74[1];
-    var _75 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
+    var _74 = (0, react_1.useState)((_b = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _b !== void 0 ? _b : initialFilterSearch), filterSearch = _74[0], setFilterSearch = _74[1];
+    var _75 = (0, react_1.useState)((_c = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSearchParams) !== null && _c !== void 0 ? _c : initialFilterSearchParams), filterSearchParams = _75[0], setFilterSearchParams = _75[1];
+    var _76 = (0, react_1.useState)((_d = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterSelection) !== null && _d !== void 0 ? _d : initialFilterSelection), filterSelection = _76[0], setFilterSelection = _76[1];
+    var _77 = (0, react_1.useState)((_e = persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReference) !== null && _e !== void 0 ? _e : initialFilterReference), filterReference = _77[0], setFilterReference = _77[1];
+    var _78 = (0, react_1.useState)({}), filterReferenceSearch = _78[0], setFilterReferenceSearch = _78[1];
+    var _79 = (0, react_1.useState)({}), filterReferenceList = _79[0], setFilterReferenceList = _79[1];
+    var _80 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.filterReferenceDate)
         ? (0, viewStatePersistence_1.parseDateFilterState)(persistedState.filterReferenceDate)
-        : initialFilterReferenceDate), filterReferenceDate = _75[0], setFilterReferenceDate = _75[1];
-    var _76 = (0, react_1.useState)(true), tableLoading = _76[0], setTableLoading = _76[1];
-    var _77 = (0, react_1.useState)(""), cursor = _77[0], setCursor = _77[1];
-    var _78 = (0, react_1.useState)(""), lastCursor = _78[0], setLastCursor = _78[1];
-    var _79 = (0, react_1.useState)([]), tableData = _79[0], setTableData = _79[1];
-    var _80 = (0, react_1.useState)([]), spaceTableData = _80[0], setSpaceTableData = _80[1];
-    var _81 = (0, react_1.useState)(0), size = _81[0], setSize = _81[1];
-    var _82 = (0, react_1.useState)((_h = (_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _f !== void 0 ? _f : (_g = props.organise) === null || _g === void 0 ? void 0 : _g.pageIndex) !== null && _h !== void 0 ? _h : 0), pageIndex = _82[0], setPageIndex = _82[1];
-    var _83 = (0, react_1.useState)([]), selectedIds = _83[0], setSelectedIds = _83[1];
-    var _84 = (0, react_1.useState)(false), selectAll = _84[0], setSelectAll = _84[1];
-    var _85 = (0, react_1.useState)(""), deletePasscode = _85[0], setDeletePasscode = _85[1];
-    var _86 = (0, react_1.useState)(""), deletePasscodeInput = _86[0], setDeletePasscodeInput = _86[1];
-    var _87 = (0, react_1.useState)(""), deleteFeedId = _87[0], setDeleteFeedId = _87[1];
+        : initialFilterReferenceDate), filterReferenceDate = _80[0], setFilterReferenceDate = _80[1];
+    var _81 = (0, react_1.useState)(true), tableLoading = _81[0], setTableLoading = _81[1];
+    var _82 = (0, react_1.useState)(""), cursor = _82[0], setCursor = _82[1];
+    var _83 = (0, react_1.useState)(""), lastCursor = _83[0], setLastCursor = _83[1];
+    var _84 = (0, react_1.useState)([]), tableData = _84[0], setTableData = _84[1];
+    var _85 = (0, react_1.useState)([]), spaceTableData = _85[0], setSpaceTableData = _85[1];
+    var _86 = (0, react_1.useState)(0), size = _86[0], setSize = _86[1];
+    var _87 = (0, react_1.useState)((_h = (_f = persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageIndex) !== null && _f !== void 0 ? _f : (_g = props.organise) === null || _g === void 0 ? void 0 : _g.pageIndex) !== null && _h !== void 0 ? _h : 0), pageIndex = _87[0], setPageIndex = _87[1];
+    var _88 = (0, react_1.useState)([]), selectedIds = _88[0], setSelectedIds = _88[1];
+    var _89 = (0, react_1.useState)(false), selectAll = _89[0], setSelectAll = _89[1];
+    var _90 = (0, react_1.useState)(""), deletePasscode = _90[0], setDeletePasscode = _90[1];
+    var _91 = (0, react_1.useState)(""), deletePasscodeInput = _91[0], setDeletePasscodeInput = _91[1];
+    var _92 = (0, react_1.useState)(""), deleteFeedId = _92[0], setDeleteFeedId = _92[1];
     //INFO : Used by List Organise
-    var _88 = (0, react_1.useState)(false), sortModal = _88[0], setSortModal = _88[1];
-    var _89 = (0, react_1.useState)(false), filterModal = _89[0], setFilterModal = _89[1];
     // INFO: Internal sort state that overrides props.organise?.sort when
     // persistViewState is enabled and a persisted sort exists
-    var _90 = (0, react_1.useState)((_j = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _j !== void 0 ? _j : undefined), persistedSort = _90[0], setPersistedSort = _90[1];
-    var _91 = (0, react_1.useState)(false), filterDraft = _91[0], setFilterDraft = _91[1];
-    var _92 = (0, react_1.useState)(false), addTabModal = _92[0], setAddTabModal = _92[1];
-    var _93 = (0, react_1.useState)(false), overviewModal = _93[0], setOverviewModal = _93[1];
+    var _93 = (0, react_1.useState)((_j = persistedState === null || persistedState === void 0 ? void 0 : persistedState.sort) !== null && _j !== void 0 ? _j : undefined), persistedSort = _93[0], setPersistedSort = _93[1];
+    var _94 = (0, react_1.useState)(false), filterDraft = _94[0], setFilterDraft = _94[1];
+    var _95 = (0, react_1.useState)(false), addTabModal = _95[0], setAddTabModal = _95[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 _94 = (0, react_1.useState)(function () {
+    var _96 = (0, react_1.useState)(function () {
         var _a, _b;
         return (0, listModule_1.renderSelectedRefreshTab)(props.localURLEndpoint, props.type, 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 = _94[0], setSelectedTab = _94[1];
-    var _95 = (0, react_1.useState)("dayGridMonth"), calendarView = _95[0], setCalendarView = _95[1];
+    }), selectedTab = _96[0], setSelectedTab = _96[1];
+    var _97 = (0, react_1.useState)("dayGridMonth"), calendarView = _97[0], setCalendarView = _97[1];
     // INFO: bareNewDTW calendar viewSwitch mode — drives the NewCalendar variant
     // (calendarView above drives the matching range query)
-    var _96 = (0, react_1.useState)("month"), newCalendarViewMode = _96[0], setNewCalendarViewMode = _96[1];
-    var _97 = (0, react_1.useState)(new Date()), calendarTabMonth = _97[0], setCalendarTabMonth = _97[1];
-    var _98 = (0, react_1.useState)(true), kanbanDroppable = _98[0], setKanbanDroppable = _98[1];
-    var _99 = (0, react_1.useState)([]), kanbanOptions = _99[0], setKanbanOptions = _99[1];
-    var _100 = (0, react_1.useState)(false), queryForm = _100[0], setQueryForm = _100[1];
-    var _101 = (0, react_1.useState)(false), batchUpdateModal = _101[0], setBatchUpdateModal = _101[1];
-    var _102 = (0, react_1.useState)({
+    var _98 = (0, react_1.useState)("month"), newCalendarViewMode = _98[0], setNewCalendarViewMode = _98[1];
+    var _99 = (0, react_1.useState)(new Date()), calendarTabMonth = _99[0], setCalendarTabMonth = _99[1];
+    var _100 = (0, react_1.useState)(true), kanbanDroppable = _100[0], setKanbanDroppable = _100[1];
+    var _101 = (0, react_1.useState)([]), kanbanOptions = _101[0], setKanbanOptions = _101[1];
+    var _102 = (0, react_1.useState)(false), queryForm = _102[0], setQueryForm = _102[1];
+    var _103 = (0, react_1.useState)(false), batchUpdateModal = _103[0], setBatchUpdateModal = _103[1];
+    var _104 = (0, react_1.useState)({
         columnId: "",
         columnData: {},
-    }), batchUpdateData = _102[0], setBatchUpdateData = _102[1];
-    var _103 = (0, react_1.useState)(function () {
+    }), batchUpdateData = _104[0], setBatchUpdateData = _104[1];
+    var _105 = (0, react_1.useState)(function () {
         var baseModel = (props === null || props === void 0 ? void 0 : props.model) || [];
         if (!persistedState)
             return baseModel;
@@ -336,8 +336,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             });
         }
         return model;
-    }), structure = _103[0], setStructure = _103[1];
-    var _104 = (0, react_1.useState)(((_k = props === null || props === void 0 ? void 0 : props.organise) === null || _k === void 0 ? void 0 : _k.additionalQuery) || []), additionalQuery = _104[0], setAdditionalQuery = _104[1];
+    }), structure = _105[0], setStructure = _105[1];
+    var _106 = (0, react_1.useState)(((_k = props === null || props === void 0 ? void 0 : props.organise) === null || _k === void 0 ? void 0 : _k.additionalQuery) || []), additionalQuery = _106[0], setAdditionalQuery = _106[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 = [
@@ -348,105 +348,109 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             value: undefined,
         },
     ];
-    var _105 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _107 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFilters = _105[0], setFlexFilters = _105[1];
+        : defaultFlexFilterRow), flexFilters = _107[0], setFlexFilters = _107[1];
     // INFO: Debounced version of flexFilters used by renderImpSearchFilterConditions
     // to prevent API calls on every keystroke when typing in value inputs
-    var _106 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
+    var _108 = (0, react_1.useState)((persistedState === null || persistedState === void 0 ? void 0 : persistedState.flexFilters) && persistedState.flexFilters.length > 0
         ? persistedState.flexFilters
-        : defaultFlexFilterRow), flexFiltersDebounced = _106[0], setFlexFiltersDebounced = _106[1];
-    var _107 = (0, react_1.useState)({}), flexFilterReferenceOptions = _107[0], setFlexFilterReferenceOptions = _107[1];
-    var _108 = (0, react_1.useState)({}), flexFilterReferenceSearch = _108[0], setFlexFilterReferenceSearch = _108[1];
-    var _109 = (0, react_1.useState)(false), flexFilterModalOpen = _109[0], setFlexFilterModalOpen = _109[1];
-    // INFO: Columns the end user chose to hide (organise.hideColumnEnabled).
+        : defaultFlexFilterRow), flexFiltersDebounced = _108[0], setFlexFiltersDebounced = _108[1];
+    var _109 = (0, react_1.useState)({}), flexFilterReferenceOptions = _109[0], setFlexFilterReferenceOptions = _109[1];
+    var _110 = (0, react_1.useState)({}), flexFilterReferenceSearch = _110[0], setFlexFilterReferenceSearch = _110[1];
+    var _111 = (0, react_1.useState)(false), flexFilterModalOpen = _111[0], setFlexFilterModalOpen = _111[1];
+    var _112 = (0, react_1.useState)(false), viewSettingsModalOpen = _112[0], setViewSettingsModalOpen = _112[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 _110 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _l !== void 0 ? _l : []), userHiddenColumnIds = _110[0], setUserHiddenColumnIds = _110[1];
+    var _113 = (0, react_1.useState)((_l = persistedState === null || persistedState === void 0 ? void 0 : persistedState.userHiddenColumnIds) !== null && _l !== void 0 ? _l : []), userHiddenColumnIds = _113[0], setUserHiddenColumnIds = _113[1];
+    var _114 = (0, react_1.useState)(""), columnSearch = _114[0], setColumnSearch = _114[1];
+    var _115 = (0, react_1.useState)(null), draggingColumnId = _115[0], setDraggingColumnId = _115[1];
+    var columnRowRefs = (0, react_1.useRef)({});
     //INFO : Used by Auth
-    var _111 = (0, react_1.useState)({
+    var _116 = (0, react_1.useState)({
         email: "",
         google: "",
         phone: "",
         disabled: false,
         create: false,
-    }), authMethods = _111[0], setAuthMethods = _111[1];
-    var _112 = (0, react_1.useState)(""), selectedAuthMethod = _112[0], setSelectedAuthMethod = _112[1];
+    }), authMethods = _116[0], setAuthMethods = _116[1];
+    var _117 = (0, react_1.useState)(""), selectedAuthMethod = _117[0], setSelectedAuthMethod = _117[1];
     // INFO: Used by Activity Log
-    var _113 = (0, react_1.useState)(false), activityModal = _113[0], setActivityModal = _113[1];
-    var _114 = (0, react_1.useState)(""), activityId = _114[0], setActivityId = _114[1];
+    var _118 = (0, react_1.useState)(false), activityModal = _118[0], setActivityModal = _118[1];
+    var _119 = (0, react_1.useState)(""), activityId = _119[0], setActivityId = _119[1];
     //INFO : Used by Export
-    var _115 = (0, react_1.useState)(null), csvFile = _115[0], setCSVFile = _115[1];
-    var _116 = (0, react_1.useState)([]), csvFileData = _116[0], setCSVFileData = _116[1];
-    var _117 = (0, react_1.useState)(0), stepCSVIndex = _117[0], setStepCSVIndex = _117[1];
-    var _118 = (0, react_1.useState)({}), listCSVMapAttribute = _118[0], setListCSVMapAttribute = _118[1];
-    var _119 = (0, react_1.useState)({}), listCSVObjAttribute = _119[0], setListCSVObjAttribute = _119[1];
-    var _120 = (0, react_1.useState)([]), csvAPIAttribute = _120[0], setCSVAPIAttribute = _120[1];
-    var _121 = (0, react_1.useState)(((_m = props.devSettings.currentUser) === null || _m === void 0 ? void 0 : _m.userEmail) || ""), exportCSVEmail = _121[0], setExportCSVEmail = _121[1];
-    var _122 = (0, react_1.useState)(((_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.exportSettings) === null || _p === void 0 ? void 0 : _p.defaultExportPDFName) || ""), exportPDFTitle = _122[0], setExportPDFTitle = _122[1];
-    var _123 = (0, react_1.useState)(false), exportPDFLoading = _123[0], setExportPDFLoading = _123[1];
-    var _124 = (0, react_1.useState)(false), exportReadPDFLoading = _124[0], setExportReadPDFLoading = _124[1];
-    var _125 = (0, react_1.useState)((_s = (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.sumColumnId) !== null && _s !== void 0 ? _s : []), exportSumAttributeIds = _125[0], setExportSumAttributeIds = _125[1];
-    var _126 = (0, react_1.useState)((_v = (_u = (_t = props.organise) === null || _t === void 0 ? void 0 : _t.exportSettings) === null || _u === void 0 ? void 0 : _u.hideSubItems) !== null && _v !== void 0 ? _v : false), hideSubItems = _126[0], setHideSubItems = _126[1];
-    var _127 = (0, react_1.useState)([]), importTableData = _127[0], setImportTableData = _127[1];
-    var _128 = (0, react_1.useState)([]), queryList = _128[0], setQueryList = _128[1];
-    var _129 = (0, react_1.useState)(undefined), allQueryList = _129[0], setAllQueryList = _129[1];
-    var _130 = (0, react_1.useState)(-1), queryIndex = _130[0], setQueryIndex = _130[1];
-    var _131 = (0, react_1.useState)((_w = props.organise) === null || _w === void 0 ? void 0 : _w.groupBy), groupId = _131[0], setGroupId = _131[1];
-    var _132 = (0, react_1.useState)(""), readTabSection = _132[0], setReadTabSection = _132[1];
-    var _133 = (0, react_1.useState)(false), readFloatingNav = _133[0], setReadFloatingNav = _133[1];
+    var _120 = (0, react_1.useState)(null), csvFile = _120[0], setCSVFile = _120[1];
+    var _121 = (0, react_1.useState)([]), csvFileData = _121[0], setCSVFileData = _121[1];
+    var _122 = (0, react_1.useState)(0), stepCSVIndex = _122[0], setStepCSVIndex = _122[1];
+    var _123 = (0, react_1.useState)({}), listCSVMapAttribute = _123[0], setListCSVMapAttribute = _123[1];
+    var _124 = (0, react_1.useState)({}), listCSVObjAttribute = _124[0], setListCSVObjAttribute = _124[1];
+    var _125 = (0, react_1.useState)([]), csvAPIAttribute = _125[0], setCSVAPIAttribute = _125[1];
+    var _126 = (0, react_1.useState)(((_m = props.devSettings.currentUser) === null || _m === void 0 ? void 0 : _m.userEmail) || ""), exportCSVEmail = _126[0], setExportCSVEmail = _126[1];
+    var _127 = (0, react_1.useState)(((_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.exportSettings) === null || _p === void 0 ? void 0 : _p.defaultExportPDFName) || ""), exportPDFTitle = _127[0], setExportPDFTitle = _127[1];
+    var _128 = (0, react_1.useState)(false), exportPDFLoading = _128[0], setExportPDFLoading = _128[1];
+    var _129 = (0, react_1.useState)(false), exportReadPDFLoading = _129[0], setExportReadPDFLoading = _129[1];
+    var _130 = (0, react_1.useState)((_s = (_r = (_q = props.organise) === null || _q === void 0 ? void 0 : _q.exportSettings) === null || _r === void 0 ? void 0 : _r.sumColumnId) !== null && _s !== void 0 ? _s : []), exportSumAttributeIds = _130[0], setExportSumAttributeIds = _130[1];
+    var _131 = (0, react_1.useState)((_v = (_u = (_t = props.organise) === null || _t === void 0 ? void 0 : _t.exportSettings) === null || _u === void 0 ? void 0 : _u.hideSubItems) !== null && _v !== void 0 ? _v : false), hideSubItems = _131[0], setHideSubItems = _131[1];
+    var _132 = (0, react_1.useState)([]), importTableData = _132[0], setImportTableData = _132[1];
+    var _133 = (0, react_1.useState)([]), queryList = _133[0], setQueryList = _133[1];
+    var _134 = (0, react_1.useState)(undefined), allQueryList = _134[0], setAllQueryList = _134[1];
+    var _135 = (0, react_1.useState)(-1), queryIndex = _135[0], setQueryIndex = _135[1];
+    var _136 = (0, react_1.useState)((_w = props.organise) === null || _w === void 0 ? void 0 : _w.groupBy), groupId = _136[0], setGroupId = _136[1];
+    var _137 = (0, react_1.useState)(""), readTabSection = _137[0], setReadTabSection = _137[1];
+    var _138 = (0, react_1.useState)(false), readFloatingNav = _138[0], setReadFloatingNav = _138[1];
     var readTabSectionRefs = (0, react_1.useRef)({});
     //INFO : Used by Read
     //INFO : Used by Update
-    var _134 = (0, react_1.useState)(false), modalVisible = _134[0], setModalVisible = _134[1];
-    var _135 = (0, react_1.useState)(false), deleteModal = _135[0], setDeleteModal = _135[1];
-    var _136 = (0, react_1.useState)(false), excelModal = _136[0], setExcelModal = _136[1];
-    var _137 = (0, react_1.useState)(false), exportExcel = _137[0], setExportExcel = _137[1];
-    var _138 = (0, react_1.useState)(""), exportType = _138[0], setExportType = _138[1];
-    var _139 = (0, react_1.useState)(false), exportQR = _139[0], setExportQR = _139[1];
-    var _140 = (0, react_1.useState)(function () {
+    var _139 = (0, react_1.useState)(false), modalVisible = _139[0], setModalVisible = _139[1];
+    var _140 = (0, react_1.useState)(false), deleteModal = _140[0], setDeleteModal = _140[1];
+    var _141 = (0, react_1.useState)(false), excelModal = _141[0], setExcelModal = _141[1];
+    var _142 = (0, react_1.useState)(false), exportExcel = _142[0], setExportExcel = _142[1];
+    var _143 = (0, react_1.useState)(""), exportType = _143[0], setExportType = _143[1];
+    var _144 = (0, react_1.useState)(false), exportQR = _144[0], setExportQR = _144[1];
+    var _145 = (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 = _140[0], setActiveTab = _140[1];
-    var _141 = (0, react_1.useState)(false), signatureSigning = _141[0], setSignatureSigning = _141[1];
-    var _142 = (0, react_1.useState)({}), selectedData = _142[0], setSelectedData = _142[1];
-    var _143 = (0, react_1.useState)(""), selectedObjectStructureId = _143[0], setSelectedObjectStructureId = _143[1];
-    var _144 = (0, react_1.useState)(""), selectedObjectId = _144[0], setSelectedObjectId = _144[1];
-    var _145 = (0, react_1.useState)(""), selectedListAddressId = _145[0], setSelectedListAddressId = _145[1];
-    var _146 = (0, react_1.useState)(-1), selectedListAddressIndex = _146[0], setSelectedListAddressIndex = _146[1];
-    var _147 = (0, react_1.useState)({
+    }), activeTab = _145[0], setActiveTab = _145[1];
+    var _146 = (0, react_1.useState)(false), signatureSigning = _146[0], setSignatureSigning = _146[1];
+    var _147 = (0, react_1.useState)({}), selectedData = _147[0], setSelectedData = _147[1];
+    var _148 = (0, react_1.useState)(""), selectedObjectStructureId = _148[0], setSelectedObjectStructureId = _148[1];
+    var _149 = (0, react_1.useState)(""), selectedObjectId = _149[0], setSelectedObjectId = _149[1];
+    var _150 = (0, react_1.useState)(""), selectedListAddressId = _150[0], setSelectedListAddressId = _150[1];
+    var _151 = (0, react_1.useState)(-1), selectedListAddressIndex = _151[0], setSelectedListAddressIndex = _151[1];
+    var _152 = (0, react_1.useState)({
         lat: 0,
         lng: 0,
         name: "",
-    }), selectedListAddress = _147[0], setSelectedListAddress = _147[1];
-    var _148 = (0, react_1.useState)({}), selectedObjectData = _148[0], setSelectedObjectData = _148[1];
-    var _149 = (0, react_1.useState)(null), objectCellEdit = _149[0], setObjectCellEdit = _149[1];
-    var _150 = (0, react_1.useState)(false), referenceLoading = _150[0], setReferenceLoading = _150[1];
-    var _151 = (0, react_1.useState)({}), referencesOptions = _151[0], setReferencesOptions = _151[1];
-    var _152 = (0, react_1.useState)({}), referencesDetails = _152[0], setReferencesDetails = _152[1];
-    var _153 = (0, react_1.useState)({}), listReferencesOptions = _153[0], setListReferencesOptions = _153[1];
-    var _154 = (0, react_1.useState)({}), referenceDeleteTableData = _154[0], setReferenceDeleteTableData = _154[1];
-    var _155 = (0, react_1.useState)(0), referenceDeleteIndex = _155[0], setReferenceDeleteIndex = _155[1];
-    var _156 = (0, react_1.useState)({
+    }), selectedListAddress = _152[0], setSelectedListAddress = _152[1];
+    var _153 = (0, react_1.useState)({}), selectedObjectData = _153[0], setSelectedObjectData = _153[1];
+    var _154 = (0, react_1.useState)(null), objectCellEdit = _154[0], setObjectCellEdit = _154[1];
+    var _155 = (0, react_1.useState)(false), referenceLoading = _155[0], setReferenceLoading = _155[1];
+    var _156 = (0, react_1.useState)({}), referencesOptions = _156[0], setReferencesOptions = _156[1];
+    var _157 = (0, react_1.useState)({}), referencesDetails = _157[0], setReferencesDetails = _157[1];
+    var _158 = (0, react_1.useState)({}), listReferencesOptions = _158[0], setListReferencesOptions = _158[1];
+    var _159 = (0, react_1.useState)({}), referenceDeleteTableData = _159[0], setReferenceDeleteTableData = _159[1];
+    var _160 = (0, react_1.useState)(0), referenceDeleteIndex = _160[0], setReferenceDeleteIndex = _160[1];
+    var _161 = (0, react_1.useState)({
         id: "",
         name: "",
         type: "string",
-    }), referenceCreationModal = _156[0], setReferenceCreationModal = _156[1];
-    var _157 = (0, react_1.useState)({}), referenceModelSchema = _157[0], setReferenceSchema = _157[1];
-    var _158 = (0, react_1.useState)([]), kanbanChecked = _158[0], setKanbanChecked = _158[1];
+    }), referenceCreationModal = _161[0], setReferenceCreationModal = _161[1];
+    var _162 = (0, react_1.useState)({}), referenceModelSchema = _162[0], setReferenceSchema = _162[1];
+    var _163 = (0, react_1.useState)([]), kanbanChecked = _163[0], setKanbanChecked = _163[1];
     //INFO : Offline
-    var _159 = (0, react_1.useState)(0), offlineDataLength = _159[0], setOfflineDataLength = _159[1];
-    var _160 = (0, react_1.useState)(false), offlineModal = _160[0], setOfflineModal = _160[1];
+    var _164 = (0, react_1.useState)(0), offlineDataLength = _164[0], setOfflineDataLength = _164[1];
+    var _165 = (0, react_1.useState)(false), offlineModal = _165[0], setOfflineModal = _165[1];
     // INFO: live-stream state — driven by socket connection and navigator.onLine
-    var _161 = (0, react_1.useState)(false), isLive = _161[0], setIsLive = _161[1];
-    var _162 = (0, react_1.useState)(false), isLiveOffline = _162[0], setIsLiveOffline = _162[1];
+    var _166 = (0, react_1.useState)(false), isLive = _166[0], setIsLive = _166[1];
+    var _167 = (0, react_1.useState)(false), isLiveOffline = _167[0], setIsLiveOffline = _167[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 _163 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _163[0], setIsNetworkOffline = _163[1];
+    var _168 = (0, react_1.useState)(typeof navigator !== "undefined" ? !navigator.onLine : false), isNetworkOffline = _168[0], setIsNetworkOffline = _168[1];
     var previousType = (0, react_1.useRef)(null);
     var previousSelectedData = (0, react_1.useRef)(null);
     var scrollSentinelRef = (0, react_1.useRef)(null);
@@ -531,42 +535,54 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     var isFirebase = isFirebaseClient || devSettings.server === "fbServer";
     var dbModule = isFirebaseClient ? (_z = props.lib) === null || _z === void 0 ? void 0 : _z.firebase : (_0 = props.lib) === null || _0 === void 0 ? void 0 : _0.axios;
     var schemaPresent = props.devSettings.schemaEndpoint ? true : false;
-    var limit = props.limit ? props.limit : 10;
-    var activeSortId = (isPersistEnabled && persistedSort) || ((_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.sort);
+    // INFO: the view settings panel (columns, sort, rows per page) is standard on
+    // the new DTW; bareViewSettings stays the opt-in for legacy and bare DTWs
+    var isViewSettingsEnabled = ((_1 = props.bareSettings) === null || _1 === void 0 ? void 0 : _1.bareViewSettings) || ((_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareNewDTW)
+        ? true
+        : false;
+    // INFO: a consumer that wires onChangeHide owns the hide at schema level
+    // (Space, Sun Luan) — toggling writes to the model and calls back. Without it
+    // the hide is this user's own and lives in userHiddenColumnIds.
+    var isSchemaHideMode = ((_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.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 _169 = (0, react_1.useState)((_5 = (_4 = (isPersistEnabled ? persistedState === null || persistedState === void 0 ? void 0 : persistedState.pageLimit : undefined)) !== null && _4 !== void 0 ? _4 : props.limit) !== null && _5 !== void 0 ? _5 : 10), pageLimit = _169[0], setPageLimit = _169[1];
+    var limit = pageLimit;
+    var activeSortId = (isPersistEnabled && persistedSort) || ((_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.sort);
     var handleSortColumn = function (value) {
         var _a, _b;
         if (isPersistEnabled)
             setPersistedSort(value);
         (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeSort) === null || _b === void 0 ? void 0 : _b.call(_a, value);
     };
-    var isEditor = ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.allEditable) ? true : false;
-    var isOffline = (_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareOffline;
+    var isEditor = ((_7 = props.edit) === null || _7 === void 0 ? void 0 : _7.allEditable) ? true : false;
+    var isOffline = (_8 = props.bareSettings) === null || _8 === void 0 ? void 0 : _8.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 && ((_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareOfflineNetworkListener);
-    var showId = (_5 = props.space) === null || _5 === void 0 ? void 0 : _5.showId;
+    var isOfflineNetworkListener = isOffline && ((_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareOfflineNetworkListener);
+    var showId = (_10 = props.space) === null || _10 === void 0 ? void 0 : _10.showId;
     var remainId = showId || selectedObjectStructureId ? true : false;
-    var idField = ((_6 = props.space) === null || _6 === void 0 ? void 0 : _6.idField) || ((_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.idField);
-    var pipeline = (_8 = props === null || props === void 0 ? void 0 : props.space) === null || _8 === void 0 ? void 0 : _8.pipeline;
-    if ((_9 = props.bareSettings) === null || _9 === void 0 ? void 0 : _9.bareListPipeline) {
+    var idField = ((_11 = props.space) === null || _11 === void 0 ? void 0 : _11.idField) || ((_12 = props.organise) === null || _12 === void 0 ? void 0 : _12.idField);
+    var pipeline = (_13 = props === null || props === void 0 ? void 0 : props.space) === null || _13 === void 0 ? void 0 : _13.pipeline;
+    if ((_14 = props.bareSettings) === null || _14 === void 0 ? void 0 : _14.bareListPipeline) {
         pipeline = pipeline
             ? __spreadArray(__spreadArray([], pipeline, true), props.bareSettings.bareListPipeline, true) : props.bareSettings.bareListPipeline;
     }
-    var hasNavigation = ((_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.handleNavigate) ? true : false;
+    var hasNavigation = ((_15 = props.organise) === null || _15 === void 0 ? void 0 : _15.handleNavigate) ? true : false;
     var formColumn = "grid-cols-12";
-    var useMobileView = (_12 = (_11 = props.bareSettings) === null || _11 === void 0 ? void 0 : _11.bareUpdateMobileView) !== null && _12 !== void 0 ? _12 : false;
+    var useMobileView = (_17 = (_16 = props.bareSettings) === null || _16 === void 0 ? void 0 : _16.bareUpdateMobileView) !== null && _17 !== void 0 ? _17 : false;
     var gridGap = useMobileView ? "gap-x-6 gap-y-2 md:gap-y-6" : "gap-6";
-    var isActivityLog = (((_14 = (_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.activityLog) === null || _14 === void 0 ? void 0 : _14.enableComments) &&
-        ((_15 = props.edit) === null || _15 === void 0 ? void 0 : _15.activityLog.commentCollectionId)) ||
-        (((_17 = (_16 = props.edit) === null || _16 === void 0 ? void 0 : _16.activityLog) === null || _17 === void 0 ? void 0 : _17.enableLogs) &&
-            ((_18 = props.edit) === null || _18 === void 0 ? void 0 : _18.activityLog.logsCollectionId));
-    var customPaginationSize = ((_19 = props.organise) === null || _19 === void 0 ? void 0 : _19.customPaginationCount)
+    var isActivityLog = (((_19 = (_18 = props.edit) === null || _18 === void 0 ? void 0 : _18.activityLog) === null || _19 === void 0 ? void 0 : _19.enableComments) &&
+        ((_20 = props.edit) === null || _20 === void 0 ? void 0 : _20.activityLog.commentCollectionId)) ||
+        (((_22 = (_21 = props.edit) === null || _21 === void 0 ? void 0 : _21.activityLog) === null || _22 === void 0 ? void 0 : _22.enableLogs) &&
+            ((_23 = props.edit) === null || _23 === void 0 ? void 0 : _23.activityLog.logsCollectionId));
+    var customPaginationSize = ((_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.customPaginationCount)
         ? props.organise.customPaginationCount(size)
         : undefined;
     //TODO : Code - Pass ...devSettings, search dbEndpoint:
     var writeServerQuery = new writeQuery_1.WriteQuery({
-        dbModule: (_20 = props.lib) === null || _20 === void 0 ? void 0 : _20.axios,
+        dbModule: (_25 = props.lib) === null || _25 === void 0 ? void 0 : _25.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -574,7 +590,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var readServerQuery = new readQuery_1.ReadQuery({
-        dbModule: (_21 = props.lib) === null || _21 === void 0 ? void 0 : _21.axios,
+        dbModule: (_26 = props.lib) === null || _26 === void 0 ? void 0 : _26.axios,
         dbType: devSettings.server,
         dbCollection: props.collectionId,
         dbEndpoint: devSettings.dbEndpoint,
@@ -582,9 +598,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         dbUserToken: devSettings.dbUserToken,
     });
     var moreButtonPopUp = [
-        ((_22 = props.edit) === null || _22 === void 0 ? void 0 : _22.allEditable) &&
+        ((_27 = props.edit) === null || _27 === void 0 ? void 0 : _27.allEditable) &&
             !isFirebase &&
-            !((_24 = (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.exportSettings) === null || _24 === void 0 ? void 0 : _24.hideImportCSV)
+            !((_29 = (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.exportSettings) === null || _29 === void 0 ? void 0 : _29.hideImportCSV)
             ? {
                 text: "Import Excel",
                 onClick: function () {
@@ -593,7 +609,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_26 = (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.exportSettings) === null || _26 === void 0 ? void 0 : _26.hideExportCSV)
+        !((_31 = (_30 = props.organise) === null || _30 === void 0 ? void 0 : _30.exportSettings) === null || _31 === void 0 ? void 0 : _31.hideExportCSV)
             ? {
                 text: "Export CSV",
                 onClick: function () {
@@ -603,7 +619,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_28 = (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.exportSettings) === null || _28 === void 0 ? void 0 : _28.hideExportExcel)
+        !((_33 = (_32 = props.organise) === null || _32 === void 0 ? void 0 : _32.exportSettings) === null || _33 === void 0 ? void 0 : _33.hideExportExcel)
             ? {
                 text: "Export Excel",
                 onClick: function () {
@@ -613,7 +629,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_30 = (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.exportSettings) === null || _30 === void 0 ? void 0 : _30.hideExportPDF)
+        !((_35 = (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.exportSettings) === null || _35 === void 0 ? void 0 : _35.hideExportPDF)
             ? {
                 text: "Export PDF",
                 onClick: function () {
@@ -623,7 +639,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_32 = (_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.exportSettings) === null || _32 === void 0 ? void 0 : _32.hideExportQR)
+        !((_37 = (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.exportSettings) === null || _37 === void 0 ? void 0 : _37.hideExportQR)
             ? {
                 text: "Export QR",
                 onClick: function () {
@@ -633,7 +649,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_34 = (_33 = props.organise) === null || _33 === void 0 ? void 0 : _33.exportSettings) === null || _34 === void 0 ? void 0 : _34.hideExportQR)
+        !((_39 = (_38 = props.organise) === null || _38 === void 0 ? void 0 : _38.exportSettings) === null || _39 === void 0 ? void 0 : _39.hideExportQR)
             ? {
                 text: "Export QR(Data)",
                 onClick: function () {
@@ -643,7 +659,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_36 = (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.exportSettings) === null || _36 === void 0 ? void 0 : _36.hideExportPrint)
+        !((_41 = (_40 = props.organise) === null || _40 === void 0 ? void 0 : _40.exportSettings) === null || _41 === void 0 ? void 0 : _41.hideExportPrint)
             ? {
                 text: "Print",
                 onClick: function () {
@@ -653,7 +669,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 },
             }
             : null,
-        !((_38 = (_37 = props.organise) === null || _37 === void 0 ? void 0 : _37.exportSettings) === null || _38 === void 0 ? void 0 : _38.hideExportDraft)
+        !((_43 = (_42 = props.organise) === null || _42 === void 0 ? void 0 : _42.exportSettings) === null || _43 === void 0 ? void 0 : _43.hideExportDraft)
             ? {
                 text: filterDraft ? "Show All Items" : "Filter Draft",
                 onClick: function () {
@@ -662,12 +678,22 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }
             : null,
     ].filter(Boolean);
-    if ((_39 = props.organise) === null || _39 === void 0 ? void 0 : _39.moreSettings)
+    if ((_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.moreSettings)
         moreButtonPopUp = moreButtonPopUp.concat(props.organise.moreSettings);
     //=====================================================================================
     //SECTION: User Column Visibility Handlers
     //=====================================================================================
     var handleToggleUserHiddenColumn = function (columnId) {
+        var _a;
+        if ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeHide) {
+            var updatedModel = structure.map(function (eachColumn) {
+                return eachColumn.id === columnId
+                    ? __assign(__assign({}, eachColumn), { hide: !eachColumn.hide }) : eachColumn;
+            });
+            setStructure(updatedModel);
+            props.organise.onChangeHide(updatedModel);
+            return;
+        }
         setUserHiddenColumnIds(function (prevIds) {
             return prevIds.includes(columnId)
                 ? prevIds.filter(function (eachId) { return eachId !== columnId; })
@@ -675,8 +701,55 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         });
     };
     var handleShowAllUserHiddenColumns = function () {
+        var _a;
+        if ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeHide) {
+            var updatedModel = structure.map(function (eachColumn) { return (__assign(__assign({}, eachColumn), { hide: false })); });
+            setStructure(updatedModel);
+            props.organise.onChangeHide(updatedModel);
+            return;
+        }
         setUserHiddenColumnIds([]);
     };
+    // INFO: reorder from the view settings panel — the same move the old header
+    // drag made, so consumers keep persisting through onChangeDrag
+    var handleReorderColumn = function (dragId, dropId) {
+        var _a, _b;
+        if (dragId === dropId)
+            return;
+        var dragIndex = structure.findIndex(function (eachCol) { return eachCol.id === dragId; });
+        var dropIndex = structure.findIndex(function (eachCol) { return eachCol.id === dropId; });
+        if (dragIndex < 0 || dropIndex < 0)
+            return;
+        var updatedModel = __spreadArray([], structure, true);
+        var moved = updatedModel.splice(dragIndex, 1)[0];
+        updatedModel.splice(dropIndex, 0, moved);
+        setStructure(updatedModel);
+        (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeDrag) === null || _b === void 0 ? void 0 : _b.call(_a, dragId, dropId, updatedModel.map(function (eachCol) { return ({
+            key: eachCol.id,
+            title: eachCol.name,
+        }); }));
+    };
+    // INFO: pointer based so the handle works with both a mouse and a finger —
+    // the row under the pointer becomes the drop target as it moves
+    var handleColumnDragMove = function (event) {
+        if (!draggingColumnId)
+            return;
+        var pointerY = event.clientY;
+        var hovered = Object.entries(columnRowRefs.current).find(function (_a) {
+            var eachId = _a[0], eachElement = _a[1];
+            if (!eachElement || eachId === draggingColumnId)
+                return false;
+            var bounds = eachElement.getBoundingClientRect();
+            return pointerY >= bounds.top && pointerY <= bounds.bottom;
+        });
+        if (hovered)
+            handleReorderColumn(draggingColumnId, hovered[0]);
+    };
+    var handleChangePageLimit = function (nextLimit) {
+        setPageLimit(nextLimit);
+        // INFO: the current page index is meaningless against a new page size
+        setPageIndex(0);
+    };
     //=====================================================================================
     //SECTION: Flex Filter Handlers
     //=====================================================================================
@@ -864,7 +937,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             pageIndex: renderCheckScrollMode() ? 0 : pageIndex,
             hiddenColumnIds: structure.filter(function (col) { return col.hide; }).map(function (col) { return col.id; }),
             // INFO: stored raw rather than through getActiveUserHiddenColumnIds so a
-            // consumer temporarily switching hideColumnEnabled off does not wipe the
+            // consumer temporarily switching bareViewSettings off does not wipe the
             // user's saved choice.
             userHiddenColumnIds: userHiddenColumnIds,
             columnOrder: structure.map(function (col) { return col.id; }),
@@ -891,7 +964,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     (0, react_1.useEffect)(function () {
         handleOfflinePrefetch();
         /* eslint-disable */
-    }, [props.collectionId, (_40 = props.bareSettings) === null || _40 === void 0 ? void 0 : _40.bareOffline]);
+    }, [props.collectionId, (_45 = props.bareSettings) === null || _45 === void 0 ? void 0 : _45.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
@@ -911,7 +984,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         }, interval);
         return function () { return clearInterval(timer); };
         /* eslint-disable */
-    }, [(_41 = props.bareSettings) === null || _41 === void 0 ? void 0 : _41.barePollingInterval, isLive, isNetworkOffline]);
+    }, [(_46 = props.bareSettings) === null || _46 === void 0 ? void 0 : _46.barePollingInterval, isLive, isNetworkOffline]);
     /* eslint-enable */
     // INFO: Pub/Sub → SSE live-stream — driven by bareSettings.bareSocketName
     // EventSource URL: {sseEndpoint}/{room}?bm_apiToken={token}
@@ -953,7 +1026,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         };
         /* eslint-disable */
     }, [
-        (_42 = props.bareSettings) === null || _42 === void 0 ? void 0 : _42.bareSocketName,
+        (_47 = props.bareSettings) === null || _47 === void 0 ? void 0 : _47.bareSocketName,
         props.collectionId,
         props.devSettings.sseEndpoint,
         props.devSettings.dbAPIToken,
@@ -1192,10 +1265,10 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         props.collectionId,
         props.model,
         props.localURLEndpoint,
-        (_43 = props.organise) === null || _43 === void 0 ? void 0 : _43.extendedTabs,
-        (_44 = props.organise) === null || _44 === void 0 ? void 0 : _44.viewId,
-        (_45 = props.organise) === null || _45 === void 0 ? void 0 : _45.additionalQuery,
-        (_46 = props.organise) === null || _46 === void 0 ? void 0 : _46.groupBy,
+        (_48 = props.organise) === null || _48 === void 0 ? void 0 : _48.extendedTabs,
+        (_49 = props.organise) === null || _49 === void 0 ? void 0 : _49.viewId,
+        (_50 = props.organise) === null || _50 === void 0 ? void 0 : _50.additionalQuery,
+        (_51 = props.organise) === null || _51 === void 0 ? void 0 : _51.groupBy,
         props.type,
     ]);
     (0, react_1.useEffect)(function () {
@@ -1285,7 +1358,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             };
         }, 100);
         return function () { return clearTimeout(timeoutId); };
-    }, [(_47 = props.organise) === null || _47 === void 0 ? void 0 : _47.showReadFloatingNav, props.type, props.id, loading]);
+    }, [(_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.showReadFloatingNav, props.type, props.id, loading]);
     (0, react_1.useEffect)(function () {
         if (props.type !== "read")
             return;
@@ -5909,18 +5982,9 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     //=====================================================================================
     var handlePopUpModal = function (modalVisible, type) {
         switch (type) {
-            case "sort":
-                setSortModal(modalVisible);
-                break;
-            case "filter":
-                setFilterModal(modalVisible);
-                break;
             case "offline":
                 setOfflineModal(modalVisible);
                 break;
-            case "overview":
-                setOverviewModal(modalVisible);
-                break;
             case "blixify_new_tab":
                 setAddTabModal(modalVisible);
                 break;
@@ -5941,9 +6005,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             setSelectedObjectData({});
             setStepCSVIndex(0);
             setCSVFile(null);
-            setSortModal(false);
-            setFilterModal(false);
-            setOverviewModal(false);
             setAddTabModal(false);
             setCSVFileData([]);
             setListCSVMapAttribute({});
@@ -6018,12 +6079,12 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     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, { containerClassName: selectedObjectModel ? "ml-2" : "ml-2 col-span-2", label: "", options: filterOptions_1, value: clonedListValue[index], onChange: function (value) {
+                            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, { containerClassName: "ml-4", label: "", options: (0, readModule_1.renderObjectOptions)(selectedObjectModel.objectData), value: listCSVObjAttribute[index], onChange: function (value) {
+                            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);
@@ -6084,17 +6145,17 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     //=====================================================================================
     //SECTION: Render CRUD
     //=====================================================================================
-    // INFO: columns the end user is allowed to toggle via organise.hideColumnEnabled.
+    // INFO: columns the end user is allowed to toggle via bareSettings.bareViewSettings.
     // Developer-hidden columns (DataStructure.hide) are excluded on purpose —
     // a developer hiding a column is not a preference the user may override — as
     // are the id fields and anything that never becomes a column anyway.
-    var getTogglableColumns = function () {
+    var getTogglableColumns = function (includeSchemaHidden) {
         return structure.filter(function (eachAttribute) {
             var _a;
             if (eachAttribute.id === "_id" ||
                 eachAttribute.id === "id" ||
                 eachAttribute.id === "baseDraft" ||
-                eachAttribute.hide ||
+                (!includeSchemaHidden && eachAttribute.hide) ||
                 utils_1.NON_TABLE_COLUMN_DATA_TYPES.includes(eachAttribute.type)) {
                 return false;
             }
@@ -6108,41 +6169,98 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     // INFO: user hides are only honoured while the feature is switched on, so
     // turning the prop off restores every column without clearing stored state.
     var getActiveUserHiddenColumnIds = function () {
-        var _a;
-        if (schemaPresent || !((_a = props.organise) === null || _a === void 0 ? void 0 : _a.hideColumnEnabled))
+        if (!isViewSettingsEnabled || isSchemaHideMode)
             return [];
         return userHiddenColumnIds;
     };
-    // INFO: counted off the togglable list rather than the raw array so ids left
-    // over from an older schema can never inflate the badge.
-    var getUserHiddenColumnCount = function () {
-        var activeUserHiddenColumnIds = getActiveUserHiddenColumnIds();
-        return getTogglableColumns().filter(function (eachColumn) {
-            return activeUserHiddenColumnIds.includes(eachColumn.id);
-        }).length;
+    // 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); };
+    var getIsColumnHidden = function (column) {
+        return isSchemaHideMode
+            ? !!column.hide
+            : getActiveUserHiddenColumnIds().includes(column.id);
     };
-    var renderHideColumnPopupContent = function () {
-        var activeUserHiddenColumnIds = getActiveUserHiddenColumnIds();
-        var togglableColumns = getTogglableColumns();
-        var visibleCount = togglableColumns.filter(function (eachColumn) { return !activeUserHiddenColumnIds.includes(eachColumn.id); }).length;
-        return (react_1.default.createElement("div", { className: "shadow-lg bg-white rounded-md p-4 flex flex-col w-[calc(100vw-2rem)] max-w-[280px]" },
-            react_1.default.createElement("div", { className: "flex flex-row items-center" },
-                react_1.default.createElement("p", { className: "text-sm font-medium text-gray-700" }, "Columns"),
-                react_1.default.createElement("div", { className: "grow" }),
-                activeUserHiddenColumnIds.length > 0 && (react_1.default.createElement(textButton_1.TextButton, { text: "Show all", onClick: handleShowAllUserHiddenColumns }))),
-            react_1.default.createElement("div", { className: "flex flex-col mt-2 overflow-y-auto max-h-72" }, togglableColumns.map(function (eachColumn) {
-                var isHidden = activeUserHiddenColumnIds.includes(eachColumn.id);
-                // INFO: an empty table header breaks both table renderers, so the
-                // last visible column stays locked until another one is shown.
-                var isLocked = !isHidden && visibleCount <= 1;
-                return (react_1.default.createElement("button", { key: eachColumn.id, type: "button", disabled: isLocked, "aria-pressed": !isHidden, "data-testid": "dtw-hide-column-".concat(eachColumn.id), className: "flex flex-row items-center py-2 text-sm text-left ".concat(isLocked
+    var renderViewSettingsContent = function () {
+        var _a, _b, _c, _d, _e;
+        var viewColumns = getViewSettingsColumns();
+        var hiddenCount = viewColumns.filter(getIsColumnHidden).length;
+        var visibleCount = viewColumns.length - hiddenCount;
+        var searchedColumns = columnSearch
+            ? viewColumns.filter(function (eachColumn) {
+                var _a;
+                return ((_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id)
+                    .toLowerCase()
+                    .includes(columnSearch.toLowerCase());
+            })
+            : viewColumns;
+        var darkMode = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode;
+        var labelColor = darkMode ? "text-gray-200" : "text-gray-700";
+        var dividerColor = darkMode ? "border-gray-700" : "border-gray-200";
+        var renderColumnRow = function (eachColumn) {
+            var isHidden = getIsColumnHidden(eachColumn);
+            // INFO: an empty table header breaks both table renderers, so the last
+            // visible column stays locked until another one is shown.
+            var isLocked = !isHidden && visibleCount <= 1;
+            var isDragging = draggingColumnId === eachColumn.id;
+            return (react_1.default.createElement("div", { key: eachColumn.id, ref: function (el) {
+                    columnRowRefs.current[eachColumn.id] = el;
+                }, className: "flex flex-row items-center gap-x-2 py-2 ".concat(isDragging ? "opacity-50" : "") },
+                react_1.default.createElement(outline_1.Bars3Icon, { "data-testid": "dtw-column-drag-".concat(eachColumn.id), className: "h-4 w-4 shrink-0 cursor-grab touch-none ".concat(darkMode ? "text-gray-500" : "text-gray-400"), onPointerDown: function (event) {
+                        var _a, _b;
+                        event.preventDefault();
+                        (_b = (_a = event.target).setPointerCapture) === null || _b === void 0 ? void 0 : _b.call(_a, event.pointerId);
+                        setDraggingColumnId(eachColumn.id);
+                    }, onPointerMove: handleColumnDragMove, onPointerUp: function () { return setDraggingColumnId(null); }, onPointerCancel: function () { return setDraggingColumnId(null); } }),
+                react_1.default.createElement("button", { type: "button", disabled: isLocked, "aria-pressed": !isHidden, "data-testid": "dtw-hide-column-".concat(eachColumn.id), className: "flex grow flex-row items-center text-sm text-left ".concat(isLocked
                         ? "opacity-50 cursor-not-allowed"
                         : "cursor-pointer hover:text-primary-600"), onClick: function () {
                         handleToggleUserHiddenColumn(eachColumn.id);
                     } },
-                    react_1.default.createElement("span", { className: "pr-3 truncate grow" }, eachColumn.name),
-                    isHidden ? (react_1.default.createElement(outline_1.EyeSlashIcon, { className: "w-4 h-4 text-gray-400 shrink-0" })) : (react_1.default.createElement(outline_1.EyeIcon, { className: "w-4 h-4 text-primary-600 shrink-0" }))));
-            }))));
+                    react_1.default.createElement("span", { className: "pr-3 truncate grow ".concat(labelColor) }, eachColumn.name),
+                    isHidden ? (react_1.default.createElement(outline_1.EyeSlashIcon, { className: "w-4 h-4 text-gray-400 shrink-0" })) : (react_1.default.createElement(outline_1.EyeIcon, { className: "w-4 h-4 text-primary-600 shrink-0" })))));
+        };
+        return (react_1.default.createElement("div", { "data-testid": "dtw-view-settings", className: "flex flex-col" },
+            react_1.default.createElement("div", { className: "flex flex-row items-center" },
+                react_1.default.createElement("p", { className: "text-sm font-medium ".concat(labelColor) }, "Columns"),
+                react_1.default.createElement("div", { className: "grow" }),
+                hiddenCount > 0 && (react_1.default.createElement(textButton_1.TextButton, { text: "Show all", onClick: handleShowAllUserHiddenColumns }))),
+            react_1.default.createElement(textInput_1.TextInput, { id: "dtw-column-search", label: "", type: "text", containerClassName: "mt-2", value: columnSearch, placeholder: "Search columns", darkMode: darkMode, onChange: function (e) { return setColumnSearch(e.target.value); } }),
+            react_1.default.createElement(scrollShadow_1.ScrollShadow, { axis: "y", className: "mt-1 max-h-56 overflow-y-auto", darkMode: darkMode },
+                react_1.default.createElement("div", { className: "flex flex-col", onPointerMove: handleColumnDragMove, onPointerUp: function () { return setDraggingColumnId(null); } }, searchedColumns.length > 0 ? (searchedColumns.map(renderColumnRow)) : (react_1.default.createElement("p", { className: "py-3 text-sm text-gray-400" }, "No columns found")))),
+            react_1.default.createElement("div", { className: "mt-3 border-t pt-3 ".concat(dividerColor) },
+                react_1.default.createElement("p", { className: "text-sm font-medium ".concat(labelColor) }, "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) {
+                                var _a;
+                                return ({
+                                    key: eachColumn.id,
+                                    label: (_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id,
+                                });
+                            }), onChange: function (value) {
+                                var _a;
+                                return handleSortColumn({
+                                    sortId: value,
+                                    type: (_a = activeSortId === null || activeSortId === void 0 ? void 0 : activeSortId.type) !== null && _a !== void 0 ? _a : "desc",
+                                });
+                            } })),
+                    react_1.default.createElement("div", { className: "w-28 shrink-0" },
+                        react_1.default.createElement(select_1.Select, { id: "dtw-view-sort-type", portalDropdown: true, label: "", containerClassName: "", value: (_d = activeSortId === null || activeSortId === void 0 ? void 0 : activeSortId.type) !== null && _d !== void 0 ? _d : "desc", darkMode: (_e = props.organise) === null || _e === void 0 ? void 0 : _e.darkMode, options: [
+                                { key: "asc", label: "Asc" },
+                                { key: "desc", label: "Desc" },
+                            ], onChange: function (value) {
+                                var _a;
+                                return handleSortColumn({
+                                    sortId: (_a = activeSortId === null || activeSortId === void 0 ? void 0 : activeSortId.sortId) !== null && _a !== void 0 ? _a : "",
+                                    type: value,
+                                });
+                            } })))),
+            react_1.default.createElement("div", { className: "mt-3 border-t pt-3 ".concat(dividerColor) },
+                react_1.default.createElement("p", { className: "text-sm font-medium ".concat(labelColor) }, "Rows per page"),
+                react_1.default.createElement("div", { className: "mt-2 flex flex-row flex-wrap gap-2" }, PAGE_LIMIT_OPTIONS.map(function (eachOption) { return (react_1.default.createElement("button", { key: eachOption, type: "button", "data-testid": "dtw-page-limit-".concat(eachOption), className: "rounded-md border px-3 py-1 text-sm ".concat(pageLimit === eachOption
+                        ? "border-primary-500 text-primary-600"
+                        : "".concat(dividerColor, " ").concat(labelColor)), onClick: function () { return handleChangePageLimit(eachOption); } }, eachOption)); })))));
     };
     var renderTableHeader = function () {
         var _a, _b;
@@ -7165,7 +7283,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     var filterElementList = [];
                     if (!((_f = props.organise) === null || _f === void 0 ? void 0 : _f.filterComponentNewRow)) {
                         if ((_g = props.organise) === null || _g === void 0 ? void 0 : _g.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_o = (_k = (_j = (_h = props === null || props === void 0 ? void 0 : props.organise) === null || _h === void 0 ? void 0 : _h.renderGroupByOptions) === null || _j === void 0 ? void 0 : _j.call(_h)) !== null && _k !== void 0 ? _k : (_m = (_l = props === null || props === void 0 ? void 0 : props.organise) === null || _l === void 0 ? void 0 : _l.renderReferenceLabelOptions) === null || _m === void 0 ? void 0 : _m.call(_l, props.collectionId, true)) !== null && _o !== void 0 ? _o : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Group", options: (_o = (_k = (_j = (_h = props === null || props === void 0 ? void 0 : props.organise) === null || _h === void 0 ? void 0 : _h.renderGroupByOptions) === null || _j === void 0 ? void 0 : _j.call(_h)) !== null && _k !== void 0 ? _k : (_m = (_l = props === null || props === void 0 ? void 0 : props.organise) === null || _l === void 0 ? void 0 : _l.renderReferenceLabelOptions) === null || _m === void 0 ? void 0 : _m.call(_l, props.collectionId, true)) !== null && _o !== void 0 ? _o : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -7180,53 +7298,67 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return null;
                 };
                 var renderListActionElements = function () {
-                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+                    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;
                     var actionElementList = [];
+                    // INFO: sort, Slice Data and Model Overview all moved into the view
+                    // settings panel and the flex filters, so the Space row keeps only
+                    // refresh here
                     if (schemaPresent) {
-                        actionElementList.push(react_1.default.createElement(react_1.default.Fragment, null,
-                            react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(solid_1.ArrowsUpDownIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "bg-white/10" : "bg-white", onClick: function () {
-                                    handlePopUpModal(true, "sort");
-                                } }),
-                            react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), onClick: function () {
-                                    handlePopUpModal(true, "filter");
-                                }, bgColor: ((_b = props.organise) === null || _b === void 0 ? void 0 : _b.darkMode) ? "bg-white/10" : "bg-white" }),
-                            react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.AdjustmentsHorizontalIcon, { className: "h-7 w-7 text-primary-500" }), onClick: function () {
-                                    handlePopUpModal(true, "overview");
-                                }, bgColor: ((_c = props.organise) === null || _c === void 0 ? void 0 : _c.darkMode) ? "bg-white/10" : "bg-white" }),
-                            react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.ArrowPathIcon, { className: "h-7 w-7 text-primary-500" }), onClick: function () {
-                                    // INFO - When Refresh Don't Clear Filter
-                                    handleRefresh();
-                                }, bgColor: ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.darkMode) ? "bg-white/10" : "bg-white" })));
+                        actionElementList.push(react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.ArrowPathIcon, { className: "h-7 w-7 text-primary-500" }), onClick: function () {
+                                // INFO - When Refresh Don't Clear Filter
+                                handleRefresh();
+                            }, bgColor: ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode) ? "bg-white/10" : "bg-white" }));
                     }
-                    if ((((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareListFilterAsPopup) ||
-                        ((_f = props.bareSettings) === null || _f === void 0 ? void 0 : _f.bareCompactMode)) &&
-                        !((_g = props.bareSettings) === null || _g === void 0 ? void 0 : _g.bareFlexFilters) &&
+                    if ((((_b = props.bareSettings) === null || _b === void 0 ? void 0 : _b.bareListFilterAsPopup) ||
+                        ((_c = props.bareSettings) === null || _c === void 0 ? void 0 : _c.bareCompactMode)) &&
+                        !((_d = props.bareSettings) === null || _d === void 0 ? void 0 : _d.bareFlexFilters) &&
                         filterComponent_1 &&
                         Array.isArray(filterComponent_1) &&
                         filterComponent_1.length > 0) {
                         // INFO: in compact mode, the search input is rendered inline by
                         // renderListFilterElements, so drop the trailing search element
                         // from the popup to avoid duplication.
-                        var popupFilters = ((_h = props.bareSettings) === null || _h === void 0 ? void 0 : _h.bareCompactMode) && !((_j = props.organise) === null || _j === void 0 ? void 0 : _j.hideSearch)
+                        var popupFilters = ((_e = props.bareSettings) === null || _e === void 0 ? void 0 : _e.bareCompactMode) && !((_f = props.organise) === null || _f === void 0 ? void 0 : _f.hideSearch)
                             ? filterComponent_1.slice(0, -1)
                             : filterComponent_1;
                         if (popupFilters.length > 0) {
-                            actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { darkMode: (_k = props.organise) === null || _k === void 0 ? void 0 : _k.darkMode, ctaComp: react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_l = props.organise) === null || _l === void 0 ? void 0 : _l.darkMode) ? "bg-white/10" : "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg p-4 flex flex-col space-y-3 w-[calc(100vw-2rem)] max-w-[320px]" }, popupFilters.map(function (filterEl, index) { return (react_1.default.createElement("div", { key: index }, filterEl)); })), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_m = props === null || props === void 0 ? void 0 : props.lib) === null || _m === void 0 ? void 0 : _m.Transition } }));
+                            actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { darkMode: (_g = props.organise) === null || _g === void 0 ? void 0 : _g.darkMode, ctaComp: react_1.default.createElement(iconButton_1.IconButton, { icon: react_1.default.createElement(outline_1.FunnelIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_h = props.organise) === null || _h === void 0 ? void 0 : _h.darkMode) ? "bg-white/10" : "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg p-4 flex flex-col space-y-3 w-[calc(100vw-2rem)] max-w-[320px]" }, popupFilters.map(function (filterEl, index) { return (react_1.default.createElement("div", { key: index }, filterEl)); })), anchor: "right", excludePortalIds: ["datepicker-portal"], lib: { Transition: (_j = props === null || props === void 0 ? void 0 : props.lib) === null || _j === void 0 ? void 0 : _j.Transition } }));
                         }
                     }
-                    // INFO: User column hiding — the schemaPresent path already exposes
-                    // OverviewModal, which writes hide back to the schema in the database.
-                    // This one is the client-only counterpart for bare DTWs.
-                    if (!schemaPresent && ((_o = props.organise) === null || _o === void 0 ? void 0 : _o.hideColumnEnabled)) {
-                        var hiddenColumnCount = getUserHiddenColumnCount();
-                        actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { darkMode: (_p = props.organise) === null || _p === void 0 ? void 0 : _p.darkMode, ctaComp: react_1.default.createElement("div", { className: "relative w-fit h-fit" },
-                                hiddenColumnCount > 0 && (react_1.default.createElement("div", { "data-testid": "dtw-hide-columns-count", className: "absolute top-0 right-0 translate-x-1/4 -translate-y-1/4 z-[1] rounded-full bg-primary-500 text-white flex items-center justify-center w-5 h-5 text-[10px]" }, hiddenColumnCount)),
-                                react_1.default.createElement(iconButton_1.IconButton, { testId: "dtw-hide-columns-btn", icon: react_1.default.createElement(outline_1.EyeSlashIcon, { className: "h-7 w-7 ".concat(hiddenColumnCount > 0
+                    // INFO: View settings — columns (hide, reorder, search), sort and rows
+                    // per page in one panel. Standard on the new DTW; videColumnEnabled
+                    // keeps it available to legacy and bare DTWs.
+                    if (isViewSettingsEnabled) {
+                        var hiddenColumnCount_1 = getViewSettingsColumns().filter(getIsColumnHidden).length;
+                        // INFO: desktop and mobile both render, CSS decides which is shown —
+                        // distinct test ids keep the two unambiguous for e2e
+                        var viewSettingsIcon = function (testIdSuffix, onClick) {
+                            var _a;
+                            return (react_1.default.createElement("div", { className: "relative w-fit h-fit" },
+                                hiddenColumnCount_1 > 0 && (react_1.default.createElement("div", { "data-testid": "dtw-hide-columns-count".concat(testIdSuffix), className: "absolute top-0 right-0 translate-x-1/4 -translate-y-1/4 z-[1] rounded-full bg-primary-500 text-white flex items-center justify-center w-5 h-5 text-[10px]" }, hiddenColumnCount_1)),
+                                react_1.default.createElement(iconButton_1.IconButton, { testId: "dtw-hide-columns-btn".concat(testIdSuffix), icon: react_1.default.createElement(outline_1.AdjustmentsHorizontalIcon, { className: "h-7 w-7 ".concat(hiddenColumnCount_1 > 0
                                             ? "text-white"
-                                            : "text-primary-500") }), bgColor: hiddenColumnCount > 0 ? "bg-primary-500" : "bg-white" })), renderComp: renderHideColumnPopupContent(), anchor: "right", lib: { Transition: (_q = props === null || props === void 0 ? void 0 : props.lib) === null || _q === void 0 ? void 0 : _q.Transition } }));
+                                            : "text-primary-500") }), bgColor: hiddenColumnCount_1 > 0
+                                        ? "bg-primary-500"
+                                        : ((_a = props.organise) === null || _a === void 0 ? void 0 : _a.darkMode)
+                                            ? "bg-white/10"
+                                            : "bg-white", onClick: onClick })));
+                        };
+                        // 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: (_k = props.organise) === null || _k === void 0 ? void 0 : _k.darkMode, darkModeBg: (_l = props.organise) === null || _l === void 0 ? void 0 : _l.darkModeBg, ctaComp: viewSettingsIcon(""), renderComp: react_1.default.createElement("div", { className: "w-[calc(100vw-2rem)] max-w-[320px] rounded-md p-4 shadow-lg ".concat(((_m = props.organise) === null || _m === void 0 ? void 0 : _m.darkMode)
+                                        ? "".concat((_p = (_o = props.organise) === null || _o === void 0 ? void 0 : _o.darkModeBg) !== null && _p !== void 0 ? _p : "bg-gray-900", " text-white")
+                                        : "bg-white") }, renderViewSettingsContent()), anchor: "right", excludePortalIds: ["datepicker-portal", "select-portal"], lib: { Transition: (_q = props === null || props === void 0 ? void 0 : props.lib) === null || _q === void 0 ? void 0 : _q.Transition } })));
+                        // INFO: Mobile — the popover cannot fit the panel and overflows the
+                        // viewport, so a Modal takes over (same split as the flex filter)
+                        actionElementList.push(react_1.default.createElement("div", { className: "block md:hidden" },
+                            viewSettingsIcon("-mobile", function () {
+                                return setViewSettingsModalOpen(true);
+                            }),
+                            react_1.default.createElement(modal_1.Modal, { open: viewSettingsModalOpen, maxWidth: "lg", title: "View", darkMode: (_r = props.organise) === null || _r === void 0 ? void 0 : _r.darkMode, darkModeBg: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.darkModeBg, onClose: function () { return setViewSettingsModalOpen(false); }, renderContent: function () { return renderViewSettingsContent(); } })));
                     }
                     // INFO: Flex filter — desktop uses PopUp, mobile uses Modal
-                    if ((_r = props.bareSettings) === null || _r === void 0 ? void 0 : _r.bareFlexFilters) {
+                    if ((_t = props.bareSettings) === null || _t === void 0 ? void 0 : _t.bareFlexFilters) {
                         var flexActions = {
                             handleAddFilter: handleFlexFilterAdd,
                             handleRemoveFilter: handleFlexFilterRemove,
@@ -7239,16 +7371,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         };
                         // INFO: Search input will only render above flex filters if bareListFilterAsPopup is true
                         var searchInput = !isFirebase &&
-                            ((_s = props.bareSettings) === null || _s === void 0 ? void 0 : _s.bareListFilterAsPopup) &&
-                            !((_t = props.organise) === null || _t === void 0 ? void 0 : _t.hideSearch) &&
+                            ((_u = props.bareSettings) === null || _u === void 0 ? void 0 : _u.bareListFilterAsPopup) &&
+                            !((_v = props.organise) === null || _v === void 0 ? void 0 : _v.hideSearch) &&
                             filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
                             filterComponent_1.length > 0
                             ? filterComponent_1[filterComponent_1.length - 1]
                             : undefined;
                         var flexFilterLength_1 = activeFlexFilterCount_1;
-                        if (!((_u = props.organise) === null || _u === void 0 ? void 0 : _u.hideSearch) &&
-                            ((_v = props.bareSettings) === null || _v === void 0 ? void 0 : _v.bareListFilterAsPopup) &&
+                        if (!((_w = props.organise) === null || _w === void 0 ? void 0 : _w.hideSearch) &&
+                            ((_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareListFilterAsPopup) &&
                             (filterSearchParams === null || filterSearchParams === void 0 ? void 0 : filterSearchParams["search"]))
                             flexFilterLength_1 += 1;
                         var flexFilterIconBtn = function (mobile) {
@@ -7259,17 +7391,17 @@ 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: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.darkMode, ctaComp: flexFilterIconBtn(), renderComp: (0, flexFilter_1.renderFlexFilterPopupContent)(flexFilters, structure, devSettings, dbModule, flexFilterReferenceOptions, flexFilterReferenceSearch, flexActions, (_x = props.bareSettings) === null || _x === void 0 ? void 0 : _x.bareListFilterQuery, searchInput, (_y = props.bareSettings) === null || _y === void 0 ? void 0 : _y.bareListFilterAddComponent, undefined, {
-                                    darkMode: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.darkMode,
-                                    darkModeBg: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.darkModeBg,
-                                }), anchor: "right", excludePortalIds: ["datepicker-portal", "select-portal"], lib: { Transition: (_1 = props === null || props === void 0 ? void 0 : props.lib) === null || _1 === void 0 ? void 0 : _1.Transition } })));
+                            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, {
+                                    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 } })));
                         // INFO: Mobile — IconButton that opens a Modal (hidden on desktop)
                         actionElementList.push(react_1.default.createElement("div", { className: "block md:hidden" },
-                            !((_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareListMobileFloatingSearch) &&
+                            !((_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); }, (_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareListFilterQuery, searchInput, (_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.bareListFilterAddComponent, {
-                                darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode,
-                                darkModeBg: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.darkModeBg,
+                            (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, {
+                                darkMode: (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.darkMode,
+                                darkModeBg: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.darkModeBg,
                             })));
                     }
                     // INFO: bareUpdateActionBottom positions the read/update action bar. The list's own
@@ -7278,14 +7410,14 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     var actionBtns = renderActionButtons(props.type);
                     if (actionBtns)
                         actionElementList.push(actionBtns);
-                    if (schemaPresent || ((_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.showExport)) {
-                        actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { darkMode: (_8 = props.organise) === null || _8 === void 0 ? void 0 : _8.darkMode, ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.darkMode) ? "bg-white/10" : "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
+                    if (schemaPresent || ((_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.showExport)) {
+                        actionElementList.push(react_1.default.createElement(popUp_1.PopUp, { darkMode: (_10 = props.organise) === null || _10 === void 0 ? void 0 : _10.darkMode, ctaComp: react_1.default.createElement(iconButton_1.IconButton, { className: "bg-primary-100", icon: react_1.default.createElement(solid_1.EllipsisVerticalIcon, { className: "h-7 w-7 text-primary-500" }), bgColor: ((_11 = props.organise) === null || _11 === void 0 ? void 0 : _11.darkMode) ? "bg-white/10" : "bg-white" }), renderComp: react_1.default.createElement("div", { className: "shadow-lg" }, moreButtonPopUp.map(function (eachPopup) { return (
                             //TODO: Bug - Crash on Next Js
                             // <Menu.Item>
                             react_1.default.createElement("span", { className: "block w-40 py-3 text-sm text-center text-gray-700 cursor-pointer hover:bg-gray-100", onClick: eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.onClick }, eachPopup === null || eachPopup === void 0 ? void 0 : eachPopup.text)
                             // </Menu.Item>
                             ); })), lib: {
-                                Transition: (_10 = props === null || props === void 0 ? void 0 : props.lib) === null || _10 === void 0 ? void 0 : _10.Transition,
+                                Transition: (_12 = props === null || props === void 0 ? void 0 : props.lib) === null || _12 === void 0 ? void 0 : _12.Transition,
                             } }));
                     }
                     if (actionElementList.length > 0) {
@@ -7307,7 +7439,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }
                     if ((_d = props.organise) === null || _d === void 0 ? void 0 : _d.filterComponentNewRow) {
                         if (props.organise.showGroupByFeature) {
-                            filterElementList.push(react_1.default.createElement(select_1.Select, { label: "Group", options: (_k = (_g = (_f = (_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.renderGroupByOptions) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : (_j = (_h = props === null || props === void 0 ? void 0 : props.organise) === null || _h === void 0 ? void 0 : _h.renderReferenceLabelOptions) === null || _j === void 0 ? void 0 : _j.call(_h, props.collectionId, true)) !== null && _k !== void 0 ? _k : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
+                            filterElementList.push(react_1.default.createElement(select_1.Select, { portalDropdown: true, label: "Group", options: (_k = (_g = (_f = (_e = props === null || props === void 0 ? void 0 : props.organise) === null || _e === void 0 ? void 0 : _e.renderGroupByOptions) === null || _f === void 0 ? void 0 : _f.call(_e)) !== null && _g !== void 0 ? _g : (_j = (_h = props === null || props === void 0 ? void 0 : props.organise) === null || _h === void 0 ? void 0 : _h.renderReferenceLabelOptions) === null || _j === void 0 ? void 0 : _j.call(_h, props.collectionId, true)) !== null && _k !== void 0 ? _k : [], value: groupId !== null && groupId !== void 0 ? groupId : "", onChange: function (value) { return setGroupId(value); } }));
                         }
                         if (filterComponent_1 &&
                             Array.isArray(filterComponent_1) &&
@@ -7359,15 +7491,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         (0, listModule_1.renderFloatingMobileSearch)({
                             filterSearch: filterSearch,
                             handleNameSearch: handleNameSearch,
-                            onFilterClick: function () {
-                                var _a;
-                                if ((_a = props.bareSettings) === null || _a === void 0 ? void 0 : _a.bareFlexFilters) {
-                                    setFlexFilterModalOpen(true);
-                                }
-                                else {
-                                    handlePopUpModal(true, "filter");
-                                }
-                            },
+                            onFilterClick: function () { return setFlexFilterModalOpen(true); },
                             hideSearch: (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.hideSearch,
                             darkMode: (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.darkMode,
                             floatingOffset: (_37 = props.bareSettings) === null || _37 === void 0 ? void 0 : _37.bareListFloatingActionOffset,
@@ -7790,7 +7914,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return groups;
     };
     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, _30, _31, _32, _33, _34, _35, _36;
+        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;
         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) {
@@ -7818,7 +7942,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, _x, _y, _z, _0, _1, _2, _3, _4;
+                    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
                     var 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; })) || [];
@@ -7858,15 +7982,24 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }, linkType: props.linkType, custom: props.custom, newTabUrl: (_o = (_m = props.newTabUrl) === null || _m === void 0 ? void 0 : _m.default) !== null && _o !== void 0 ? _o : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_q = (_p = props.newTabUrl) === null || _p === void 0 ? void 0 : _p.addons) !== null && _q !== void 0 ? _q : "&type=read&collection=".concat(props.collectionId, "&view=general"), className: "mt-5", lib: { axios: (_r = props.lib) === null || _r === void 0 ? void 0 : _r.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_s = props.organise) === null || _s === void 0 ? void 0 : _s.fixedPagination, advSettings: {
                                 addColumnEnabled: (_t = props.organise) === null || _t === void 0 ? void 0 : _t.addColumnEnabled,
                                 renderAddColumnElements: renderAddMathColumn,
-                                dragEnabled: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.advDragEnabled,
-                                sortEnabled: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.advSortEnabled,
-                                filterEnabled: ((_w = props.bareSettings) === null || _w === void 0 ? void 0 : _w.bareFlexFilters)
-                                    ? false
-                                    : (_x = props.organise) === null || _x === void 0 ? void 0 : _x.advFilterEnabled,
+                                dragEnabled: isViewSettingsEnabled,
+                                sortEnabled: isViewSettingsEnabled,
+                                // INFO: per-column header filter is replaced by the flex filters
+                                filterEnabled: false,
                                 sortId: activeSortId,
-                                sortOptions: (_z = (_y = props.organise) === null || _y === void 0 ? void 0 : _y.renderReferenceLabelOptions) === null || _z === void 0 ? void 0 : _z.call(_y),
+                                sortOptions: (_w = (_v = (_u = props.organise) === null || _u === void 0 ? void 0 : _u.renderReferenceLabelOptions) === null || _v === void 0 ? void 0 : _v.call(_u)) !== null && _w !== void 0 ? _w : (isViewSettingsEnabled
+                                    ? getViewSettingsColumns().map(function (eachColumn) {
+                                        var _a;
+                                        return ({
+                                            key: eachColumn.id,
+                                            label: (_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id,
+                                        });
+                                    })
+                                    : undefined),
                                 onSortColumn: handleSortColumn,
-                                onDragColumn: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.onChangeDrag,
+                                // INFO: header drag and the panel handle run the same reorder, so the
+                                // order persists identically whichever one the user grabs
+                                onDragColumn: handleReorderColumn,
                                 filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                                     var _a;
                                     return {
@@ -7883,7 +8016,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     return renderSearchContent(newQuery);
                                 },
                             }, editable: {
-                                active: ((_1 = props.edit) === null || _1 === void 0 ? void 0 : _1.listEditable) && !props.edit.disabledUpdate
+                                active: ((_x = props.edit) === null || _x === void 0 ? void 0 : _x.listEditable) && !props.edit.disabledUpdate
                                     ? true
                                     : false,
                                 onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -7897,7 +8030,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                     });
                                 }); },
                             }, onObjectEdit: handleObjectCellEdit, addable: {
-                                active: ((_2 = props.edit) === null || _2 === void 0 ? void 0 : _2.listAddable) ? true : false,
+                                active: ((_y = props.edit) === null || _y === void 0 ? void 0 : _y.listAddable) ? true : false,
                                 onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                                     return __generator(this, function (_a) {
                                         switch (_a.label) {
@@ -7908,7 +8041,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                         }
                                     });
                                 }); },
-                            }, darkMode: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.darkMode, hidePagination: true, disableEllipsisOnLongWord: (_4 = props.organise) === null || _4 === void 0 ? void 0 : _4.disableEllipsisOnLongWord })));
+                            }, darkMode: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.darkMode, hidePagination: true, disableEllipsisOnLongWord: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.disableEllipsisOnLongWord })));
                 });
             }
         }
@@ -7967,15 +8100,27 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     }, className: "mt-5", devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.fixedPagination, advSettings: {
                         addColumnEnabled: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.addColumnEnabled,
                         renderAddColumnElements: renderAddMathColumn,
-                        dragEnabled: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.advDragEnabled,
-                        sortEnabled: (_x = props.organise) === null || _x === void 0 ? void 0 : _x.advSortEnabled,
-                        filterEnabled: ((_y = props.bareSettings) === null || _y === void 0 ? void 0 : _y.bareFlexFilters)
-                            ? false
-                            : (_z = props.organise) === null || _z === void 0 ? void 0 : _z.advFilterEnabled,
+                        dragEnabled: isViewSettingsEnabled,
+                        sortEnabled: isViewSettingsEnabled,
+                        // INFO: per-column header filter is replaced by the flex filters
+                        filterEnabled: false,
                         sortId: activeSortId,
-                        sortOptions: (_1 = (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.renderReferenceLabelOptions) === null || _1 === void 0 ? void 0 : _1.call(_0),
+                        sortOptions: (_y = (_x = (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions) === null || _x === void 0 ? void 0 : _x.call(_w)) !== null && _y !== void 0 ? _y : (isViewSettingsEnabled
+                            ? getViewSettingsColumns().map(function (eachColumn) {
+                                var _a;
+                                return ({
+                                    key: eachColumn.id,
+                                    label: (_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id,
+                                });
+                            })
+                            : undefined),
                         onSortColumn: handleSortColumn,
-                        onDragColumn: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.onChangeDrag,
+                        // INFO: header drag and the panel handle run the same reorder, so the
+                        // order persists identically whichever one the user grabs
+                        onDragColumn: handleReorderColumn,
+                        onHideColumn: isViewSettingsEnabled
+                            ? handleToggleUserHiddenColumn
+                            : undefined,
                         filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                             var _a;
                             return {
@@ -7992,7 +8137,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             return renderSearchContent(newQuery);
                         },
                     }, editable: {
-                        active: ((_3 = props.edit) === null || _3 === void 0 ? void 0 : _3.listEditable) && !props.edit.disabledUpdate
+                        active: ((_z = props.edit) === null || _z === void 0 ? void 0 : _z.listEditable) && !props.edit.disabledUpdate
                             ? true
                             : false,
                         onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -8006,7 +8151,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             });
                         }); },
                     }, onObjectEdit: handleObjectCellEdit, addable: {
-                        active: ((_4 = props.edit) === null || _4 === void 0 ? void 0 : _4.listAddable) ? true : false,
+                        active: ((_0 = props.edit) === null || _0 === void 0 ? void 0 : _0.listAddable) ? true : false,
                         onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
                                 switch (_a.label) {
@@ -8017,27 +8162,27 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                                 }
                             });
                         }); },
-                    }, darkMode: (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.darkMode, hidePagination: (_6 = props.organise) === null || _6 === void 0 ? void 0 : _6.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_7 = props.organise) === null || _7 === void 0 ? void 0 : _7.disableEllipsisOnLongWord, pinColumns: (_8 = props.bareSettings) === null || _8 === void 0 ? void 0 : _8.bareListTablePinColumns }));
+                    }, darkMode: (_1 = props.organise) === null || _1 === void 0 ? void 0 : _1.darkMode, hidePagination: (_2 = props.organise) === null || _2 === void 0 ? void 0 : _2.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_3 = props.organise) === null || _3 === void 0 ? void 0 : _3.disableEllipsisOnLongWord, pinColumns: (_4 = props.bareSettings) === null || _4 === void 0 ? void 0 : _4.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: (_10 = (_9 = props.organise) === null || _9 === void 0 ? void 0 : _9.disableSelectFullData) === null || _10 === void 0 ? void 0 : _10.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: (_6 = (_5 = props.organise) === null || _5 === void 0 ? void 0 : _5.disableSelectFullData) === null || _6 === void 0 ? void 0 : _6.table, multiActionButton: react_1.default.createElement("div", { className: "flex flex-row space-x-3" },
                     selectedIds.length > 0 &&
-                        !((_11 = props.edit) === null || _11 === void 0 ? void 0 : _11.disabledUpdate) &&
-                        !((_12 = props.bareSettings) === null || _12 === void 0 ? void 0 : _12.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
+                        !((_7 = props.edit) === null || _7 === void 0 ? void 0 : _7.disabledUpdate) &&
+                        !((_8 = props.bareSettings) === null || _8 === void 0 ? void 0 : _8.bareHideTableExtraMultipleAction) && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Change to Draft", disable: loading, onClick: function () {
                                 handleBatchDraftData();
                             } }),
                         react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Clone Items", disable: loading, onClick: function () {
                                 handleCloneSelectedData();
                             } }))),
-                    ((_13 = props.edit) === null || _13 === void 0 ? void 0 : _13.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
+                    ((_9 = props.edit) === null || _9 === void 0 ? void 0 : _9.deleteBtn) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm text-red-500 hover:text-red-600", text: "Delete", onClick: function () {
                             handleGenerateDeletePasscode();
                             setDeleteModal(true);
                         } })),
-                    !isFirebase && !((_14 = props.edit) === null || _14 === void 0 ? void 0 : _14.disableBatchUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
+                    !isFirebase && !((_10 = props.edit) === null || _10 === void 0 ? void 0 : _10.disableBatchUpdate) && (react_1.default.createElement(textButton_1.TextButton, { className: "text-sm", text: "Update", onClick: function () {
                             setBatchUpdateModal(true);
                         } })),
-                    ((_15 = props.bareSettings) === null || _15 === void 0 ? void 0 : _15.bareListMultipleSelectAddtionalActions) &&
-                        ((_17 = (_16 = props.bareSettings) === null || _16 === void 0 ? void 0 : _16.bareListMultipleSelectAddtionalActions) === null || _17 === void 0 ? void 0 : _17.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 : []);
@@ -8045,20 +8190,29 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         }))), handleSelectAll: handleSelectAllPages, handleSelectedIds: handleSelectIds, header: renderTableHeader(), pageIndex: pageIndex !== null && pageIndex !== void 0 ? pageIndex : 0, onClickRow: function (id) {
                     var _a, _b;
                     (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.handleNavigate) === null || _b === void 0 ? void 0 : _b.call(_a, "read", id, "general");
-                }, linkType: props.linkType, custom: props.custom, newTabUrl: (_19 = (_18 = props.newTabUrl) === null || _18 === void 0 ? void 0 : _18.default) !== null && _19 !== void 0 ? _19 : "".concat(props.localURLEndpoint, "?data="), addNewTabUrl: (_21 = (_20 = props.newTabUrl) === null || _20 === void 0 ? void 0 : _20.addons) !== null && _21 !== void 0 ? _21 : "&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: (_22 = props.lib) === null || _22 === void 0 ? void 0 : _22.axios }, devSettings: props.devSettings, bareSettings: props.bareSettings, fixedPagination: (_23 = props.organise) === null || _23 === void 0 ? void 0 : _23.fixedPagination, advSettings: {
-                    addColumnEnabled: (_24 = props.organise) === null || _24 === void 0 ? void 0 : _24.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: (_25 = props.organise) === null || _25 === void 0 ? void 0 : _25.advDragEnabled,
-                    sortEnabled: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.advSortEnabled,
-                    filterEnabled: ((_27 = props.bareSettings) === null || _27 === void 0 ? void 0 : _27.bareFlexFilters)
-                        ? false
-                        : (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.advFilterEnabled,
+                    dragEnabled: isViewSettingsEnabled,
+                    sortEnabled: isViewSettingsEnabled,
+                    // INFO: per-column header filter is replaced by the flex filters
+                    filterEnabled: false,
                     sortId: activeSortId,
-                    sortOptions: (_30 = (_29 = props.organise) === null || _29 === void 0 ? void 0 : _29.renderReferenceLabelOptions) === null || _30 === void 0 ? void 0 : _30.call(_29),
+                    sortOptions: (_23 = (_22 = (_21 = props.organise) === null || _21 === void 0 ? void 0 : _21.renderReferenceLabelOptions) === null || _22 === void 0 ? void 0 : _22.call(_21)) !== null && _23 !== void 0 ? _23 : (isViewSettingsEnabled
+                        ? getViewSettingsColumns().map(function (eachColumn) {
+                            var _a;
+                            return ({
+                                key: eachColumn.id,
+                                label: (_a = eachColumn.name) !== null && _a !== void 0 ? _a : eachColumn.id,
+                            });
+                        })
+                        : undefined),
                     onSortColumn: handleSortColumn,
-                    onDragColumn: (_31 = props.organise) === null || _31 === void 0 ? void 0 : _31.onChangeDrag,
+                    // INFO: header drag and the panel handle run the same reorder, so the
+                    // order persists identically whichever one the user grabs
+                    onDragColumn: handleReorderColumn,
                     filterOptions: additionalQuery === null || additionalQuery === void 0 ? void 0 : additionalQuery.map(function (eachQuery) {
                         var _a;
                         return {
@@ -8075,7 +8229,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         return renderSearchContent(newQuery);
                     },
                 }, editable: {
-                    active: ((_32 = props.edit) === null || _32 === void 0 ? void 0 : _32.listEditable) && !props.edit.disabledUpdate
+                    active: ((_24 = props.edit) === null || _24 === void 0 ? void 0 : _24.listEditable) && !props.edit.disabledUpdate
                         ? true
                         : false,
                     onUpdateData: function (rowId, columnId, data) { return __awaiter(void 0, void 0, void 0, function () {
@@ -8089,7 +8243,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         });
                     }); },
                 }, onObjectEdit: handleObjectCellEdit, addable: {
-                    active: ((_33 = props.edit) === null || _33 === void 0 ? void 0 : _33.listAddable) ? true : false,
+                    active: ((_25 = props.edit) === null || _25 === void 0 ? void 0 : _25.listAddable) ? true : false,
                     onAddData: function (data) { return __awaiter(void 0, void 0, void 0, function () {
                         return __generator(this, function (_a) {
                             switch (_a.label) {
@@ -8100,7 +8254,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             }
                         });
                     }); },
-                }, darkMode: (_34 = props.organise) === null || _34 === void 0 ? void 0 : _34.darkMode, hidePagination: (_35 = props.organise) === null || _35 === void 0 ? void 0 : _35.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_36 = props.organise) === null || _36 === void 0 ? void 0 : _36.disableEllipsisOnLongWord }));
+                }, darkMode: (_26 = props.organise) === null || _26 === void 0 ? void 0 : _26.darkMode, hidePagination: (_27 = props.organise) === null || _27 === void 0 ? void 0 : _27.hidePagination, customPaginationSize: customPaginationSize, disableEllipsisOnLongWord: (_28 = props.organise) === null || _28 === void 0 ? void 0 : _28.disableEllipsisOnLongWord }));
         }
     };
     var renderTabContent = function (tabs, dataType, viewType) {
@@ -8790,7 +8944,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
         return null;
     };
     var renderModalContent = function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5;
+        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;
         if (loading) {
             return (react_1.default.createElement("div", { className: "mt-5" },
                 react_1.default.createElement(loading_1.Loading, null),
@@ -8856,7 +9010,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     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, { 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) {
+                    (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" },
@@ -8879,28 +9033,8 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                             return handleExportCSVData(true, exportType === "print");
                         } }))))));
         }
-        else if (sortModal) {
-            return (react_1.default.createElement(settingsModal_1.SortModal, { sort: activeSortId, onChangeSort: handleSortColumn, renderReferenceLabelOptions: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.renderReferenceLabelOptions, onClose: function () {
-                    handlePopUpModal(false);
-                } }));
-        }
-        else if (overviewModal) {
-            return (react_1.default.createElement(settingsModal_1.OverviewModal, { model: structure, referenceSchema: referenceModelSchema, setReferenceSchema: setReferenceSchema, onChangeHide: function (updatedModel) {
-                    var _a, _b;
-                    // INFO: Update internal structure state so persistence captures the change
-                    setStructure(updatedModel);
-                    (_b = (_a = props.organise) === null || _a === void 0 ? void 0 : _a.onChangeHide) === null || _b === void 0 ? void 0 : _b.call(_a, updatedModel);
-                }, onClose: function () {
-                    handlePopUpModal(false);
-                } }));
-        }
-        else if (filterModal) {
-            return (react_1.default.createElement(settingsModal_1.FilterModal, { server: props.devSettings.server, filter: additionalQuery, model: props.model, onChangeFilter: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.onChangeFilter, renderReferenceLabelOptions: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions, renderReferenceSpaceOptions: (_x = props.organise) === null || _x === void 0 ? void 0 : _x.renderReferenceSpaceOptions, setNotification: setNotification, onClose: function () {
-                    handlePopUpModal(false);
-                } }));
-        }
         else if (addTabModal) {
-            return (react_1.default.createElement(settingsModal_1.TabModal, { type: props.type, tabs: (_y = props.organise) === null || _y === void 0 ? void 0 : _y.extendedTabs, onChangeTabs: (_z = props.organise) === null || _z === void 0 ? void 0 : _z.onChangeTabs, model: structure, renderReferenceLabelOptions: (_0 = props.organise) === null || _0 === void 0 ? void 0 : _0.renderReferenceLabelOptions, onClose: function () {
+            return (react_1.default.createElement(settingsModal_1.TabModal, { type: props.type, tabs: (_u = props.organise) === null || _u === void 0 ? void 0 : _u.extendedTabs, onChangeTabs: (_v = props.organise) === null || _v === void 0 ? void 0 : _v.onChangeTabs, model: structure, renderReferenceLabelOptions: (_w = props.organise) === null || _w === void 0 ? void 0 : _w.renderReferenceLabelOptions, onClose: function () {
                     handlePopUpModal(false);
                 } }));
         }
@@ -8962,7 +9096,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                 return eachModel.id === selectedObjectStructureId;
             });
             if (filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) {
-                var modalModel_1 = (_1 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _1 !== void 0 ? _1 : [];
+                var modalModel_1 = (_x = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _x !== void 0 ? _x : [];
                 var handleOnFailValidation = function (refList) {
                     var _a, _b;
                     if ((refList === null || refList === void 0 ? void 0 : refList.length) > 0) {
@@ -9034,16 +9168,16 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                         disabledOnEnter_2 = true;
                     return null;
                 });
-                if ((_2 = props.bareSettings) === null || _2 === void 0 ? void 0 : _2.bareListObjectHandleData) {
+                if ((_y = props.bareSettings) === null || _y === void 0 ? void 0 : _y.bareListObjectHandleData) {
                     var listObjectViewType = props.type === "read"
                         ? "read"
                         : selectedObjectId
                             ? "update"
                             : "new";
-                    (_4 = (_3 = props.bareSettings) === null || _3 === void 0 ? void 0 : _3.bareListObjectHandleData) === null || _4 === void 0 ? void 0 : _4.call(_3, listObjectViewType, selectedObjectData);
+                    (_0 = (_z = props.bareSettings) === null || _z === void 0 ? void 0 : _z.bareListObjectHandleData) === null || _0 === void 0 ? void 0 : _0.call(_z, listObjectViewType, selectedObjectData);
                 }
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " pb-32 mt-6 sm:pb-36"), ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType, disabledOnEnter: disabledOnEnter_2, handleOnFailValidation: handleOnFailValidation }, renderDataTemplateFormContent(selectedObjectData, (_5 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _5 !== void 0 ? _5 : [], objectFormInputRefs, true, filterObjectModel.type === "listObject", undefined, filterObjectModel.type === "listObject"
+                    react_1.default.createElement(form_1.Form, { className: "grid ".concat(formColumn, " ").concat(gridGap, " pb-32 mt-6 sm:pb-36"), ref: objectFormRef, refList: objectFormInputRefs, handleComplete: handleSubmitObjectDataType, disabledOnEnter: disabledOnEnter_2, handleOnFailValidation: handleOnFailValidation }, renderDataTemplateFormContent(selectedObjectData, (_1 = filterObjectModel === null || filterObjectModel === void 0 ? void 0 : filterObjectModel.objectData) !== null && _1 !== void 0 ? _1 : [], objectFormInputRefs, true, filterObjectModel.type === "listObject", undefined, filterObjectModel.type === "listObject"
                         ? selectedData
                         : undefined)),
                     react_1.default.createElement("div", { className: "flex justify-end pt-8" },
@@ -9167,7 +9301,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             var model = modelFound !== null && modelFound !== void 0 ? modelFound : defaultModel;
             return (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(form_1.Form, { ref: batchUpdateFormRef, refList: [batchUpdateColumnIdRef, batchUpdateInputRef], handleComplete: handleBatchUpdateData },
-                    react_1.default.createElement(select_1.Select, { ref: batchUpdateColumnIdRef, id: "columnId", value: (_a = batchUpdateData.columnId) !== null && _a !== void 0 ? _a : "", label: "Column ID", options: columnIdOptions, onChange: function (value) {
+                    react_1.default.createElement(select_1.Select, { portalDropdown: true, ref: batchUpdateColumnIdRef, id: "columnId", value: (_a = batchUpdateData.columnId) !== null && _a !== void 0 ? _a : "", label: "Column ID", options: columnIdOptions, onChange: function (value) {
                             var _a;
                             var _b;
                             var columnDataValue = undefined;
@@ -9220,12 +9354,6 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             return "Export ".concat(exportType.toUpperCase());
         else if (exportQR)
             return "Export QR";
-        else if (sortModal)
-            return "Sort Data";
-        else if (filterModal)
-            return "Slice Data";
-        else if (overviewModal)
-            return "Model Overview";
         else if (addTabModal)
             return "Add Tab";
         else if (offlineModal)
@@ -9257,7 +9385,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
         renderNotification("root"),
-        ((_49 = (_48 = props.renderSettings) === null || _48 === void 0 ? void 0 : _48.renderLoadingUI) === null || _49 === void 0 ? void 0 : _49.call(_48)) && loading ? ((_50 = props.renderSettings) === null || _50 === void 0 ? void 0 : _50.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_51 = props.organise) === null || _51 === void 0 ? void 0 : _51.darkMode, darkModeBg: (_52 = props.organise) === null || _52 === void 0 ? void 0 : _52.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
+        ((_54 = (_53 = props.renderSettings) === null || _53 === void 0 ? void 0 : _53.renderLoadingUI) === null || _54 === void 0 ? void 0 : _54.call(_53)) && loading ? ((_55 = props.renderSettings) === null || _55 === void 0 ? void 0 : _55.renderLoadingUI()) : (react_1.default.createElement(modal_1.Modal, { darkMode: (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.darkMode, darkModeBg: (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.darkModeBg, maxWidth: selectedObjectStructureId || excelModal ? "2xl" : undefined, open: modalVisible, title: renderModalTitle(), renderContent: renderModalContent, onClose: function () {
                 var _a, _b;
                 if (loading)
                     return;
@@ -9268,7 +9396,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
                     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: (_53 = props.organise) === null || _53 === void 0 ? void 0 : _53.darkMode, darkModeBg: (_54 = props.organise) === null || _54 === void 0 ? void 0 : _54.darkModeBg, maxWidth: "2xl", open: referenceCreationModal.id ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_58 = props.organise) === null || _58 === void 0 ? void 0 : _58.darkMode, darkModeBg: (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.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];
@@ -9284,19 +9412,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: (_55 = props.organise) === null || _55 === void 0 ? void 0 : _55.darkMode, darkModeBg: (_56 = props.organise) === null || _56 === void 0 ? void 0 : _56.darkModeBg, maxWidth: "2xl", open: Object.keys(referenceDeleteTableData).length > 0, renderContent: renderReferenceDeleteTable, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_60 = props.organise) === null || _60 === void 0 ? void 0 : _60.darkMode, darkModeBg: (_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.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: (_57 = props.organise) === null || _57 === void 0 ? void 0 : _57.darkMode, darkModeBg: (_58 = props.organise) === null || _58 === void 0 ? void 0 : _58.darkModeBg, open: deleteModal, renderContent: renderDeleteModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_62 = props.organise) === null || _62 === void 0 ? void 0 : _62.darkMode, darkModeBg: (_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.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: (_59 = props.organise) === null || _59 === void 0 ? void 0 : _59.darkMode, darkModeBg: (_60 = props.organise) === null || _60 === void 0 ? void 0 : _60.darkModeBg, open: batchUpdateModal, renderContent: renderBatchUpdateModalContent, onClose: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.darkMode, darkModeBg: (_65 = props.organise) === null || _65 === void 0 ? void 0 : _65.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: (_61 = props.organise) === null || _61 === void 0 ? void 0 : _61.darkMode, darkModeBg: (_62 = props.organise) === null || _62 === void 0 ? void 0 : _62.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
+        react_1.default.createElement(modal_1.Modal, { darkMode: (_66 = props.organise) === null || _66 === void 0 ? void 0 : _66.darkMode, darkModeBg: (_67 = props.organise) === null || _67 === void 0 ? void 0 : _67.darkModeBg, title: "Edit Auth Method", open: selectedAuthMethod ? true : false, renderContent: function () {
                 var _a;
                 if (props.space)
                     return (react_1.default.createElement(authModal_1.AuthModal, { space: props.space, userId: (_a = props.id) !== null && _a !== void 0 ? _a : "", type: selectedAuthMethod, authMethods: authMethods, onComplete: handleAuthComplete }));
@@ -9304,7 +9432,7 @@ exports.DataTemplate = (0, react_1.forwardRef)(function (props, ref) {
             }, onClose: function () {
                 setSelectedAuthMethod("");
             } }),
-        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_63 = props.organise) === null || _63 === void 0 ? void 0 : _63.darkMode, darkModeBg: (_64 = props.organise) === null || _64 === void 0 ? void 0 : _64.darkModeBg, open: activityModal, title: "Activity Log", renderContent: function () {
+        isActivityLog && (react_1.default.createElement(modal_1.Modal, { darkMode: (_68 = props.organise) === null || _68 === void 0 ? void 0 : _68.darkMode, darkModeBg: (_69 = props.organise) === null || _69 === void 0 ? void 0 : _69.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