@teselagen/ui 0.10.5 → 0.10.7

package/index.es.js

@@ -53,9 +53,9 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import * as React from "react";
+import * as React$1 from "react";
 import React__default, { useState, useEffect, forwardRef as forwardRef$2, useImperativeHandle, Fragment, useMemo, useRef, useReducer, useCallback, createElement, Component, useLayoutEffect, createContext as createContext$1, memo, useContext, isValidElement, PureComponent } from "react";
-import { Classes, Icon, Button, Intent, MenuItem, Keys, Tag, Popover, Tooltip, Spinner, Checkbox, Switch, Position, FormGroup, InputGroup, TextArea, EditableText, NumericInput, RadioGroup, Menu, Toaster, MenuDivider, ContextMenu, KeyCombo, useHotkeys, Callout, Dialog, Card, Tabs, Tab, Colors, HTMLSelect, Overlay, ProgressBar } from "@blueprintjs/core";
+import { Classes, Icon, Button, Intent, MenuItem, Keys, Tag, Popover, Tooltip, Spinner, Checkbox, Switch, Position, FormGroup, InputGroup, TextArea, EditableText, NumericInput, RadioGroup, Menu, Toaster, MenuDivider, KeyCombo, ContextMenu, useHotkeys, Callout, Dialog, Card, Tabs, Tab, Colors, HTMLSelect, Overlay, ProgressBar } from "@blueprintjs/core";
 import { formValueSelector, initialize, change, Field, reduxForm, SubmissionError, destroy, touch, FormName, Fields } from "redux-form";
 import require$$2$1, { unstable_batchedUpdates, createPortal, flushSync } from "react-dom";
 import { connect, useDispatch, useSelector, useStore } from "react-redux";
@@ -12523,6 +12523,64 @@ const rectSortingStrategy = /* @__PURE__ */ __name((_ref) => {
     scaleY: newRect.height / oldRect.height
   };
 }, "rectSortingStrategy");
