@teselagen/ui 0.5.23-beta.15 → 0.5.23-beta.17

package/index.cjs.js

@@ -19673,30 +19673,6 @@ var dayjs_min = { exports: {} };
 var dayjs_minExports = dayjs_min.exports;
 const dayjs = /* @__PURE__ */ getDefaultExportFromCjs(dayjs_minExports);
 const defaultPageSizes = [5, 10, 15, 25, 50, 100, 200, 400];
-function getMergedOpts(topLevel = {}, instanceLevel = {}) {
-  const merged = __spreadValues(__spreadValues({}, topLevel), instanceLevel);
-  return __spreadProps(__spreadValues({
-    formName: "tgDataTable"
-  }, merged), {
-    pageSize: merged.controlled_pageSize || merged.pageSize,
-    defaults: __spreadValues(__spreadValues({
-      pageSize: merged.controlled_pageSize || 25,
-      order: [],
-      //[-name, statusCode] //an array of camelCase display names with - sign to denote reverse
-      searchTerm: "",
-      page: 1,
-      filters: [
-        //filters look like this:
-        // {
-        //   selectedFilter: 'textContains', //camel case
-        //   filterOn: ccDisplayName, //camel case display name if available and string, otherwise path
-        //   filterValue: 'thomas',
-        // }
-      ]
-    }, topLevel.defaults || {}), instanceLevel.defaults || {})
-  });
-}
-__name(getMergedOpts, "getMergedOpts");
 function safeStringify(val) {
   if (val !== null && typeof val === "object") {
     return JSON.stringify(val);
@@ -47136,13 +47112,13 @@ const DropdownCell = /* @__PURE__ */ __name(({
   );
 }, "DropdownCell");
 const EditableCell = /* @__PURE__ */ __name(({
-  value,
-  setValue,
   cancelEdit,
   dataTest,
   finishEdit,
-  isNumeric
+  isNumeric,
+  initialValue
 }) => {
+  const [value, setValue] = React$1.useState(initialValue);
   const inputRef = React$1.useRef(null);
   React$1.useEffect(() => {
     if (inputRef.current) {
@@ -47556,11 +47532,9 @@ const RenderCell = /* @__PURE__ */ __name(({
   isCellEditable,
   isEntityDisabled,
   finishCellEdit,
+  formName,
   noEllipsis,
-  editingCell,
   cancelCellEdit,
-  editableCellValue,
-  setEditableCellValue,
   getCellHoverText,
   selectedCells,
   isSelectionARectangle,
@@ -47570,32 +47544,24 @@ const RenderCell = /* @__PURE__ */ __name(({
   args
 }) => {
   var _a;
+  const editingCell = reactRedux.useSelector(
+    (state) => {
+      var _a2, _b, _c;
+      return (_c = (_b = (_a2 = state.form) == null ? void 0 : _a2[formName]) == null ? void 0 : _b.values) == null ? void 0 : _c.editingCell;
+    }
+  );
   const [row] = args;
   const rowId = getIdOrCodeOrIndex(row.original, row.index);
   const cellId = `${rowId}:${row.column.path}`;
+  const isEditingCell = editingCell === cellId;
   let val = oldFunc(...args);
   const oldVal = val;
   const text2 = getCopyTextForCell(val, row, column);
-  const isBool = column.type === "boolean";
   const dataTest = {
     "data-test": "tgCell_" + column.path
   };
   const fullValue = (_a = row.original) == null ? void 0 : _a[row.column.path];
-  if (isCellEditable && isBool) {
-    val = /* @__PURE__ */ React$1.createElement(
-      core.Checkbox,
-      {
-        disabled: isEntityDisabled(row.original),
-        className: "tg-cell-edit-boolean-checkbox",
-        checked: oldVal === "True",
-        onChange: (e2) => {
-          const checked = e2.target.checked;
-          finishCellEdit(cellId, checked);
-        }
-      }
-    );
-    noEllipsis = true;
-  } else if (editingCell === cellId) {
+  if (isEditingCell) {
     if (column.type === "genericSelect") {
       const GenericSelectComp = column.GenericSelectComp;
       return /* @__PURE__ */ React$1.createElement(
@@ -47631,8 +47597,6 @@ const RenderCell = /* @__PURE__ */ __name(({
       return /* @__PURE__ */ React$1.createElement(
         EditableCell,
         {
-          value: editableCellValue,
-          setValue: setEditableCellValue,
           dataTest,
           cancelEdit: cancelCellEdit,
           isNumeric: column.type === "number",
@@ -47644,6 +47608,22 @@ const RenderCell = /* @__PURE__ */ __name(({
       );
     }
   }
+  const isBool = column.type === "boolean";
+  if (isCellEditable && isBool) {
+    val = /* @__PURE__ */ React$1.createElement(
+      core.Checkbox,
+      {
+        disabled: isEntityDisabled(row.original),
+        className: "tg-cell-edit-boolean-checkbox",
+        checked: oldVal === "True",
+        onChange: (e2) => {
+          const checked = e2.target.checked;
+          finishCellEdit(cellId, checked);
+        }
+      }
+    );
+    noEllipsis = true;
+  }
   let title = text2;
   if (getCellHoverText)
     title = getCellHoverText(...args);
@@ -47710,20 +47690,19 @@ const RenderCell = /* @__PURE__ */ __name(({
     }
   ));
 }, "RenderCell");
-const RenderColumns = /* @__PURE__ */ __name(({
+const useColumns = /* @__PURE__ */ __name(({
   addFilters,
   cellRenderer,
-  change,
   columns,
   currentParams,
   compact: compact3,
-  editableCellValue,
   editingCell,
   editingCellSelectAll,
   entities,
   expandedEntityIdMap,
   extraCompact,
   filters,
+  formName,
   getCellHoverText,
   isCellEditable,
   isEntityDisabled,
@@ -47747,7 +47726,6 @@ const RenderColumns = /* @__PURE__ */ __name(({
   removeSingleFilter = noop$3,
   schema,
   selectedCells,
-  setEditableCellValue,
   setEditingCell,
   setExpandedEntityIdMap,
   setNewParams,
@@ -47764,220 +47742,332 @@ const RenderColumns = /* @__PURE__ */ __name(({
   withFilter: _withFilter,
   withSort = true
 }) => {
+  const dispatch = reactRedux.useDispatch();
+  const change = React$1.useCallback(
+    (...args) => dispatch(reduxForm.change(formName, ...args)),
+    [dispatch, formName]
+  );
   const withFilter = _withFilter === void 0 ? !isSimple : _withFilter;
-  const onDragEnd = /* @__PURE__ */ __name((cellsToSelect) => {
-    const [primaryRowId, primaryCellPath] = primarySelectedCellId.split(":");
-    const pathToField = getFieldPathToField(schema);
-    const { selectedPaths, selectionGrid } = isSelectionARectangle();
-    let allSelectedPaths = selectedPaths;
-    if (!allSelectedPaths) {
-      allSelectedPaths = [primaryCellPath];
-    }
-    updateEntitiesHelper(entities, (entities2) => {
-      var _a, _b;
-      let newSelectedCells;
-      if (selectedPaths) {
-        newSelectedCells = __spreadValues({}, selectedCells);
-      } else {
-        newSelectedCells = {
-          [primarySelectedCellId]: PRIMARY_SELECTED_VAL
-        };
+  const onDragEnd = React$1.useCallback(
+    (cellsToSelect) => {
+      const [primaryRowId, primaryCellPath] = primarySelectedCellId.split(":");
+      const pathToField = getFieldPathToField(schema);
+      const { selectedPaths, selectionGrid } = isSelectionARectangle();
+      let allSelectedPaths = selectedPaths;
+      if (!allSelectedPaths) {
+        allSelectedPaths = [primaryCellPath];
       }
-      const newCellValidate = __spreadValues({}, reduxFormCellValidation);
-      const entityMap = getEntityIdToEntity(entities2);
-      const { e: selectedEnt } = entityMap[primaryRowId];
-      const firstCellToSelectRowIndex = (_b = entityMap[(_a = cellsToSelect[0]) == null ? void 0 : _a.split(":")[0]]) == null ? void 0 : _b.i;
-      const pathToIndex = getFieldPathToIndex(schema);
-      allSelectedPaths.forEach((selectedPath) => {
-        const column = pathToField[selectedPath];
-        const selectedCellVal = getCellVal(selectedEnt, selectedPath, column);
-        const cellIndexOfSelectedPath = pathToIndex[selectedPath];
-        let incrementStart;
-        let incrementPrefix;
-        let incrementPad = 0;
-        if (column.type === "string" || column.type === "number") {
-          const cellNumStr = getNumberStrAtEnd(selectedCellVal);
-          const cellNum = Number(cellNumStr);
-          const entityAbovePrimaryCell = entities2[entityMap[primaryRowId].i - 1];
-          if (cellNumStr !== null && !isNaN(cellNum)) {
-            if (entityAbovePrimaryCell && (!selectionGrid || selectionGrid.length <= 1)) {
-              const cellAboveVal = get$5(
-                entityAbovePrimaryCell,
-                selectedPath,
-                ""
-              );
-              const cellAboveNumStr = getNumberStrAtEnd(cellAboveVal);
-              const cellAboveNum = Number(cellAboveNumStr);
-              if (!isNaN(cellAboveNum)) {
-                const isIncremental = cellNum - cellAboveNum === 1;
-                if (isIncremental) {
-                  const cellTextNoNum = stripNumberAtEnd(selectedCellVal);
-                  const sameText = stripNumberAtEnd(cellAboveVal) === cellTextNoNum;
-                  if (sameText) {
-                    incrementStart = cellNum + 1;
-                    incrementPrefix = cellTextNoNum || "";
-                    if (cellNumStr && cellNumStr.startsWith("0")) {
-                      incrementPad = cellNumStr.length;
+      updateEntitiesHelper(entities, (entities2) => {
+        var _a, _b;
+        let newSelectedCells;
+        if (selectedPaths) {
+          newSelectedCells = __spreadValues({}, selectedCells);
+        } else {
+          newSelectedCells = {
+            [primarySelectedCellId]: PRIMARY_SELECTED_VAL
+          };
+        }
+        const newCellValidate = __spreadValues({}, reduxFormCellValidation);
+        const entityMap = getEntityIdToEntity(entities2);
+        const { e: selectedEnt } = entityMap[primaryRowId];
+        const firstCellToSelectRowIndex = (_b = entityMap[(_a = cellsToSelect[0]) == null ? void 0 : _a.split(":")[0]]) == null ? void 0 : _b.i;
+        const pathToIndex = getFieldPathToIndex(schema);
+        allSelectedPaths.forEach((selectedPath) => {
+          const column = pathToField[selectedPath];
+          const selectedCellVal = getCellVal(selectedEnt, selectedPath, column);
+          const cellIndexOfSelectedPath = pathToIndex[selectedPath];
+          let incrementStart;
+          let incrementPrefix;
+          let incrementPad = 0;
+          if (column.type === "string" || column.type === "number") {
+            const cellNumStr = getNumberStrAtEnd(selectedCellVal);
+            const cellNum = Number(cellNumStr);
+            const entityAbovePrimaryCell = entities2[entityMap[primaryRowId].i - 1];
+            if (cellNumStr !== null && !isNaN(cellNum)) {
+              if (entityAbovePrimaryCell && (!selectionGrid || selectionGrid.length <= 1)) {
+                const cellAboveVal = get$5(
+                  entityAbovePrimaryCell,
+                  selectedPath,
+                  ""
+                );
+                const cellAboveNumStr = getNumberStrAtEnd(cellAboveVal);
+                const cellAboveNum = Number(cellAboveNumStr);
+                if (!isNaN(cellAboveNum)) {
+                  const isIncremental = cellNum - cellAboveNum === 1;
+                  if (isIncremental) {
+                    const cellTextNoNum = stripNumberAtEnd(selectedCellVal);
+                    const sameText = stripNumberAtEnd(cellAboveVal) === cellTextNoNum;
+                    if (sameText) {
+                      incrementStart = cellNum + 1;
+                      incrementPrefix = cellTextNoNum || "";
+                      if (cellNumStr && cellNumStr.startsWith("0")) {
+                        incrementPad = cellNumStr.length;
+                      }
                     }
                   }
                 }
               }
-            }
-            if (incrementStart === void 0) {
-              const draggingDown = firstCellToSelectRowIndex > (selectionGrid == null ? void 0 : selectionGrid[0][0].rowIndex);
-              if (selectedPaths && draggingDown) {
-                let checkIncrement;
-                let prefix;
-                let maybePad;
-                const allAreIncrementing = selectionGrid.every((row) => {
-                  const cellInfo = row[cellIndexOfSelectedPath];
-                  if (!cellInfo)
-                    return false;
-                  const { cellId } = cellInfo;
-                  const [rowId] = cellId.split(":");
-                  const cellVal = getCellVal(
-                    entityMap[rowId].e,
-                    selectedPath,
-                    pathToField[selectedPath]
-                  );
-                  const cellNumStr2 = getNumberStrAtEnd(cellVal);
-                  const cellNum2 = Number(cellNumStr2);
-                  const cellTextNoNum = stripNumberAtEnd(cellVal);
-                  if (cellNumStr2 == null ? void 0 : cellNumStr2.startsWith("0")) {
-                    maybePad = cellNumStr2.length;
-                  }
-                  if (cellTextNoNum && !prefix) {
-                    prefix = cellTextNoNum;
-                  }
-                  if (cellTextNoNum && prefix !== cellTextNoNum) {
-                    return false;
-                  }
-                  if (!isNaN(cellNum2)) {
-                    if (!checkIncrement) {
-                      checkIncrement = cellNum2;
-                      return true;
+              if (incrementStart === void 0) {
+                const draggingDown = firstCellToSelectRowIndex > (selectionGrid == null ? void 0 : selectionGrid[0][0].rowIndex);
+                if (selectedPaths && draggingDown) {
+                  let checkIncrement;
+                  let prefix;
+                  let maybePad;
+                  const allAreIncrementing = selectionGrid.every((row) => {
+                    const cellInfo = row[cellIndexOfSelectedPath];
+                    if (!cellInfo)
+                      return false;
+                    const { cellId } = cellInfo;
+                    const [rowId] = cellId.split(":");
+                    const cellVal = getCellVal(
+                      entityMap[rowId].e,
+                      selectedPath,
+                      pathToField[selectedPath]
+                    );
+                    const cellNumStr2 = getNumberStrAtEnd(cellVal);
+                    const cellNum2 = Number(cellNumStr2);
+                    const cellTextNoNum = stripNumberAtEnd(cellVal);
+                    if (cellNumStr2 == null ? void 0 : cellNumStr2.startsWith("0")) {
+                      maybePad = cellNumStr2.length;
+                    }
+                    if (cellTextNoNum && !prefix) {
+                      prefix = cellTextNoNum;
+                    }
+                    if (cellTextNoNum && prefix !== cellTextNoNum) {
+                      return false;
+                    }
+                    if (!isNaN(cellNum2)) {
+                      if (!checkIncrement) {
+                        checkIncrement = cellNum2;
+                        return true;
+                      } else {
+                        return ++checkIncrement === cellNum2;
+                      }
                     } else {
-                      return ++checkIncrement === cellNum2;
+                      return false;
                     }
-                  } else {
-                    return false;
+                  });
+                  if (allAreIncrementing) {
+                    incrementStart = checkIncrement + 1;
+                    incrementPrefix = prefix || "";
+                    incrementPad = maybePad;
                   }
-                });
-                if (allAreIncrementing) {
-                  incrementStart = checkIncrement + 1;
-                  incrementPrefix = prefix || "";
-                  incrementPad = maybePad;
                 }
               }
             }
           }
-        }
-        let firstSelectedCellRowIndex;
-        if (selectionGrid) {
-          selectionGrid[0].some((cell) => {
-            if (cell) {
-              firstSelectedCellRowIndex = cell.rowIndex;
-              return true;
-            }
-            return false;
-          });
-        }
-        cellsToSelect.forEach((cellId) => {
-          const [rowId, cellPath] = cellId.split(":");
-          if (cellPath !== selectedPath)
-            return;
-          newSelectedCells[cellId] = true;
-          const { e: entityToUpdate, i: rowIndex } = entityMap[rowId] || {};
-          if (entityToUpdate) {
-            delete entityToUpdate._isClean;
-            let newVal;
-            if (incrementStart !== void 0) {
-              const num = incrementStart++;
-              newVal = incrementPrefix + padStart(num, incrementPad, "0");
-            } else {
-              if (selectionGrid && selectionGrid.length > 1) {
-                const draggingDown = rowIndex > firstSelectedCellRowIndex;
-                const cellIndex = pathToIndex[cellPath];
-                let cellIdToCopy;
-                if (draggingDown) {
-                  const { cellId: cellId2 } = selectionGrid[(rowIndex - firstSelectedCellRowIndex) % selectionGrid.length].find((g2) => g2 && g2.cellIndex === cellIndex);
-                  cellIdToCopy = cellId2;
+          let firstSelectedCellRowIndex;
+          if (selectionGrid) {
+            selectionGrid[0].some((cell) => {
+              if (cell) {
+                firstSelectedCellRowIndex = cell.rowIndex;
+                return true;
+              }
+              return false;
+            });
+          }
+          cellsToSelect.forEach((cellId) => {
+            const [rowId, cellPath] = cellId.split(":");
+            if (cellPath !== selectedPath)
+              return;
+            newSelectedCells[cellId] = true;
+            const { e: entityToUpdate, i: rowIndex } = entityMap[rowId] || {};
+            if (entityToUpdate) {
+              delete entityToUpdate._isClean;
+              let newVal;
+              if (incrementStart !== void 0) {
+                const num = incrementStart++;
+                newVal = incrementPrefix + padStart(num, incrementPad, "0");
+              } else {
+                if (selectionGrid && selectionGrid.length > 1) {
+                  const draggingDown = rowIndex > firstSelectedCellRowIndex;
+                  const cellIndex = pathToIndex[cellPath];
+                  let cellIdToCopy;
+                  if (draggingDown) {
+                    const { cellId: cellId2 } = selectionGrid[(rowIndex - firstSelectedCellRowIndex) % selectionGrid.length].find((g2) => g2 && g2.cellIndex === cellIndex);
+                    cellIdToCopy = cellId2;
+                  } else {
+                    const lastIndexInGrid = selectionGrid[selectionGrid.length - 1][0].rowIndex;
+                    const { cellId: cellId2 } = selectionGrid[(rowIndex + lastIndexInGrid + 1) % selectionGrid.length].find((g2) => g2.cellIndex === cellIndex);
+                    cellIdToCopy = cellId2;
+                  }
+                  const [rowIdToCopy, cellPathToCopy] = cellIdToCopy.split(":");
+                  newVal = getCellVal(
+                    entityMap[rowIdToCopy].e,
+                    cellPathToCopy,
+                    pathToField[cellPathToCopy]
+                  );
                 } else {
-                  const lastIndexInGrid = selectionGrid[selectionGrid.length - 1][0].rowIndex;
-                  const { cellId: cellId2 } = selectionGrid[(rowIndex + lastIndexInGrid + 1) % selectionGrid.length].find((g2) => g2.cellIndex === cellIndex);
-                  cellIdToCopy = cellId2;
+                  newVal = selectedCellVal;
                 }
-                const [rowIdToCopy, cellPathToCopy] = cellIdToCopy.split(":");
-                newVal = getCellVal(
-                  entityMap[rowIdToCopy].e,
-                  cellPathToCopy,
-                  pathToField[cellPathToCopy]
-                );
-              } else {
-                newVal = selectedCellVal;
               }
+              const { error } = editCellHelper({
+                entity: entityToUpdate,
+                path: cellPath,
+                schema,
+                newVal
+              });
+              newCellValidate[cellId] = error;
             }
-            const { error } = editCellHelper({
-              entity: entityToUpdate,
-              path: cellPath,
-              schema,
-              newVal
-            });
-            newCellValidate[cellId] = error;
-          }
+          });
         });
+        updateValidation(entities2, newCellValidate);
+        setSelectedCells(newSelectedCells);
       });
-      updateValidation(entities2, newCellValidate);
-      setSelectedCells(newSelectedCells);
-    });
-  }, "onDragEnd");
-  const getCopyTextForCell = /* @__PURE__ */ __name((val, row = {}, column = {}) => {
-    let text2 = typeof val !== "string" ? row.value : val;
-    const record = row.original;
-    if (column.getClipboardData) {
-      text2 = column.getClipboardData(row.value, record, row);
-    } else if (column.getValueToFilterOn) {
-      text2 = column.getValueToFilterOn(record);
-    } else if (column.render) {
-      text2 = column.render(row.value, record, row, {
-        currentParams,
-        setNewParams
-      });
-    } else if (cellRenderer && cellRenderer[column.path]) {
-      text2 = cellRenderer[column.path](row.value, row.original, row, {
-        currentParams,
-        setNewParams
-      });
-    } else if (text2) {
-      text2 = React$1.isValidElement(text2) ? text2 : String(text2);
-    }
-    const getTextFromElementOrLink = /* @__PURE__ */ __name((text22) => {
-      var _a, _b;
-      if (React$1.isValidElement(text22)) {
-        if ((_a = text22.props) == null ? void 0 : _a.to) {
-          return urljoin(
-            window.location.origin,
-            ((_b = window.frontEndConfig) == null ? void 0 : _b.clientBasePath) || "",
-            text22.props.to
-          );
+    },
+    [
+      entities,
+      isSelectionARectangle,
+      primarySelectedCellId,
+      reduxFormCellValidation,
+      schema,
+      selectedCells,
+      setSelectedCells,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
+  const getCopyTextForCell = React$1.useCallback(
+    (val, row = {}, column = {}) => {
+      let text2 = typeof val !== "string" ? row.value : val;
+      const record = row.original;
+      if (column.getClipboardData) {
+        text2 = column.getClipboardData(row.value, record, row);
+      } else if (column.getValueToFilterOn) {
+        text2 = column.getValueToFilterOn(record);
+      } else if (column.render) {
+        text2 = column.render(row.value, record, row, {
+          currentParams,
+          setNewParams
+        });
+      } else if (cellRenderer && cellRenderer[column.path]) {
+        text2 = cellRenderer[column.path](row.value, row.original, row, {
+          currentParams,
+          setNewParams
+        });
+      } else if (text2) {
+        text2 = React$1.isValidElement(text2) ? text2 : String(text2);
+      }
+      const getTextFromElementOrLink = /* @__PURE__ */ __name((text22) => {
+        var _a, _b;
+        if (React$1.isValidElement(text22)) {
+          if ((_a = text22.props) == null ? void 0 : _a.to) {
+            return urljoin(
+              window.location.origin,
+              ((_b = window.frontEndConfig) == null ? void 0 : _b.clientBasePath) || "",
+              text22.props.to
+            );
+          } else {
+            return getTextFromEl(text22);
+          }
         } else {
-          return getTextFromEl(text22);
+          return text22;
         }
-      } else {
-        return text22;
+      }, "getTextFromElementOrLink");
+      text2 = getTextFromElementOrLink(text2);
+      if (Array.isArray(text2)) {
+        let arrText = text2.map(getTextFromElementOrLink).join(", ");
+        arrText = arrText.replace(/, ,/g, ",");
+        text2 = arrText;
       }
-    }, "getTextFromElementOrLink");
-    text2 = getTextFromElementOrLink(text2);
-    if (Array.isArray(text2)) {
-      let arrText = text2.map(getTextFromElementOrLink).join(", ");
-      arrText = arrText.replace(/, ,/g, ",");
-      text2 = arrText;
-    }
-    const stringText = toString$4(text2);
-    if (stringText === "[object Object]")
-      return "";
-    return stringText;
-  }, "getCopyTextForCell");
+      const stringText = toString$4(text2);
+      if (stringText === "[object Object]")
+        return "";
+      return stringText;
+    },
+    [cellRenderer, currentParams, setNewParams]
+  );
+  const renderCheckboxCell = React$1.useCallback(
+    (row) => {
+      const rowIndex = row.index;
+      const checkedRows = getSelectedRowsFromEntities(
+        entities,
+        reduxFormSelectedEntityIdMap
+      );
+      const isSelected = checkedRows.some((rowNum) => {
+        return rowNum === rowIndex;
+      });
+      if (rowIndex >= entities.length) {
+        return /* @__PURE__ */ React$1.createElement("div", null);
+      }
+      const entity = entities[rowIndex];
+      return /* @__PURE__ */ React$1.createElement(
+        core.Checkbox,
+        {
+          name: `${getIdOrCodeOrIndex(entity, rowIndex)}-checkbox`,
+          disabled: noSelect || noUserSelect || isEntityDisabled(entity),
+          onClick: (e2) => {
+            rowClick(e2, row, entities, {
+              reduxFormSelectedEntityIdMap,
+              isSingleSelect,
+              noSelect,
+              onRowClick,
+              isEntityDisabled,
+              withCheckboxes,
+              onDeselect,
+              onSingleRowSelect,
+              onMultiRowSelect,
+              noDeselectAll,
+              onRowSelect,
+              change
+            });
+          },
+          checked: isSelected
+        }
+      );
+    },
+    [
+      change,
+      entities,
+      isEntityDisabled,
+      isSingleSelect,
+      noDeselectAll,
+      noSelect,
+      noUserSelect,
+      onDeselect,
+      onMultiRowSelect,
+      onRowClick,
+      onRowSelect,
+      onSingleRowSelect,
+      reduxFormSelectedEntityIdMap,
+      withCheckboxes
+    ]
+  );
+  const finishCellEdit = React$1.useCallback(
+    (cellId, newVal, doNotStopEditing) => {
+      const [rowId, path2] = cellId.split(":");
+      !doNotStopEditing && setEditingCell(null);
+      updateEntitiesHelper(entities, (entities2) => {
+        const entity = entities2.find((e2, i) => {
+          return getIdOrCodeOrIndex(e2, i) === rowId;
+        });
+        delete entity._isClean;
+        const { error } = editCellHelper({
+          entity,
+          path: path2,
+          schema,
+          newVal
+        });
+        updateValidation(entities2, __spreadProps(__spreadValues({}, reduxFormCellValidation), {
+          [cellId]: error
+        }));
+      });
+      !doNotStopEditing && refocusTable();
+    },
+    [
+      entities,
+      reduxFormCellValidation,
+      refocusTable,
+      schema,
+      setEditingCell,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
+  const cancelCellEdit = React$1.useCallback(() => {
+    setEditingCell(null);
+    refocusTable();
+  }, [refocusTable, setEditingCell]);
   if (!columns.length) {
     return columns;
   }
@@ -48037,68 +48127,6 @@ const RenderColumns = /* @__PURE__ */ __name(({
       }
     }));
   }
-  const renderCheckboxCell = /* @__PURE__ */ __name((row) => {
-    const rowIndex = row.index;
-    const checkedRows = getSelectedRowsFromEntities(
-      entities,
-      reduxFormSelectedEntityIdMap
-    );
-    const isSelected = checkedRows.some((rowNum) => {
-      return rowNum === rowIndex;
-    });
-    if (rowIndex >= entities.length) {
-      return /* @__PURE__ */ React$1.createElement("div", null);
-    }
-    const entity = entities[rowIndex];
-    return /* @__PURE__ */ React$1.createElement(
-      core.Checkbox,
-      {
-        name: `${getIdOrCodeOrIndex(entity, rowIndex)}-checkbox`,
-        disabled: noSelect || noUserSelect || isEntityDisabled(entity),
-        onClick: (e2) => {
-          rowClick(e2, row, entities, {
-            reduxFormSelectedEntityIdMap,
-            isSingleSelect,
-            noSelect,
-            onRowClick,
-            isEntityDisabled,
-            withCheckboxes,
-            onDeselect,
-            onSingleRowSelect,
-            onMultiRowSelect,
-            noDeselectAll,
-            onRowSelect,
-            change
-          });
-        },
-        checked: isSelected
-      }
-    );
-  }, "renderCheckboxCell");
-  const finishCellEdit = /* @__PURE__ */ __name((cellId, newVal, doNotStopEditing) => {
-    const [rowId, path2] = cellId.split(":");
-    !doNotStopEditing && setEditingCell(null);
-    updateEntitiesHelper(entities, (entities2) => {
-      const entity = entities2.find((e2, i) => {
-        return getIdOrCodeOrIndex(e2, i) === rowId;
-      });
-      delete entity._isClean;
-      const { error } = editCellHelper({
-        entity,
-        path: path2,
-        schema,
-        newVal
-      });
-      updateValidation(entities2, __spreadProps(__spreadValues({}, reduxFormCellValidation), {
-        [cellId]: error
-      }));
-    });
-    !doNotStopEditing && refocusTable();
-  }, "finishCellEdit");
-  const cancelCellEdit = /* @__PURE__ */ __name(() => {
-    setEditingCell(null);
-    refocusTable();
-  }, "cancelCellEdit");
   if (withCheckboxes) {
     columnsToRender.push({
       Header: renderCheckboxHeader({
@@ -48131,7 +48159,7 @@ const RenderColumns = /* @__PURE__ */ __name(({
       }
     });
   }
-  columns.forEach((column) => {
+  const tableColumns = columns.map((column) => {
     const tableColumn = __spreadProps(__spreadValues({}, column), {
       Header: RenderColumnHeader({
         column,
@@ -48230,8 +48258,6 @@ const RenderColumns = /* @__PURE__ */ __name(({
         noEllipsis,
         editingCell,
         cancelCellEdit,
-        editableCellValue,
-        setEditableCellValue,
         editingCellSelectAll,
         getCellHoverText,
         selectedCells,
@@ -48242,10 +48268,10 @@ const RenderColumns = /* @__PURE__ */ __name(({
         args
       }
     );
-    columnsToRender.push(tableColumn);
+    return tableColumn;
   });
-  return columnsToRender;
-}, "RenderColumns");
+  return columnsToRender.concat(tableColumns);
+}, "useColumns");
 const throwFormError = /* @__PURE__ */ __name((error) => {
   if (error.message) {
     console.error("error:", error);
@@ -48314,10 +48340,13 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       `No entities array detected in tableParams object (<DataTable {...tableParams}/>). You need to call withQuery() after withTableParams() like: compose(withTableParams(), withQuery(something)).`
     );
   }
+  const dispatch = reactRedux.useDispatch();
+  const change = React$1.useCallback(
+    (...args) => dispatch(reduxForm.change(formName, ...args)),
+    [dispatch, formName]
+  );
   const tableRef = React$1.useRef();
   const alreadySelected = React$1.useRef(false);
-  const [editableCellValue, setEditableCellValue] = React$1.useState("");
-  const [editingCell, setEditingCell] = React$1.useState(null);
   const [onlyShowRowsWErrors, setOnlyShowRowsWErrors] = React$1.useState(false);
   const [entitiesUndoRedoStack, setEntitiesUndoRedoStack] = React$1.useState({
     currentVersion: 0
@@ -48339,6 +48368,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   });
   const {
     reduxFormCellValidation: _reduxFormCellValidation,
+    reduxFormEditingCell,
     reduxFormEntities: _reduxFormEntities,
     reduxFormQueryParams: _reduxFormQueryParams = {},
     reduxFormSearchInput: _reduxFormSearchInput = "",
@@ -48407,7 +48437,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
   }
   const { withPaging = !isSimple } = props;
   const {
-    change,
     doNotCoercePageSize,
     isInfinite = isSimple && !withPaging,
     syncDisplayOptionsToDb,
@@ -48428,6 +48457,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     return tmp;
   }, [history, reduxFormQueryParams, reduxFormSearchInput, urlConnected]);
   const currentParams = useDeepEqualMemo(_currentParams);
+  useTraceUpdate({ currentParams });
   const tableParams = React$1.useMemo(() => {
     if (!isTableParamsConnected) {
       const updateSearch = /* @__PURE__ */ __name((val) => {
@@ -48451,10 +48481,10 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         };
       });
       const changeFormValue = /* @__PURE__ */ __name((...args) => change(...args), "changeFormValue");
-      return __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+      return __spreadProps(__spreadValues(__spreadValues({
         changeFormValue,
         selectedEntities
-      }, _tableParams), props), boundDispatchProps), {
+      }, _tableParams), boundDispatchProps), {
         isTableParamsConnected: true
         //let the table know not to do local sorting/filtering etc.
       });
@@ -48464,9 +48494,10 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     _tableParams,
     change,
     currentParams,
-    history,
+    history == null ? void 0 : history.replace,
     isTableParamsConnected,
-    props,
+    props.defaults,
+    props.onlyOneFilter,
     selectedEntities,
     urlConnected
   ]);
@@ -48505,7 +48536,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isTableParamsConnected,
     urlConnected
   ]);
-  useTraceUpdate(__spreadValues({}, queryParams));
   props = __spreadValues(__spreadValues({}, props), queryParams);
   const {
     addFilters = noop$3,
@@ -48630,7 +48660,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         change
       });
     }
-  }, [entitiesAcrossPages, reduxFormSelectedEntityIdMap]);
+  }, [entitiesAcrossPages, reduxFormSelectedEntityIdMap, change]);
   const [tableConfig, setTableConfig] = React$1.useState({ fieldOptions: [] });
   React$1.useEffect(() => {
     let newTableConfig = {};
@@ -48730,6 +48760,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
     return schema2;
   }, [
+    cellRenderer,
     convertedSchema,
     currentParams,
     entities,
@@ -48739,7 +48770,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     isSimple,
     isViewable,
     onDoubleClick,
-    // setNewParams,
+    setNewParams,
     showForcedHiddenColumns,
     tableConfig.columnOrderings,
     tableConfig.fieldOptions,
@@ -48873,8 +48904,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       });
       change("reduxFormCellValidation", tableWideErr);
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [schema]
+    [schema, change]
   );
   const updateEntitiesHelper = React$1.useCallback(
     (ents, fn4) => {
@@ -49095,21 +49125,20 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
   }, [selectedCells]);
   const startCellEdit = React$1.useCallback(
-    (cellId, { pressedKey } = {}) => {
-      if (editingCell === cellId)
-        return;
-      if (pressedKey) {
-        setEditableCellValue("");
-      } else {
-        const [rowId, path2] = cellId.split(":");
-        const entityIdToEntity = getEntityIdToEntity(entities);
-        const entity = entityIdToEntity[rowId].e;
-        setEditableCellValue(entity[path2]);
-      }
-      setSelectedCells((prev) => __spreadProps(__spreadValues({}, prev), { [cellId]: PRIMARY_SELECTED_VAL }));
-      setEditingCell(cellId);
+    (cellId) => {
+      change("reduxFormEditingCell", (prev) => {
+        if (prev === cellId)
+          return cellId;
+        setSelectedCells((prev2) => {
+          if (prev2[cellId] === PRIMARY_SELECTED_VAL) {
+            return prev2;
+          }
+          return __spreadProps(__spreadValues({}, prev2), { [cellId]: PRIMARY_SELECTED_VAL });
+        });
+        return cellId;
+      });
     },
-    [editingCell, entities]
+    [change]
   );
   const handleEnterStartCellEdit = React$1.useCallback(
     (e2) => {
@@ -49469,7 +49498,14 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       updateValidation(newEnts, __spreadValues(__spreadValues({}, toKeep), validationErrors));
     }, "formatAndValidateTableInitial");
     isCellEditable && formatAndValidateTableInitial();
-  }, [_origEntities, isCellEditable]);
+  }, [
+    _origEntities,
+    isCellEditable,
+    change,
+    formatAndValidateEntities,
+    reduxFormCellValidation,
+    updateValidation
+  ]);
   const handlePaste = React$1.useCallback(
     (e2) => {
       if (isCellEditable) {
@@ -49620,16 +49656,6 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       document.removeEventListener("paste", handlePaste);
     };
   }, [handlePaste]);
-  React$1.useEffect(() => {
-    if (!entities.length && !isLoading && !showForcedHiddenColumns) {
-      setShowForcedHidden(true);
-    }
-  }, [
-    entities.length,
-    isLoading,
-    setShowForcedHidden,
-    showForcedHiddenColumns
-  ]);
   React$1.useEffect(() => {
     addFilters(additionalFilters);
   }, [additionalFilters]);
@@ -49863,7 +49889,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         return;
       let newSelectedCells = __spreadValues({}, selectedCells);
       if (newSelectedCells[cellId] && !event.shiftKey) {
-        if (editingCell === cellId)
+        if (reduxFormEditingCell === cellId)
           return;
         if (event.metaKey) {
           delete newSelectedCells[cellId];
@@ -49928,10 +49954,10 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
       setSelectedCells(newSelectedCells);
     },
     [
-      editingCell,
       entities,
       isEntityDisabled,
       primarySelectedCellId,
+      reduxFormEditingCell,
       schema,
       selectedCells
     ]
@@ -50249,8 +50275,8 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         }
       };
     },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [
+      change,
       entities,
       expandedEntityIdMap,
       getRowClassName,
@@ -50323,7 +50349,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
         noSelectedBottomBorder: !selectedBottomBorder,
         noSelectedLeftBorder: !selectedLeftBorder,
         isDropdownCell: column.type === "dropdown",
-        isEditingCell: editingCell === cellId,
+        isEditingCell: reduxFormEditingCell === cellId,
         hasCellError: !!err,
         "no-data-tip": selectedCells[cellId]
       });
@@ -50362,13 +50388,13 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     },
     [
       doNotValidateUntouchedRows,
-      editingCell,
       entities,
       handleCellClick,
       isCellEditable,
       isEntityDisabled,
       primarySelectedCellId,
       reduxFormCellValidation,
+      reduxFormEditingCell,
       schema,
       selectedCells,
       showContextMenu2,
@@ -50565,107 +50591,56 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
     }
     return entities;
   }, [entities, onlyShowRowsWErrors, reduxFormCellValidation]);
-  const renderColumns = React$1.useMemo(
-    () => RenderColumns({
-      addFilters,
-      cellRenderer,
-      change,
-      columns,
-      currentParams,
-      compact: compact3,
-      editableCellValue,
-      editingCell,
-      editingCellSelectAll,
-      entities,
-      expandedEntityIdMap,
-      extraCompact,
-      filters,
-      getCellHoverText,
-      isCellEditable,
-      isEntityDisabled,
-      isLocalCall,
-      isSimple,
-      isSingleSelect,
-      isSelectionARectangle,
-      noDeselectAll,
-      noSelect,
-      noUserSelect,
-      onDeselect,
-      onMultiRowSelect,
-      onRowClick,
-      onRowSelect,
-      onSingleRowSelect,
-      order: order2,
-      primarySelectedCellId,
-      reduxFormCellValidation,
-      reduxFormSelectedEntityIdMap,
-      refocusTable,
-      removeSingleFilter,
-      schema,
-      selectedCells,
-      setEditableCellValue,
-      setEditingCell,
-      setExpandedEntityIdMap,
-      setNewParams,
-      setOrder,
-      setSelectedCells,
-      shouldShowSubComponent,
-      startCellEdit,
-      SubComponent,
-      tableRef,
-      updateEntitiesHelper,
-      updateValidation,
-      withCheckboxes,
-      withExpandAndCollapseAllButton,
-      withFilter,
-      withSort
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      SubComponent,
-      columns,
-      compact3,
-      currentParams,
-      editableCellValue,
-      editingCell,
-      editingCellSelectAll,
-      entities,
-      expandedEntityIdMap,
-      extraCompact,
-      filters,
-      getCellHoverText,
-      isCellEditable,
-      isEntityDisabled,
-      isLocalCall,
-      isSelectionARectangle,
-      isSimple,
-      isSingleSelect,
-      noDeselectAll,
-      noSelect,
-      noUserSelect,
-      onDeselect,
-      onMultiRowSelect,
-      onRowClick,
-      onRowSelect,
-      onSingleRowSelect,
-      order2,
-      primarySelectedCellId,
-      reduxFormCellValidation,
-      reduxFormSelectedEntityIdMap,
-      removeSingleFilter,
-      schema,
-      selectedCells,
-      setOrder,
-      shouldShowSubComponent,
-      startCellEdit,
-      updateEntitiesHelper,
-      updateValidation,
-      withCheckboxes,
-      withExpandAndCollapseAllButton,
-      withFilter,
-      withSort
-    ]
-  );
+  const renderColumns = useColumns({
+    addFilters,
+    cellRenderer,
+    columns,
+    currentParams,
+    compact: compact3,
+    editingCellSelectAll,
+    entities,
+    expandedEntityIdMap,
+    extraCompact,
+    filters,
+    formName,
+    getCellHoverText,
+    isCellEditable,
+    isEntityDisabled,
+    isLocalCall,
+    isSimple,
+    isSingleSelect,
+    isSelectionARectangle,
+    noDeselectAll,
+    noSelect,
+    noUserSelect,
+    onDeselect,
+    onMultiRowSelect,
+    onRowClick,
+    onRowSelect,
+    onSingleRowSelect,
+    order: order2,
+    primarySelectedCellId,
+    reduxFormCellValidation,
+    reduxFormSelectedEntityIdMap,
+    refocusTable,
+    removeSingleFilter,
+    schema,
+    selectedCells,
+    setExpandedEntityIdMap,
+    setNewParams,
+    setOrder,
+    setSelectedCells,
+    shouldShowSubComponent,
+    startCellEdit,
+    SubComponent,
+    tableRef,
+    updateEntitiesHelper,
+    updateValidation,
+    withCheckboxes,
+    withExpandAndCollapseAllButton,
+    withFilter,
+    withSort
+  });
   const scrollToTop = React$1.useCallback(
     () => {
       var _a2, _b2, _c2, _d, _e, _f;
@@ -50856,9 +50831,7 @@ const DataTable = /* @__PURE__ */ __name((_G) => {
           if (rowDisabled)
             return;
           e2.stopPropagation();
-          startCellEdit(primarySelectedCellId, {
-            pressedKey: e2.key
-          });
+          startCellEdit(primarySelectedCellId);
         }
       }),
       isCellEditable && entities.length > 50 && // test for this!!
@@ -52901,19 +52874,19 @@ Fuse.config = Config;
 {
   register(ExtendedSearch);
 }
-const getSchema$1 = /* @__PURE__ */ __name((data) => ({
+const getSchema = /* @__PURE__ */ __name((data) => ({
   fields: map$2(data[0], (val, path2) => {
     return { path: path2, type: "string" };
   }),
   userData: data
-}), "getSchema$1");
+}), "getSchema");
 function tryToMatchSchemas(_0) {
   return __async(this, arguments, function* ({
     incomingData,
     validateAgainstSchema
   }) {
     yield resolveValidateAgainstSchema();
-    const userSchema = getSchema$1(incomingData);
+    const userSchema = getSchema(incomingData);
     const { searchResults, csvValidationIssue, ignoredHeadersMsg } = yield matchSchemas({
       userSchema,
       officialSchema: validateAgainstSchema
@@ -64428,96 +64401,130 @@ const withStore = /* @__PURE__ */ __name((Component) => {
     return /* @__PURE__ */ React$1.createElement(Component, __spreadProps(__spreadValues({}, props), { store }));
   };
 }, "withStore");
-const getSchema = /* @__PURE__ */ __name((options) => {
-  const { schema } = options;
-  if (isFunction$4(schema))
-    return schema(options);
-  else
-    return schema;
-}, "getSchema");
-function withTableParams(topLevelOptions) {
-  const { isLocalCall = false } = topLevelOptions;
-  const mapStateToProps = /* @__PURE__ */ __name((state, ownProps) => {
-    var _a, _b;
-    const mergedOpts = getMergedOpts(topLevelOptions, ownProps);
-    const {
-      additionalFilter = {},
-      additionalOrFilter = {},
-      cellRenderer,
-      defaults: defaults2,
-      doNotCoercePageSize,
-      formName,
-      history,
-      initialValues,
-      isCodeModel,
-      isInfinite,
-      isSimple,
-      model,
-      noForm,
-      noOrderError,
-      showEmptyColumnsByDefault,
-      syncDisplayOptionsToDb,
-      urlConnected,
-      withDisplayOptions,
-      withPaging,
-      withSelectedEntities: withSelectedEntities2
-    } = mergedOpts;
-    const schema = getSchema(mergedOpts);
-    const convertedSchema = convertSchema(schema);
-    if (isLocalCall) {
-      if (!noForm && (!formName || formName === "tgDataTable")) {
-        console.error(
-          "Please pass a unique 'formName' prop to the locally connected <DataTable/> component with schema: ",
-          schema
-        );
-      }
-      if (mergedOpts.orderByFirstColumn && !((_b = (_a = mergedOpts.defaults) == null ? void 0 : _a.order) == null ? void 0 : _b.length)) {
-        const r2 = [getCCDisplayName(convertedSchema.fields[0])];
-        set$1(mergedOpts, "defaults.order", r2);
-      }
-    } else {
-      if (!formName || formName === "tgDataTable") {
-        console.error(
-          "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
-          schema
-        );
-      }
+const useTableParams = /* @__PURE__ */ __name((props) => {
+  var _a;
+  const {
+    additionalFilter,
+    additionalOrFilter,
+    controlled_pageSize,
+    defaults: _defaults,
+    doNotCoercePageSize,
+    entities,
+    formName = "tgDataTable",
+    history,
+    isCodeModel,
+    isInfinite,
+    isLocalCall = false,
+    isSimple,
+    noForm,
+    noOrderError,
+    onlyOneFilter,
+    orderByFirstColumn,
+    pageSize,
+    schema,
+    syncDisplayOptionsToDb,
+    tableParams: _tableParams,
+    urlConnected,
+    withPaging,
+    withSelectedEntities: withSelectedEntities2
+  } = props;
+  const defaults2 = React$1.useMemo(
+    () => __spreadValues({
+      pageSize: controlled_pageSize || 25,
+      order: [],
+      //[-name, statusCode] //an array of camelCase display names with - sign to denote reverse
+      searchTerm: "",
+      page: 1,
+      filters: [
+        //filters look like this:
+        // {
+        //   selectedFilter: 'textContains', //camel case
+        //   filterOn: ccDisplayName, //camel case display name if available and string, otherwise path
+        //   filterValue: 'thomas',
+        // }
+      ]
+    }, _defaults),
+    [_defaults, controlled_pageSize]
+  );
+  const convertedSchema = React$1.useMemo(() => convertSchema(schema), [schema]);
+  if (isLocalCall) {
+    if (!noForm && (!formName || formName === "tgDataTable")) {
+      console.error(
+        "Please pass a unique 'formName' prop to the locally connected <DataTable/> component with schema: ",
+        schema
+      );
     }
-    const tableConfig = getTableConfigFromStorage(formName);
-    const formSelector = reduxForm.formValueSelector(formName);
-    const currentParams = (urlConnected ? getCurrentParamsFromUrl(history.location) : formSelector(state, "reduxFormQueryParams")) || {};
-    const selectedEntities = withSelectedEntities2 ? getRecordsFromReduxForm(state, formName) : void 0;
-    const additionalFilterToUse = typeof additionalFilter === "function" ? additionalFilter.bind(this, ownProps) : () => additionalFilter;
-    const additionalOrFilterToUse = typeof additionalOrFilter === "function" ? additionalOrFilter.bind(this, ownProps) : () => additionalOrFilter;
-    let defaultsToUse = defaults2;
-    const userSetPageSize = (tableConfig == null ? void 0 : tableConfig.userSetPageSize) && parseInt(tableConfig.userSetPageSize, 10);
-    if (!syncDisplayOptionsToDb && userSetPageSize) {
-      defaultsToUse = defaultsToUse || {};
-      defaultsToUse.pageSize = userSetPageSize;
+    if (orderByFirstColumn && !((_a = defaults2 == null ? void 0 : defaults2.order) == null ? void 0 : _a.length)) {
+      defaults2.order = [getCCDisplayName(convertedSchema.fields[0])];
     }
-    const mapStateProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({
-      history,
-      urlConnected,
-      withSelectedEntities: withSelectedEntities2,
-      formName,
-      defaults: defaultsToUse,
-      isInfinite,
-      isSimple,
-      withPaging,
-      doNotCoercePageSize,
-      additionalFilter,
-      additionalOrFilter,
-      noOrderError,
-      withDisplayOptions,
-      cellRenderer,
-      isLocalCall,
-      model,
-      schema,
-      mergedOpts
-    }, getQueryParams({
+  } else {
+    if (!formName || formName === "tgDataTable") {
+      console.error(
+        "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
+        schema
+      );
+    }
+  }
+  const {
+    reduxFormQueryParams: _reduxFormQueryParams = {},
+    reduxFormSearchInput: _reduxFormSearchInput = "",
+    reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
+  } = reactRedux.useSelector(
+    (state) => reduxForm.formValueSelector(formName)(
+      state,
+      "reduxFormQueryParams",
+      "reduxFormSearchInput",
+      "reduxFormSelectedEntityIdMap"
+    )
+  );
+  const reduxFormQueryParams = useDeepEqualMemo(_reduxFormQueryParams);
+  const reduxFormSearchInput = useDeepEqualMemo(_reduxFormSearchInput);
+  const reduxFormSelectedEntityIdMap = useDeepEqualMemo(
+    _reduxFormSelectedEntityIdMap
+  );
+  const _currentParams = React$1.useMemo(() => {
+    const tmp = (urlConnected ? getCurrentParamsFromUrl(history == null ? void 0 : history.location) : reduxFormQueryParams) || {};
+    tmp.searchTerm = reduxFormSearchInput;
+    return tmp;
+  }, [
+    history == null ? void 0 : history.location,
+    reduxFormQueryParams,
+    reduxFormSearchInput,
+    urlConnected
+  ]);
+  const selectedEntities = React$1.useMemo(
+    () => withSelectedEntities2 ? Object.values(reduxFormSelectedEntityIdMap).sort((a2, b2) => a2.rowIndex - b2.rowIndex).map((item) => item.entity) : void 0,
+    [reduxFormSelectedEntityIdMap, withSelectedEntities2]
+  );
+  const currentParams = useDeepEqualMemo(_currentParams);
+  const defaultsToUse = React$1.useMemo(() => {
+    const _tableConfig = getTableConfigFromStorage(formName);
+    const userSetPageSize = (_tableConfig == null ? void 0 : _tableConfig.userSetPageSize) && parseInt(_tableConfig.userSetPageSize, 10);
+    let _defaultsToUse = defaults2;
+    if (!syncDisplayOptionsToDb && userSetPageSize) {
+      _defaultsToUse = _defaultsToUse || {};
+      _defaultsToUse.pageSize = userSetPageSize;
+    }
+    return _defaultsToUse;
+  }, [defaults2, formName, syncDisplayOptionsToDb]);
+  const passingProps = React$1.useMemo(
+    () => __spreadProps(__spreadValues({
+      formName: "tgDataTable"
+    }, props), {
+      pageSize: controlled_pageSize || pageSize,
+      defaults: defaultsToUse
+    }),
+    // We don't want to rerender this every time a prop changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [controlled_pageSize, defaultsToUse, pageSize]
+  );
+  const queryParams = React$1.useMemo(() => {
+    const additionalFilterToUse = typeof additionalFilter === "function" ? additionalFilter.bind(void 0, passingProps) : () => additionalFilter;
+    const additionalOrFilterToUse = typeof additionalOrFilter === "function" ? additionalOrFilter.bind(void 0, passingProps) : () => additionalOrFilter;
+    return getQueryParams({
       doNotCoercePageSize,
       currentParams,
-      entities: mergedOpts.entities,
+      entities,
       // for local table
       urlConnected,
       defaults: defaultsToUse,
@@ -64528,93 +64535,96 @@ function withTableParams(topLevelOptions) {
       additionalOrFilter: additionalOrFilterToUse,
       noOrderError,
       isCodeModel,
-      ownProps: mergedOpts
-    })), {
-      currentParams,
-      selectedEntities
-    }), withSelectedEntities2 && typeof withSelectedEntities2 === "string" && {
-      [withSelectedEntities2]: selectedEntities
-    }), {
-      initialValues: __spreadProps(__spreadValues({}, initialValues), {
-        reduxFormSearchInput: currentParams.searchTerm
-      }),
-      showEmptyColumnsByDefault
+      ownProps: passingProps
     });
-    return mapStateProps;
-  }, "mapStateToProps");
-  const mapDispatchToProps = /* @__PURE__ */ __name((dispatch, ownProps) => {
-    if (ownProps.isTableParamsConnected) {
-      return {};
-    }
-    const mergedOpts = getMergedOpts(topLevelOptions, ownProps);
-    const { formName, urlConnected, history, defaults: defaults2, onlyOneFilter } = mergedOpts;
-    function updateSearch(val) {
-      dispatch(reduxForm.change(formName, "reduxFormSearchInput", val || ""));
-    }
-    __name(updateSearch, "updateSearch");
+  }, [
+    additionalFilter,
+    passingProps,
+    additionalOrFilter,
+    doNotCoercePageSize,
+    currentParams,
+    entities,
+    urlConnected,
+    defaultsToUse,
+    convertedSchema,
+    isInfinite,
+    isSimple,
+    withPaging,
+    isLocalCall,
+    noOrderError,
+    isCodeModel
+  ]);
+  const dispatch = reactRedux.useDispatch();
+  const tableParams = React$1.useMemo(() => {
+    const change = /* @__PURE__ */ __name((...args) => dispatch(reduxForm.change(formName, ...args)), "change");
+    const updateSearch = /* @__PURE__ */ __name((val) => {
+      change("reduxFormSearchInput", val || "");
+    }, "updateSearch");
     const setNewParams = /* @__PURE__ */ __name((newParams) => {
-      urlConnected && setCurrentParamsOnUrl(newParams, history.replace);
-      dispatch(reduxForm.change(formName, "reduxFormQueryParams", newParams));
+      urlConnected && setCurrentParamsOnUrl(newParams, history == null ? void 0 : history.replace);
+      change("reduxFormQueryParams", newParams);
     }, "setNewParams");
-    return {
-      bindThese: makeDataTableHandlers({
-        setNewParams,
-        updateSearch,
-        defaults: defaults2,
-        onlyOneFilter
-      }),
-      dispatch
-    };
-  }, "mapDispatchToProps");
-  function mergeProps(stateProps, dispatchProps, ownProps) {
-    if (ownProps.isTableParamsConnected) {
-      return ownProps;
-    }
-    const { currentParams, formName } = stateProps;
+    const bindThese = makeDataTableHandlers({
+      setNewParams,
+      updateSearch,
+      defaults: defaults2,
+      onlyOneFilter
+    });
     const boundDispatchProps = {};
-    Object.keys(dispatchProps.bindThese).forEach(function(key) {
-      const action = dispatchProps.bindThese[key];
+    Object.keys(bindThese).forEach(function(key) {
+      const action = bindThese[key];
       boundDispatchProps[key] = function(...args) {
         action(...args, currentParams);
       };
     });
-    const _a = stateProps, { variables, selectedEntities, mergedOpts } = _a, restStateProps = __objRest(_a, ["variables", "selectedEntities", "mergedOpts"]);
-    const changeFormValue = /* @__PURE__ */ __name((...args) => dispatchProps.dispatch(reduxForm.change(formName, ...args)), "changeFormValue");
-    const tableParams = __spreadProps(__spreadValues(__spreadValues(__spreadValues({
+    const changeFormValue = /* @__PURE__ */ __name((...args) => change(...args), "changeFormValue");
+    return __spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({
       changeFormValue,
       selectedEntities
-    }, ownProps.tableParams), restStateProps), boundDispatchProps), {
+    }, _tableParams), {
+      formName,
+      isLocalCall,
+      schema,
+      currentParams
+    }), queryParams), boundDispatchProps), {
       form: formName,
       //this will override the default redux form name
       isTableParamsConnected: true
       //let the table know not to do local sorting/filtering etc.
     });
-    const allMergedProps = __spreadProps(__spreadValues(__spreadValues({}, ownProps), mergedOpts), {
-      variables: stateProps.variables,
-      selectedEntities: stateProps.selectedEntities,
-      tableParams
-    });
-    return allMergedProps;
-  }
-  __name(mergeProps, "mergeProps");
-  const toReturn = compose(
-    reactRedux.connect((state, ownProps) => {
-      if (ownProps.isTableParamsConnected) {
-        return {};
-      }
-      const { formName } = getMergedOpts(topLevelOptions, ownProps);
-      return {
-        unusedProp: reduxForm.formValueSelector(formName)(state, "reduxFormQueryParams") || {}
-        //tnr: we need this to trigger withRouter and force it to update if it is nested in a redux-connected container.. very ugly but necessary
-      };
-    }),
-    //don't use withRouter if noRouter is passed!
-    branch((props) => !props.noRouter, withRouter),
-    reactRedux.connect(mapStateToProps, mapDispatchToProps, mergeProps)
-  );
-  return toReturn;
-}
-__name(withTableParams, "withTableParams");
+  }, [
+    _tableParams,
+    currentParams,
+    defaults2,
+    dispatch,
+    formName,
+    history == null ? void 0 : history.replace,
+    isLocalCall,
+    onlyOneFilter,
+    queryParams,
+    schema,
+    selectedEntities,
+    urlConnected
+  ]);
+  return __spreadProps(__spreadValues(__spreadValues({
+    isLocalCall,
+    schema
+  }, queryParams), withSelectedEntities2 && typeof withSelectedEntities2 === "string" && {
+    [withSelectedEntities2]: selectedEntities
+  }), {
+    currentParams,
+    selectedEntities,
+    tableParams
+  });
+}, "useTableParams");
+const withTableParams = /* @__PURE__ */ __name((topLevelOptions) => compose(
+  //don't use withRouter if noRouter is passed!
+  branch(({ noRouter }) => !noRouter, withRouter),
+  (Comp) => (props) => {
+    const tableParams = useTableParams(__spreadValues(__spreadValues({}, topLevelOptions), props));
+    return /* @__PURE__ */ React$1.createElement(Comp, __spreadValues(__spreadValues({}, props), tableParams));
+  }
+), "withTableParams");
 function showAppSpinner() {
   return renderOnDocSimple(
     /* @__PURE__ */ React$1.createElement(core.Overlay, { isOpen: true }, /* @__PURE__ */ React$1.createElement(Loading, { centeredInPage: true, loading: true }))
@@ -70743,6 +70753,7 @@ exports.tubeIcon = tubeIcon;
 exports.useDeepEqualMemo = useDeepEqualMemo;
 exports.useDialog = useDialog;
 exports.useTableEntities = useTableEntities;
+exports.useTableParams = useTableParams;
 exports.useTraceUpdate = useTraceUpdate;
 exports.withAbstractWrapper = withAbstractWrapper;
 exports.withCommand = withCommand;