+const defaultScale$1 = {
+  scaleX: 1,
+  scaleY: 1
+};
+const verticalListSortingStrategy = /* @__PURE__ */ __name((_ref) => {
+  var _rects$activeIndex;
+  let {
+    activeIndex,
+    activeNodeRect: fallbackActiveRect,
+    index: index2,
+    rects,
+    overIndex
+  } = _ref;
+  const activeNodeRect = (_rects$activeIndex = rects[activeIndex]) != null ? _rects$activeIndex : fallbackActiveRect;
+  if (!activeNodeRect) {
+    return null;
+  }
+  if (index2 === activeIndex) {
+    const overIndexRect = rects[overIndex];
+    if (!overIndexRect) {
+      return null;
+    }
+    return __spreadValues({
+      x: 0,
+      y: activeIndex < overIndex ? overIndexRect.top + overIndexRect.height - (activeNodeRect.top + activeNodeRect.height) : overIndexRect.top - activeNodeRect.top
+    }, defaultScale$1);
+  }
+  const itemGap = getItemGap$1(rects, index2, activeIndex);
+  if (index2 > activeIndex && index2 <= overIndex) {
+    return __spreadValues({
+      x: 0,
+      y: -activeNodeRect.height - itemGap
+    }, defaultScale$1);
+  }
+  if (index2 < activeIndex && index2 >= overIndex) {
+    return __spreadValues({
+      x: 0,
+      y: activeNodeRect.height + itemGap
+    }, defaultScale$1);
+  }
+  return __spreadValues({
+    x: 0,
+    y: 0
+  }, defaultScale$1);
+}, "verticalListSortingStrategy");
+function getItemGap$1(clientRects, index2, activeIndex) {
+  const currentRect = clientRects[index2];
+  const previousRect = clientRects[index2 - 1];
+  const nextRect = clientRects[index2 + 1];
+  if (!currentRect) {
+    return 0;
+  }
+  if (activeIndex < index2) {
+    return previousRect ? currentRect.top - (previousRect.top + previousRect.height) : nextRect ? nextRect.top - (currentRect.top + currentRect.height) : 0;
+  }
+  return nextRect ? nextRect.top - (currentRect.top + currentRect.height) : previousRect ? currentRect.top - (previousRect.top + previousRect.height) : 0;
+}
+__name(getItemGap$1, "getItemGap$1");
 const ID_PREFIX = "Sortable";
 const Context = /* @__PURE__ */ React__default.createContext({
   activeIndex: -1,
@@ -16493,6 +16551,7 @@ const ThComponent2 = /* @__PURE__ */ __name((_c) => {
     className,
     children,
     style,
+    path: path2,
     columnindex
   } = _d, rest = __objRest(_d, [
     "toggleSort",
@@ -16500,16 +16559,30 @@ const ThComponent2 = /* @__PURE__ */ __name((_c) => {
     "className",
     "children",
     "style",
+    "path",
     "columnindex"
   ]);
-  const index2 = columnindex != null ? columnindex : -1;
-  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
-    id: `${index2}`,
-    disabled: immovable === "true"
+  const index2 = columnindex ? path2 : -1;
+  const disabled = !path2 || immovable === "true" || immovable === true;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging: _isDragging
+  } = useSortable({
+    id: path2,
+    disabled
   });
+  const isDragging2 = _isDragging && !disabled;
+  if (transform) {
+    transform.scaleX = 1;
+  }
   const sortStyles = {
     transform: CSS.Transform.toString(transform),
-    transition
+    transition,
+    zIndex: isDragging2 ? 999 : void 0
   };
   return /* @__PURE__ */ React__default.createElement(
     "div",
@@ -16517,11 +16590,12 @@ const ThComponent2 = /* @__PURE__ */ __name((_c) => {
       style: __spreadValues(__spreadValues({}, sortStyles), style),
       ref: setNodeRef
     }, attributes), listeners), {
-      className: classNames("rt-th", className),
+      className: classNames("rt-th", className, { "th-dragging": isDragging2 }),
       onClick: /* @__PURE__ */ __name((e) => toggleSort && toggleSort(e), "onClick"),
       role: "columnheader",
       tabIndex: "-1",
       columnindex,
+      path: path2,
       index: index2
     }), rest),
     children
@@ -19443,36 +19517,49 @@ function tableQueryParamsToHasuraClauses({
     const uniqueFieldsByPath = {};
     const searchTerms = searchTerm.split(",");
     schema.fields.forEach((field) => {
-      const { type: type2, path: path2, searchDisabled, isHidden } = field;
-      if (uniqueFieldsByPath[path2]) return;
-      uniqueFieldsByPath[path2] = true;
-      if (searchDisabled || field.filterDisabled || type2 === "color" || isHidden)
-        return;
-      searchTerms.forEach((term) => {
-        const filterValue = term.trim();
-        if (type2 === "string" || type2 === "lookup") {
-          const o2 = set$1({}, path2, { _ilike: `%${filterValue}%` });
-          searchTermFilters.push(o2);
-        } else if (type2 === "boolean") {
-          let regex;
-          try {
-            regex = new RegExp("^" + filterValue, "ig");
-          } catch (error) {
-          }
-          if (regex) {
-            if ("true".replace(regex, "") !== "true") {
-              const o2 = set$1({}, path2, { _eq: true });
-              searchTermFilters.push(o2);
-            } else if ("false".replace(regex, "") !== "false") {
-              const o2 = set$1({}, path2, { _eq: false });
-              searchTermFilters.push(o2);
+      const {
+        type: type2,
+        path: path2,
+        additionalSearchPaths = [],
+        searchDisabled,
+        isHidden
+      } = field;
+      const allPaths = [path2, ...additionalSearchPaths];
+      allPaths.forEach((path22) => {
+        addSearchTermFilters(path22);
+      });
+      function addSearchTermFilters(path22) {
+        if (uniqueFieldsByPath[path22]) return;
+        uniqueFieldsByPath[path22] = true;
+        if (searchDisabled || field.filterDisabled || type2 === "color" || isHidden || !path22)
+          return;
+        searchTerms.forEach((term) => {
+          const filterValue = term.trim();
+          if (type2 === "string" || type2 === "lookup") {
+            const o2 = set$1({}, path22, { _ilike: `%${filterValue}%` });
+            searchTermFilters.push(o2);
+          } else if (type2 === "boolean") {
+            let regex;
+            try {
+              regex = new RegExp("^" + filterValue, "ig");
+            } catch (error) {
             }
+            if (regex) {
+              if ("true".replace(regex, "") !== "true") {
+                const o2 = set$1({}, path22, { _eq: true });
+                searchTermFilters.push(o2);
+              } else if ("false".replace(regex, "") !== "false") {
+                const o2 = set$1({}, path22, { _eq: false });
+                searchTermFilters.push(o2);
+              }
+            }
+          } else if ((type2 === "number" || type2 === "integer") && !isNaN(filterValue)) {
+            const o2 = set$1({}, path22, { _eq: parseFloat(filterValue) });
+            searchTermFilters.push(o2);
           }
-        } else if ((type2 === "number" || type2 === "integer") && !isNaN(filterValue)) {
-          const o2 = set$1({}, path2, { _eq: parseFloat(filterValue) });
-          searchTermFilters.push(o2);
-        }
-      });
+        });
+      }
+      __name(addSearchTermFilters, "addSearchTermFilters");
     });
     if (searchTermFilters.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -19483,10 +19570,16 @@ function tableQueryParamsToHasuraClauses({
     }
   }
   if (filters && filters.length > 0) {
-    const filterClauses = filters.map((filter2) => {
+    const filterClauses = flatMap(filters, (filter2) => {
       let { selectedFilter, filterOn, filterValue } = filter2;
       const fieldSchema = ccFields[filterOn] || {};
-      const { path: path2, reference: reference2, type: type2, customColumnFilter } = fieldSchema;
+      const {
+        path: path2,
+        additionalSearchPaths = [],
+        reference: reference2,
+        type: type2,
+        customColumnFilter
+      } = fieldSchema;
       if (customColumnFilter) {
         return customColumnFilter(filterValue);
       }
@@ -19509,117 +19602,128 @@ function tableQueryParamsToHasuraClauses({
       }
       if (reference2) {
         filterOn = reference2.sourceField;
+        return addColumnFilters(filterOn);
       } else {
-        filterOn = path2 || filterOn;
-      }
-      switch (selectedFilter) {
-        case "none":
-          return {};
-        case "startsWith":
-          return { [filterOn]: { _ilike: `${filterValue}%` } };
-        case "endsWith":
-          return { [filterOn]: { _ilike: `%${filterValue}` } };
-        case "contains":
-          return { [filterOn]: { _ilike: `%${filterValue}%` } };
-        case "notContains":
-          return { [filterOn]: { _nilike: `%${filterValue}%` } };
-        case "isExactly":
-          return { [filterOn]: { _eq: filterValue } };
-        case "isEmpty":
-          if (filterOn.includes(".")) {
+        if (path2) {
+          const allPaths = [path2, ...additionalSearchPaths];
+          return allPaths.map((p2) => addColumnFilters(p2));
+        } else {
+          return addColumnFilters(filterOn);
+        }
+      }
+      function addColumnFilters(filterOn2) {
+        switch (selectedFilter) {
+          case "none":
+            return {};
+          case "startsWith":
+            return { [filterOn2]: { _ilike: `${filterValue}%` } };
+          case "endsWith":
+            return { [filterOn2]: { _ilike: `%${filterValue}` } };
+          case "contains":
+            return { [filterOn2]: { _ilike: `%${filterValue}%` } };
+          case "notContains":
+            return { [filterOn2]: { _nilike: `%${filterValue}%` } };
+          case "isExactly":
+            return { [filterOn2]: { _eq: filterValue } };
+          case "isEmpty":
+            if (filterOn2.includes(".")) {
+              return {
+                _not: {
+                  [filterOn2.split(".")[0]]: {}
+                }
+              };
+            }
             return {
-              _not: {
-                [filterOn.split(".")[0]]: {}
-              }
+              _or: [
+                { [filterOn2]: { _eq: "" } },
+                { [filterOn2]: { _is_null: true } }
+              ]
             };
-          }
-          return {
-            _or: [
-              { [filterOn]: { _eq: "" } },
-              { [filterOn]: { _is_null: true } }
-            ]
-          };
-        case "notEmpty":
-          return {
-            _and: [
-              { [filterOn]: { _neq: "" } },
-              { [filterOn]: { _is_null: false } }
-            ]
-          };
-        case "inList":
-          return { [filterOn]: { _in: filterValue } };
-        case "notInList":
-          return { [filterOn]: { _nin: filterValue } };
-        case "true":
-          return { [filterOn]: { _eq: true } };
-        case "false":
-          return { [filterOn]: { _eq: false } };
-        case "dateIs":
-          return { [filterOn]: { _eq: filterValue } };
-        case "notBetween":
-          return {
-            _or: [
-              {
-                [filterOn]: {
-                  _lt: new Date(arrayFilterValue[0])
-                }
-              },
-              {
-                [filterOn]: {
-                  _gt: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
+          case "notEmpty":
+            return {
+              _and: [
+                { [filterOn2]: { _neq: "" } },
+                { [filterOn2]: { _is_null: false } }
+              ]
+            };
+          case "inList":
+            return { [filterOn2]: { _in: filterValue } };
+          case "notInList":
+            return { [filterOn2]: { _nin: filterValue } };
+          case "true":
+            return { [filterOn2]: { _eq: true } };
+          case "false":
+            return { [filterOn2]: { _eq: false } };
+          case "dateIs":
+            return { [filterOn2]: { _eq: filterValue } };
+          case "notBetween":
+            return {
+              _or: [
+                {
+                  [filterOn2]: {
+                    _lt: new Date(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn2]: {
+                    _gt: new Date(
+                      new Date(arrayFilterValue[1]).setHours(23, 59)
+                    )
+                  }
                 }
+              ]
+            };
+          case "isBetween":
+            return {
+              [filterOn2]: {
+                _gte: new Date(arrayFilterValue[0]),
+                _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
               }
-            ]
-          };
-        case "isBetween":
-          return {
-            [filterOn]: {
-              _gte: new Date(arrayFilterValue[0]),
-              _lte: new Date(new Date(arrayFilterValue[1]).setHours(23, 59))
-            }
-          };
-        case "isBefore":
-          return { [filterOn]: { _lt: new Date(filterValue) } };
-        case "isAfter":
-          return { [filterOn]: { _gt: new Date(filterValue) } };
-        case "greaterThan":
-          return { [filterOn]: { _gt: parseFloat(filterValue) } };
-        case "lessThan":
-          return { [filterOn]: { _lt: parseFloat(filterValue) } };
-        case "inRange":
-          return {
-            [filterOn]: {
-              _gte: parseFloat(arrayFilterValue[0]),
-              _lte: parseFloat(arrayFilterValue[1])
-            }
-          };
-        case "outsideRange":
-          return {
-            _or: [
-              {
-                [filterOn]: {
-                  _lt: parseFloat(arrayFilterValue[0])
-                }
-              },
-              {
-                [filterOn]: {
-                  _gt: parseFloat(arrayFilterValue[1])
+            };
+          case "isBefore":
+            return { [filterOn2]: { _lt: new Date(filterValue) } };
+          case "isAfter":
+            return { [filterOn2]: { _gt: new Date(filterValue) } };
+          case "greaterThan":
+            return { [filterOn2]: { _gt: parseFloat(filterValue) } };
+          case "lessThan":
+            return { [filterOn2]: { _lt: parseFloat(filterValue) } };
+          case "inRange":
+            return {
+              [filterOn2]: {
+                _gte: parseFloat(arrayFilterValue[0]),
+                _lte: parseFloat(arrayFilterValue[1])
+              }
+            };
+          case "outsideRange":
+            return {
+              _or: [
+                {
+                  [filterOn2]: {
+                    _lt: parseFloat(arrayFilterValue[0])
+                  }
+                },
+                {
+                  [filterOn2]: {
+                    _gt: parseFloat(arrayFilterValue[1])
+                  }
                 }
+              ]
+            };
+          case "equalTo":
+            return {
+              [filterOn2]: {
+                _eq: type2 === "number" || type2 === "integer" ? parseFloat(filterValue) : filterValue
               }
-            ]
-          };
-        case "equalTo":
-          return {
-            [filterOn]: {
-              _eq: type2 === "number" || type2 === "integer" ? parseFloat(filterValue) : filterValue
-            }
-          };
-        case "regex":
-          return { [filterOn]: { _regex: filterValue } };
-        default:
-          console.warn(`Unsupported filter type: ${selectedFilter}`);
-          return {};
+            };
+          case "regex":
+            return { [filterOn2]: { _regex: filterValue } };
+          default:
+            console.warn(`Unsupported filter type: ${selectedFilter}`);
+            return {};
+        }
       }
+      __name(addColumnFilters, "addColumnFilters");
     });
     if (filterClauses.length > 0) {
       if (Object.keys(where).length > 0) {
@@ -20150,10 +20254,15 @@ function getQueryParams({
         const ccDisplayName = orderVal.replace(/^-/gi, "");
         const schemaForField = ccFields[ccDisplayName];
         if (schemaForField) {
-          const { path: path2 } = schemaForField;
+          const { path: path2, additionalSearchPaths } = schemaForField;
           const reversed = ccDisplayName !== orderVal;
           const prefix2 = reversed ? "-" : "";
           cleanedOrder.push(prefix2 + path2);
+          if (additionalSearchPaths && additionalSearchPaths.length) {
+            additionalSearchPaths.forEach((additionalPath) => {
+              cleanedOrder.push(prefix2 + additionalPath);
+            });
+          }
         } else {
           !noOrderError && console.error(
             "No schema for field found!",
@@ -30206,19 +30315,19 @@ function dequal(foo, bar) {
 }
 __name(dequal, "dequal");
 function useDeepCompareMemoize(value) {
-  var ref2 = React.useRef(value);
-  var signalRef = React.useRef(0);
+  var ref2 = React$1.useRef(value);
+  var signalRef = React$1.useRef(0);
   if (!dequal(value, ref2.current)) {
     ref2.current = value;
     signalRef.current += 1;
   }
-  return React.useMemo(function() {
+  return React$1.useMemo(function() {
     return ref2.current;
   }, [signalRef.current]);
 }
 __name(useDeepCompareMemoize, "useDeepCompareMemoize");
 function useDeepCompareEffect(callback, dependencies) {
-  return React.useEffect(callback, useDeepCompareMemoize(dependencies));
+  return React$1.useEffect(callback, useDeepCompareMemoize(dependencies));
 }
 __name(useDeepCompareEffect, "useDeepCompareEffect");
 var fuzzysearch_1;
@@ -32487,6 +32596,7 @@ const _TgSelect = class _TgSelect extends React__default.Component {
             }
           }, "onKeyDown"),
           inputProps: __spreadValues({
+            autoComplete: "off",
             name: "tg-multiselect-input",
             autoFocus: autoFocus || autoOpen,
             onBlur
@@ -34476,6 +34586,165 @@ const SearchBar = /* @__PURE__ */ __name(({
     })
   );
 }, "SearchBar");
+const restrictToHorizontalAxis = /* @__PURE__ */ __name((_ref) => {
+  let {
+    transform
+  } = _ref;
+  return __spreadProps(__spreadValues({}, transform), {
+    y: 0
+  });
+}, "restrictToHorizontalAxis");
+const restrictToVerticalAxis = /* @__PURE__ */ __name((_ref) => {
+  let {
+    transform
+  } = _ref;
+  return __spreadProps(__spreadValues({}, transform), {
+    x: 0
+  });
+}, "restrictToVerticalAxis");
+const DraggableColumnOption = /* @__PURE__ */ __name(({
+  field,
+  index: index2,
+  onVisibilityChange,
+  numVisible
+}) => {
+  const { displayName, isHidden, path: path2, subFrag, immovable, type: type2 } = field;
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: path2,
+    disabled: immovable === "true"
+  });
+  if (type2 === "action") {
+    return null;
+  }
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    cursor: "grab",
+    marginBottom: 5
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    __spreadValues(__spreadValues({
+      ref: setNodeRef,
+      style,
+      className: "SortableItem",
+      "data-path": path2
+    }, attributes), listeners),
+    /* @__PURE__ */ React__default.createElement(
+      Checkbox,
+      {
+        name: `${path2}-${index2}`,
+        key: index2,
+        onChange: /* @__PURE__ */ __name(() => {
+          if (numVisible <= 1 && !isHidden) {
+            return window.toastr.warning(
+              "We have to display at least one column :)"
+            );
+          }
+          onVisibilityChange({ shouldShow: isHidden, path: path2 });
+        }, "onChange"),
+        checked: !isHidden,
+        label: /* @__PURE__ */ React__default.createElement("span", { style: { display: "flex", marginTop: -17 } }, displayName, " ", field.fieldGroup && /* @__PURE__ */ React__default.createElement(
+          "span",
+          {
+            style: { fontSize: 10, marginLeft: 5, marginTop: 2 },
+            className: Classes.TEXT_MUTED
+          },
+          "(",
+          field.fieldGroup,
+          ")"
+        ), subFrag && /* @__PURE__ */ React__default.createElement(
+          InfoHelper,
+          {
+            style: { marginLeft: 5 }
+          },
+          "Note: Viewing this complex column may cause the table to load slower. Try hiding it for better performance."
+        ))
+      }
+    )
+  );
+}, "DraggableColumnOption");
+const DraggableColumnOptions = /* @__PURE__ */ __name(({
+  fields,
+  onVisibilityChange,
+  moveColumnPersist,
+  numVisible
+}) => {
+  const [sortedFields, setSortedFields] = useState(fields);
+  useEffect(() => {
+    setSortedFields(fields);
+  }, [fields]);
+  const mouseSensor = useSensor(MouseSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  });
+  const sensors = useSensors(mouseSensor);
+  const handleDragStart = /* @__PURE__ */ __name((event) => {
+    document.body.classList.add("column-dragging");
+    const { active: active2 } = event;
+    if (active2) {
+      const activeNode = document.querySelector(`[data-path="${active2.id}"]`);
+      if (activeNode) {
+        activeNode.classList.add("dragging");
+      }
+    }
+  }, "handleDragStart");
+  const handleDragEnd = /* @__PURE__ */ __name((event) => {
+    document.body.classList.remove("column-dragging");
+    const draggingItem = document.querySelector(".SortableItem.dragging");
+    if (draggingItem) {
+      draggingItem.classList.remove("dragging");
+    }
+    const { active: active2, over } = event;
+    if (!over || !active2 || active2.id === over.id) {
+      return;
+    }
+    const oldIndex = sortedFields.findIndex((f2) => f2.path === active2.id);
+    const newIndex = sortedFields.findIndex((f2) => f2.path === over.id);
+    const newSortedFields = arrayMove(sortedFields, oldIndex, newIndex);
+    setSortedFields(newSortedFields);
+    moveColumnPersist({ oldIndex, newIndex });
+  }, "handleDragEnd");
+  return /* @__PURE__ */ React__default.createElement(
+    DndContext,
+    {
+      sensors,
+      modifiers: [restrictToVerticalAxis],
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd
+    },
+    /* @__PURE__ */ React__default.createElement(
+      SortableContext,
+      {
+        items: sortedFields.map((field) => field.path),
+        strategy: verticalListSortingStrategy
+      },
+      /* @__PURE__ */ React__default.createElement("div", null, sortedFields.map((field, index2) => /* @__PURE__ */ React__default.createElement(
+        DraggableColumnOption,
+        {
+          key: field.path || index2,
+          field,
+          index: index2,
+          onVisibilityChange,
+          numVisible
+        }
+      )))
+    )
+  );
+}, "DraggableColumnOptions");
+const dragNoticeEl = /* @__PURE__ */ React.createElement(
+  "div",
+  {
+    className: Classes.TEXT_MUTED,
+    style: {
+      padding: 10,
+      fontSize: "12px"
+    }
+  },
+  /* @__PURE__ */ React.createElement(Icon, { icon: "info-sign", size: 12 }),
+  " Drag columns to reorder them"
+);
 const DisplayOptions = /* @__PURE__ */ __name(({
   compact,
   extraCompact,
@@ -34485,13 +34754,13 @@ const DisplayOptions = /* @__PURE__ */ __name(({
   resetDefaultVisibility = noop$4,
   updateColumnVisibility = noop$4,
   updateTableDisplayDensity,
+  moveColumnPersist = noop$4,
   showForcedHiddenColumns,
   setShowForcedHidden,
   hasOptionForForcedHidden,
   schema
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const [searchTerms, setSearchTerms] = useState({});
   const changeTableDensity = /* @__PURE__ */ __name((e) => {
     updateTableDisplayDensity(e.target.value);
     setIsOpen(false);
@@ -34501,85 +34770,10 @@ const DisplayOptions = /* @__PURE__ */ __name(({
     return null;
   }
   const { fields } = schema;
-  const fieldGroups = {};
-  const mainFields = [];
+  let numVisible = 0;
   fields.forEach((field) => {
-    if (field.hideInMenu) return;
-    if (!field.fieldGroup) return mainFields.push(field);
-    if (!fieldGroups[field.fieldGroup]) fieldGroups[field.fieldGroup] = [];
-    fieldGroups[field.fieldGroup].push(field);
+    if (!field.isHidden && field.type !== "action") numVisible++;
   });
-  let numVisible = 0;
-  const getFieldCheckbox = /* @__PURE__ */ __name((field, i2) => {
-    const { displayName, isHidden, isForcedHidden, path: path2, subFrag } = field;
-    if (isForcedHidden) return;
-    if (!isHidden) numVisible++;
-    return /* @__PURE__ */ React__default.createElement(
-      Checkbox,
-      {
-        name: `${path2}-${i2}`,
-        key: path2 || i2,
-        onChange: /* @__PURE__ */ __name(() => {
-          if (numVisible <= 1 && !isHidden) {
-            return window.toastr.warning(
-              "We have to display at least one column :)"
-            );
-          }
-          updateColumnVisibility({ shouldShow: isHidden, path: path2 });
-        }, "onChange"),
-        checked: !isHidden,
-        label: /* @__PURE__ */ React__default.createElement("span", { style: { display: "flex", marginTop: -17 } }, displayName, subFrag && /* @__PURE__ */ React__default.createElement(
-          InfoHelper,
-          {
-            icon: "warning-sign",
-            intent: "warning",
-            style: { marginLeft: 5 }
-          },
-          "Viewing this column may cause the table to load slower"
-        ))
-      }
-    );
-  }, "getFieldCheckbox");
-  let fieldGroupMenu;
-  if (!isEmpty$1(fieldGroups)) {
-    fieldGroupMenu = map$3(fieldGroups, (groupFields, groupName) => {
-      const searchTerm = searchTerms[groupName] || "";
-      const anyVisible = groupFields.some(
-        (field) => !field.isHidden && !field.isForcedHidden
-      );
-      const anyNotForcedHidden = groupFields.some(
-        (field) => !field.isForcedHidden
-      );
-      if (!anyNotForcedHidden) return;
-      return /* @__PURE__ */ React__default.createElement(MenuItem, { key: groupName, text: groupName }, /* @__PURE__ */ React__default.createElement(
-        InputGroup,
-        {
-          leftIcon: "search",
-          value: searchTerm,
-          onChange: /* @__PURE__ */ __name((e) => {
-            setSearchTerms((prev) => __spreadProps(__spreadValues({}, prev), {
-              [groupName]: e.target.value
-            }));
-          }, "onChange")
-        }
-      ), /* @__PURE__ */ React__default.createElement(
-        Button,
-        {
-          className: Classes.MINIMAL,
-          text: (anyVisible ? "Hide" : "Show") + " All",
-          style: { margin: "10px 0" },
-          onClick: /* @__PURE__ */ __name(() => {
-            updateColumnVisibility({
-              shouldShow: !anyVisible,
-              paths: groupFields.map((field) => field.path)
-            });
-          }, "onClick")
-        }
-      ), groupFields.filter(
-        (field) => startCase(getCCDisplayName(field)).toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
-      ).map(getFieldCheckbox));
-    });
-  }
   return /* @__PURE__ */ React__default.createElement(
     Popover,
     {
@@ -34606,14 +34800,22 @@ const DisplayOptions = /* @__PURE__ */ __name(({
         {
           style: {
             fontWeight: "bold",
-            marginBottom: 10,
+            marginBottom: 0,
             marginTop: 10,
             display: "flex"
           }
         },
         "Displayed Columns:  ",
         doNotSearchHiddenColumns && /* @__PURE__ */ React__default.createElement(InfoHelper, null, "Note: Hidden columns will NOT be used when searching the datatable")
-      ), /* @__PURE__ */ React__default.createElement("div", { style: { maxHeight: 260, overflowY: "auto", padding: 2 } }, mainFields.map(getFieldCheckbox)), /* @__PURE__ */ React__default.createElement("div", null, fieldGroupMenu), hasOptionForForcedHidden && /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 15 } }, /* @__PURE__ */ React__default.createElement(
+      ), dragNoticeEl, /* @__PURE__ */ React__default.createElement("div", { style: { maxHeight: 360, overflowY: "auto", padding: 2 } }, /* @__PURE__ */ React__default.createElement(
+        DraggableColumnOptions,
+        {
+          fields,
+          onVisibilityChange: updateColumnVisibility,
+          moveColumnPersist,
+          numVisible
+        }
+      )), hasOptionForForcedHidden && /* @__PURE__ */ React__default.createElement("div", { style: { marginTop: 15 } }, /* @__PURE__ */ React__default.createElement(
         Switch,
         {
           label: "Show Empty Columns",
@@ -34621,24 +34823,15 @@ const DisplayOptions = /* @__PURE__ */ __name(({
           onChange: toggleForcedHidden
         }
       )), /* @__PURE__ */ React__default.createElement(
-        "div",
+        Button,
         {
-          style: {
-            width: "100%",
-            display: "flex",
-            justifyContent: "flex-end"
-          }
+          style: { marginTop: 5 },
+          onClick: resetDefaultVisibility,
+          title: "Display Options",
+          icon: "reset",
+          minimal: true
         },
-        /* @__PURE__ */ React__default.createElement(
-          Button,
-          {
-            onClick: resetDefaultVisibility,
-            title: "Display Options",
-            icon: "reset",
-            minimal: true
-          },
-          "Reset Column Visibilites"
-        )
+        "Reset Column Visibilites"
       )))
     },
     /* @__PURE__ */ React__default.createElement(
@@ -34665,22 +34858,22 @@ function DisabledLoadingComponent({ disabled, loading, loadingText }) {
   );
 }
 __name(DisabledLoadingComponent, "DisabledLoadingComponent");
-const restrictToHorizontalAxis = /* @__PURE__ */ __name((_ref) => {
-  let {
-    transform
-  } = _ref;
-  return __spreadProps(__spreadValues({}, transform), {
-    y: 0
-  });
-}, "restrictToHorizontalAxis");
 const CustomTheadComponent = /* @__PURE__ */ __name(({
   children: _children,
   className,
-  onSortEnd,
-  onSortStart,
+  moveColumn,
+  sortedItemsFull,
   style
 }) => {
   const children = _children.props.children;
+  const [sortedItems, setSortedItems] = useState(
+    () => children.map((c2) => {
+      return c2.props.path || c2.key.split("-")[1];
+    })
+  );
+  useEffect(() => {
+    setSortedItems(children.map((c2) => c2.props.path || c2.key.split("-")[1]));
+  }, [children]);
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: {
       distance: 10
@@ -34695,15 +34888,17 @@ const CustomTheadComponent = /* @__PURE__ */ __name(({
     if (active2.id === over.id) {
       return;
     }
-    onSortEnd({
-      oldIndex: parseInt(active2.id),
-      newIndex: parseInt(over.id)
-    });
+    const oldPath = active2.id;
+    const newPath = over.id;
+    const oldIndex = sortedItemsFull.indexOf(oldPath);
+    const newIndex = sortedItemsFull.indexOf(newPath);
+    const newSortedItems = arrayMove(sortedItemsFull, oldIndex, newIndex);
+    setSortedItems(newSortedItems);
+    moveColumn({ oldIndex, newIndex });
   }, "handleDragEnd");
   return /* @__PURE__ */ React__default.createElement(
     DndContext,
     {
-      onDragStart: onSortStart,
       onDragEnd: handleDragEnd,
       modifiers: [restrictToHorizontalAxis],
       sensors
@@ -34711,36 +34906,31 @@ const CustomTheadComponent = /* @__PURE__ */ __name(({
     /* @__PURE__ */ React__default.createElement("div", { className: "rt-thead " + className, style }, /* @__PURE__ */ React__default.createElement("div", { className: "rt-tr" }, /* @__PURE__ */ React__default.createElement(
       SortableContext,
       {
-        items: children.map((_2, index2) => `${index2}`),
+        items: sortedItems,
         strategy: horizontalListSortingStrategy
       },
       children
     )))
   );
 }, "CustomTheadComponent");
-const SortableColumns = /* @__PURE__ */ __name(({ className, style, children, moveColumn }) => {
+const SortableColumns = /* @__PURE__ */ __name(({
+  className,
+  style,
+  children,
+  moveColumn,
+  sortedItemsFull
+}) => {
   const shouldCancelStart = /* @__PURE__ */ __name((e) => {
     const className2 = e.target.className;
     return e.target instanceof SVGElement || className2.indexOf("rt-resizer") > -1;
   }, "shouldCancelStart");
-  const onSortEnd = /* @__PURE__ */ __name((...args) => {
-    const { oldIndex, newIndex } = args[0];
-    document.body.classList.remove("drag-active");
-    moveColumn({
-      oldIndex,
-      newIndex
-    });
-  }, "onSortEnd");
-  const onSortStart = /* @__PURE__ */ __name(() => {
-    document.body.classList.add("drag-active");
-  }, "onSortStart");
   return /* @__PURE__ */ React__default.createElement(
     CustomTheadComponent,
     {
       className,
       style,
-      onSortStart,
-      onSortEnd,
+      sortedItemsFull,
+      moveColumn,
       helperClass: "above-dialog",
       shouldCancelStart
     },
@@ -37204,7 +37394,6 @@ __name(getTableConfigFromStorage, "getTableConfigFromStorage");
 const viewColumn = {
   width: 35,
   noEllipsis: true,
-  hideInMenu: true,
   immovable: true,
   type: "action",
   render: /* @__PURE__ */ __name(() => {
@@ -51769,6 +51958,7 @@ const RenderColumnHeader = /* @__PURE__ */ __name(({
         e.persist();
         showContextMenu(
           [
+            dragNoticeEl,
             {
               text: "Hide Column",
               disabled: onlyOneVisibleColumn,
@@ -52446,7 +52636,10 @@ const useColumns = /* @__PURE__ */ __name(({
       }, "getProps")
     });
   }
-  const tableColumns = columns.map((column) => {
+  const tableColumns = flatMap(columns, (column) => {
+    if (column.isHidden) {
+      return [];
+    }
     const tableColumn = __spreadProps(__spreadValues({}, column), {
       Header: RenderColumnHeader({
         onlyOneVisibleColumn: columns.length === 1,
@@ -52478,8 +52671,9 @@ const useColumns = /* @__PURE__ */ __name(({
       getHeaderProps: /* @__PURE__ */ __name(() => ({
         // needs to be a string because it is getting passed
         // to the dom
-        immovable: column.immovable ? "true" : "false",
-        columnindex: column.columnIndex
+        immovable: column.type === "action" || column.immovable ? "true" : "false",
+        columnindex: column.columnIndex,
+        path: column.path
       }), "getHeaderProps")
     });
     const noEllipsis = column.noEllipsis;
@@ -56687,7 +56881,6 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     "anyTouched",
     "blur"
   ]);
-  var _a;
   if (isTableParamsConnected && _tableParams && !_tableParams.entities) {
     throw new Error(
       `No entities array detected in tableParams object (<DataTable {...tableParams}/>). You need to call withQuery() after withTableParams() like: compose(withTableParams(), withQuery(something)).`
@@ -56767,12 +56960,11 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
   const {
     doNotCoercePageSize,
     isInfinite = isSimple && !withPaging,
-    syncDisplayOptionsToDb,
     urlConnected,
     withSelectedEntities: withSelectedEntities2
   } = props;
   const defaults = useMemo(() => {
-    var _a2;
+    var _a;
     const _defaults = __spreadValues({
       pageSize: controlled_pageSize || 25,
       order: [],
@@ -56788,11 +56980,11 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
         // }
       ]
     }, props.defaults || {});
-    if (isLocalCall && orderByFirstColumn && !((_a2 = _defaults == null ? void 0 : _defaults.order) == null ? void 0 : _a2.length)) {
+    if (isLocalCall && orderByFirstColumn && !((_a = _defaults == null ? void 0 : _defaults.order) == null ? void 0 : _a.length)) {
       const r2 = [getCCDisplayName(convertedSchema.fields[0])];
       _defaults.order = r2;
     }
-    if (!syncDisplayOptionsToDb && userSetPageSize) {
+    if (userSetPageSize) {
       _defaults.pageSize = userSetPageSize;
     }
     return _defaults;
@@ -56802,7 +56994,6 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     isLocalCall,
     orderByFirstColumn,
     props.defaults,
-    syncDisplayOptionsToDb,
     userSetPageSize
   ]);
   const selectedEntities = withSelectedEntities2 ? getRecordsFromIdMap(reduxFormSelectedEntityIdMap) : void 0;
@@ -56900,8 +57091,6 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     controlled_setPage,
     controlled_setPageSize,
     controlled_total,
-    currentUser,
-    deleteTableConfiguration,
     disabled = false,
     disableSetPageSize,
     doNotShowEmptyRows,
@@ -56978,8 +57167,6 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     tableConfigurations,
     tableName,
     topLeftItems,
-    upsertFieldOption,
-    upsertTableConfiguration,
     variables,
     withCheckboxes = false,
     withDisplayOptions,
@@ -57036,11 +57223,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
   useEffect(() => {
     if (withDisplayOptions) {
       let newTableConfig = {};
-      if (syncDisplayOptionsToDb) {
-        newTableConfig = tableConfigurations && tableConfigurations[0];
-      } else {
-        newTableConfig = getTableConfigFromStorage(formName);
-      }
+      newTableConfig = getTableConfigFromStorage(formName);
       setTableConfig((prev) => {
         if (!newTableConfig) {
           newTableConfig = {
@@ -57061,7 +57244,6 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     // If the schema changes we want to take into account the synced tableConfig again
     formName,
     setTableConfig,
-    syncDisplayOptionsToDb,
     tableConfigurations,
     withDisplayOptions,
     noExcessiveCheck
@@ -57109,8 +57291,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
         }
         if (noValsForField && entities.length) {
           return __spreadProps(__spreadValues({}, field), {
-            isHidden: true,
-            isForcedHidden: true
+            isHidden: true
           });
         } else if (fieldOpt) {
           return __spreadProps(__spreadValues({}, field), {
@@ -57164,6 +57345,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     withDisplayOptions,
     recordIdToIsVisibleMap
   ]);
+  const [columns, setColumns] = useState([]);
   const {
     moveColumnPersist,
     persistPageSize,
@@ -57180,69 +57362,37 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     let resizePersist2 = noop$4;
     if (withDisplayOptions) {
       const fieldOptsByPath = keyBy(tableConfig.fieldOptions, "path");
-      if (syncDisplayOptionsToDb) {
-        let tableConfigurationId;
-        resetDefaultVisibility2 = /* @__PURE__ */ __name(function() {
-          tableConfigurationId = tableConfig.id;
-          if (tableConfigurationId) {
-            deleteTableConfiguration(tableConfigurationId);
-          }
-        }, "resetDefaultVisibility2");
-        updateColumnVisibility2 = /* @__PURE__ */ __name(function({ shouldShow, path: path2 }) {
-          if (tableConfigurationId) {
-            const existingFieldOpt = fieldOptsByPath[path2] || {};
-            upsertFieldOption({
-              id: existingFieldOpt.id,
-              path: path2,
-              isHidden: !shouldShow,
-              tableConfigurationId
-            });
-          } else {
-            upsertTableConfiguration({
-              userId: currentUser.user.id,
-              formName,
-              fieldOptions: [
-                {
-                  path: path2,
-                  isHidden: !shouldShow
-                }
-              ]
-            });
-          }
-        }, "updateColumnVisibility2");
-      } else {
-        const syncStorage = /* @__PURE__ */ __name((newTableConfig) => {
-          setTableConfig(newTableConfig);
-          window.localStorage.setItem(formName, JSON.stringify(newTableConfig));
-        }, "syncStorage");
-        resetDefaultVisibility2 = /* @__PURE__ */ __name(function() {
-          setTableConfig({ fieldOptions: [] });
-          window.localStorage.removeItem(formName);
-        }, "resetDefaultVisibility2");
-        updateColumnVisibility2 = /* @__PURE__ */ __name(function({ path: path2, paths, shouldShow }) {
-          const newFieldOpts = __spreadValues({}, fieldOptsByPath);
-          const pathsToUse = paths ? paths : [path2];
-          pathsToUse.forEach((path22) => {
-            newFieldOpts[path22] = { path: path22, isHidden: !shouldShow };
-          });
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), { fieldOptions: toArray(newFieldOpts) }));
-        }, "updateColumnVisibility2");
-        updateTableDisplayDensity2 = /* @__PURE__ */ __name(function(density) {
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), { density }));
-        }, "updateTableDisplayDensity2");
-        persistPageSize2 = /* @__PURE__ */ __name(function(pageSize2) {
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), { userSetPageSize: pageSize2 }));
-        }, "persistPageSize2");
-        moveColumnPersist2 = /* @__PURE__ */ __name(function({ oldIndex, newIndex }) {
-          const columnOrderings = tableConfig.columnOrderings || schema.fields.map(({ path: path2 }) => path2);
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), {
-            columnOrderings: arrayMove(columnOrderings, oldIndex, newIndex)
-          }));
-        }, "moveColumnPersist2");
-        resizePersist2 = /* @__PURE__ */ __name(function(newResized) {
-          syncStorage(__spreadProps(__spreadValues({}, tableConfig), { resized: newResized }));
-        }, "resizePersist2");
-      }
+      const syncStorage = /* @__PURE__ */ __name((newTableConfig) => {
+        setTableConfig(newTableConfig);
+        window.localStorage.setItem(formName, JSON.stringify(newTableConfig));
+      }, "syncStorage");
+      resetDefaultVisibility2 = /* @__PURE__ */ __name(function() {
+        setTableConfig({ fieldOptions: [] });
+        window.localStorage.removeItem(formName);
+      }, "resetDefaultVisibility2");
+      updateColumnVisibility2 = /* @__PURE__ */ __name(function({ path: path2, paths, shouldShow }) {
+        const newFieldOpts = __spreadValues({}, fieldOptsByPath);
+        const pathsToUse = paths ? paths : [path2];
+        pathsToUse.forEach((path22) => {
+          newFieldOpts[path22] = { path: path22, isHidden: !shouldShow };
+        });
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), { fieldOptions: toArray(newFieldOpts) }));
+      }, "updateColumnVisibility2");
+      updateTableDisplayDensity2 = /* @__PURE__ */ __name(function(density) {
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), { density }));
+      }, "updateTableDisplayDensity2");
+      persistPageSize2 = /* @__PURE__ */ __name(function(pageSize2) {
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), { userSetPageSize: pageSize2 }));
+      }, "persistPageSize2");
+      moveColumnPersist2 = /* @__PURE__ */ __name(function({ oldIndex, newIndex }) {
+        const columnOrderings = tableConfig.columnOrderings || columns.map(({ path: path2 }) => path2);
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), {
+          columnOrderings: arrayMove(columnOrderings, oldIndex, newIndex)
+        }));
+      }, "moveColumnPersist2");
+      resizePersist2 = /* @__PURE__ */ __name(function(newResized) {
+        syncStorage(__spreadProps(__spreadValues({}, tableConfig), { resized: newResized }));
+      }, "resizePersist2");
     }
     return {
       moveColumnPersist: moveColumnPersist2,
@@ -57252,18 +57402,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
       updateColumnVisibility: updateColumnVisibility2,
       updateTableDisplayDensity: updateTableDisplayDensity2
     };
-  }, [
-    (_a = currentUser == null ? void 0 : currentUser.user) == null ? void 0 : _a.id,
-    deleteTableConfiguration,
-    formName,
-    setTableConfig,
-    schema.fields,
-    syncDisplayOptionsToDb,
-    tableConfig,
-    upsertFieldOption,
-    upsertTableConfiguration,
-    withDisplayOptions
-  ]);
+  }, [formName, setTableConfig, columns, tableConfig, withDisplayOptions]);
   let compact = _compact;
   let extraCompact = _extraCompact;
   if (withDisplayOptions && tableConfig.density) {
@@ -57569,8 +57708,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
   const waitUntilAllRowsAreRendered = useCallback(() => {
     return new Promise((resolve) => {
       const interval = setInterval(() => {
-        var _a2, _b;
-        const allRowEls = (_b = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b.querySelectorAll(".rt-tr-group");
+        var _a, _b;
+        const allRowEls = (_b = (_a = tableRef.current) == null ? void 0 : _a.tableRef) == null ? void 0 : _b.querySelectorAll(".rt-tr-group");
         if ((allRowEls == null ? void 0 : allRowEls.length) === entities.length) {
           clearInterval(interval);
           resolve();
@@ -57887,7 +58026,6 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     ]
   );
   const { handleKeyDown, handleKeyUp } = useHotkeys(hotKeys);
-  const [columns, setColumns] = useState([]);
   const [fullscreen, setFullscreen] = useState(false);
   const [selectingAll, setSelectingAll] = useState(false);
   useEffect(() => {
@@ -58068,16 +58206,15 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     addFilters(additionalFilters);
   }, [additionalFilters]);
   useEffect(() => {
-    setColumns(
-      schema.fields ? schema.fields.reduce((col, field, i2) => {
-        if (field.isHidden) {
-          return col;
-        }
-        return col.concat(__spreadProps(__spreadValues({}, field), {
-          columnIndex: i2
-        }));
-      }, []) : []
-    );
+    const newCols = schema.fields ? schema.fields.reduce((columns2, field, i2) => {
+      if (field.isHidden) {
+        return columns2.concat(field);
+      }
+      return columns2.concat(__spreadProps(__spreadValues({}, field), {
+        columnIndex: i2
+      }));
+    }, []) : [];
+    setColumns(newCols);
   }, [schema == null ? void 0 : schema.fields]);
   const setSelectedIds = useCallback(
     (selectedIds2, scrollToFirst) => {
@@ -58146,25 +58283,19 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
   const TheadComponent = useCallback(
     ({ className: className2, style: style2, children: children2 }) => {
       const moveColumn = /* @__PURE__ */ __name(({ oldIndex, newIndex }) => {
-        let oldStateColumnIndex, newStateColumnIndex;
-        columns.forEach((column, i2) => {
-          if (oldIndex === column.columnIndex) oldStateColumnIndex = i2;
-          if (newIndex === column.columnIndex) newStateColumnIndex = i2;
-        });
-        const newColumns = arrayMove(
-          columns,
-          oldStateColumnIndex,
-          newStateColumnIndex
-        ).map((column, i2) => {
-          return __spreadProps(__spreadValues({}, column), {
-            columnIndex: i2
-          });
-        });
+        const newColumns = arrayMove(columns, oldIndex, newIndex).map(
+          (column, i2) => {
+            return __spreadProps(__spreadValues({}, column), {
+              columnIndex: i2
+            });
+          }
+        );
         setColumns(newColumns);
       }, "moveColumn");
       return /* @__PURE__ */ React__default.createElement(
         SortableColumns,
         {
+          sortedItemsFull: columns.map((c2) => c2.path),
           className: className2,
           style: style2,
           moveColumn: moveColumnPersist || moveColumn
@@ -58197,8 +58328,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
     });
   }, "addEntitiesToSelection");
   const refocusTable = useCallback(() => {
-    var _a2, _b;
-    const table2 = (_b = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b.closest(
+    var _a, _b;
+    const table2 = (_b = (_a = tableRef.current) == null ? void 0 : _a.tableRef) == null ? void 0 : _b.closest(
       ".data-table-container>div"
     );
     table2 == null ? void 0 : table2.focus();
@@ -59032,8 +59163,8 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
   });
   const scrollToTop = useCallback(
     () => {
-      var _a2, _b, _c, _d, _e, _f;
-      return (_f = (_e = (_d = (_c = (_b = (_a2 = tableRef.current) == null ? void 0 : _a2.tableRef) == null ? void 0 : _b.children) == null ? void 0 : _c[0]) == null ? void 0 : _d.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.scrollIntoView();
+      var _a, _b, _c, _d, _e, _f;
+      return (_f = (_e = (_d = (_c = (_b = (_a = tableRef.current) == null ? void 0 : _a.tableRef) == null ? void 0 : _b.children) == null ? void 0 : _c[0]) == null ? void 0 : _d.children) == null ? void 0 : _e[0]) == null ? void 0 : _f.scrollIntoView();
     },
     []
   );
@@ -59046,7 +59177,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
         noVirtual,
         className: classNames({
           isCellEditable,
-          "loading": isLoading,
+          loading: isLoading,
           "tg-table-loading": isLoading,
           "tg-table-disabled": disabled
         }),
@@ -59150,10 +59281,10 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
         }, isCellEditable && {
           tabIndex: -1,
           onKeyDown: /* @__PURE__ */ __name((e) => {
-            var _a2, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h;
             const isTabKey = e.key === "Tab";
             const isArrowKey = e.key.startsWith("Arrow");
-            if (isArrowKey && ((_a2 = e.target) == null ? void 0 : _a2.tagName) !== "INPUT" || isTabKey) {
+            if (isArrowKey && ((_a = e.target) == null ? void 0 : _a.tagName) !== "INPUT" || isTabKey) {
               const left2 = e.key === "ArrowLeft";
               const up = e.key === "ArrowUp";
               const down = e.key === "ArrowDown" || e.key === "Enter";
@@ -59432,6 +59563,7 @@ const DataTable = /* @__PURE__ */ __name((_M) => {
               resetDefaultVisibility,
               updateColumnVisibility,
               updateTableDisplayDensity,
+              moveColumnPersist,
               showForcedHiddenColumns,
               setShowForcedHidden,
               hasOptionForForcedHidden: withDisplayOptions && (isSimple || isInfinite),
@@ -67330,7 +67462,6 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
     orderByFirstColumn,
     pageSize,
     schema,
-    syncDisplayOptionsToDb,
     tableParams: _tableParams,
     urlConnected,
     withDisplayOptions,
@@ -67418,12 +67549,12 @@ const useTableParams = /* @__PURE__ */ __name((props) => {
     const _tableConfig = getTableConfigFromStorage(formName);
     const userSetPageSize = (_tableConfig == null ? void 0 : _tableConfig.userSetPageSize) && parseInt(_tableConfig.userSetPageSize, 10);
     let _defaultsToUse = defaults;
-    if (!syncDisplayOptionsToDb && userSetPageSize) {
+    if (userSetPageSize) {
       _defaultsToUse = _defaultsToUse || {};
       _defaultsToUse.pageSize = userSetPageSize;
     }
     return _defaultsToUse;
-  }, [defaults, formName, syncDisplayOptionsToDb]);
+  }, [defaults, formName]);
   const passingProps = useMemo(
     () => __spreadProps(__spreadValues({
       formName: "tgDataTable"
@@ -69430,10 +69561,10 @@ var Resizer = (
     }
     __name(Resizer2, "Resizer");
     Resizer2.prototype.render = function() {
-      return React.createElement("div", { className: this.props.className || "", style: __assign$2(__assign$2({ position: "absolute", userSelect: "none" }, styles[this.props.direction]), this.props.replaceStyles || {}), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children);
+      return React$1.createElement("div", { className: this.props.className || "", style: __assign$2(__assign$2({ position: "absolute", userSelect: "none" }, styles[this.props.direction]), this.props.replaceStyles || {}), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children);
     };
     return Resizer2;
-  }(React.PureComponent)
+  }(React$1.PureComponent)
 );
 var src = { exports: {} };
 var hasRequiredSrc;
@@ -70210,11 +70341,11 @@ var Resizable = (
       }
       var resizers = Object.keys(enable).map(function(dir) {
         if (enable[dir] !== false) {
-          return React.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null);
+          return React$1.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null);
         }
         return null;
       });
-      return React.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers);
+      return React$1.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers);
     };
     Resizable2.prototype.render = function() {
       var _this = this;
@@ -70230,10 +70361,10 @@ var Resizable = (
         style.flexBasis = this.state.flexBasis;
       }
       var Wrapper = this.props.as || "div";
-      return React.createElement(
+      return React$1.createElement(
         Wrapper,
         __assign$1({ ref: this.ref, style, className: this.props.className }, extendsProps),
-        this.state.isResizing && React.createElement("div", { style: this.state.backgroundStyle }),
+        this.state.isResizing && React$1.createElement("div", { style: this.state.backgroundStyle }),
         this.props.children,
         this.renderResizer()
       );
@@ -70266,7 +70397,7 @@ var Resizable = (
       snapGap: 0
     };
     return Resizable2;
-  }(React.PureComponent)
+  }(React$1.PureComponent)
 );
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.