@teselagen/ui 0.9.8 → 0.10.3

package/src/DataTable/index.js

@@ -17,6 +17,7 @@ import {
   noop,
   cloneDeep,
   keyBy,
+  omit,
   forEach,
   lowerCase,
   get,
@@ -29,33 +30,57 @@ import {
   some,
   identity
 } from "lodash-es";
-import { Button, Icon, Intent, Callout, Tooltip } from "@blueprintjs/core";
+import {
+  Button,
+  Menu,
+  MenuItem,
+  ContextMenu,
+  Icon,
+  Intent,
+  Callout,
+  Tooltip,
+  useHotkeys
+} from "@blueprintjs/core";
 import { arrayMove } from "@dnd-kit/sortable";
 import classNames from "classnames";
 import scrollIntoView from "dom-scroll-into-view";
-import { VIRTUALIZE_CUTOFF_LENGTH } from "@teselagen/react-table";
-import immer, { produceWithPatches, enablePatches } from "immer";
+import ReactTable, { VIRTUALIZE_CUTOFF_LENGTH } from "@teselagen/react-table";
+import immer, { produceWithPatches, enablePatches, applyPatches } from "immer";
 import papaparse from "papaparse";
 import { useDispatch, useSelector } from "react-redux";
+import { ThComponent } from "./ThComponent";
 import {
   defaultParsePaste,
   formatPasteData,
   getAllRows,
+  getCellCopyText,
   getCellInfo,
   getEntityIdToEntity,
   getFieldPathToIndex,
   getIdOrCodeOrIndex,
+  getLastSelectedEntity,
+  getNewEntToSelect,
   getRecordsFromIdMap,
+  getRowCopyText,
+  handleCopyColumn,
+  handleCopyHelper,
   handleCopyRows,
   handleCopyTable,
+  isEntityClean,
   PRIMARY_SELECTED_VAL,
   removeCleanRows
 } from "./utils";
 import { useDeepEqualMemo } from "../utils/hooks";
-import { changeSelectedEntities, finalizeSelection } from "./utils/rowClick";
+import rowClick, {
+  changeSelectedEntities,
+  finalizeSelection
+} from "./utils/rowClick";
 import PagingTool from "./PagingTool";
 import SearchBar from "./SearchBar";
 import DisplayOptions from "./DisplayOptions";
+import DisabledLoadingComponent from "./DisabledLoadingComponent";
+import SortableColumns from "./SortableColumns";
+import dataTableEnhancer from "./dataTableEnhancer";
 import "../toastr";
 import "@teselagen/react-table/react-table.css";
 import "./style.css";
@@ -73,21 +98,27 @@ import {
   getCurrentParamsFromUrl,
   setCurrentParamsOnUrl
 } from "./utils/queryParams";
-import { formValueSelector, change as _change, reduxForm } from "redux-form";
+import { useColumns } from "./Columns";
+import { formValueSelector, change as _change } from "redux-form";
 import { throwFormError } from "../throwFormError";
 import { isObservableArray, toJS } from "mobx";
 import { isBeingCalledExcessively } from "../utils/isBeingCalledExcessively";
 import { getCCDisplayName } from "./utils/tableQueryParamsToHasuraClauses";
-import { useHotKeysWrapper } from "./utils/useHotKeysWrapper";
-import { withRouter } from "react-router-dom";
-import { ReactTable } from "./ReactTable";
 
 enablePatches();
+const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
+
+const itemSizeEstimators = {
+  compact: () => 25.34,
+  normal: () => 33.34,
+  comfortable: () => 41.34
+};
 
 const DataTable = ({
   controlled_pageSize,
   formName = "tgDataTable",
   history,
+  doNotSearchHiddenColumns,
   isSimple,
   isLocalCall = true,
   isTableParamsConnected,
@@ -143,15 +174,15 @@ const DataTable = ({
     reduxFormEntities,
     reduxFormQueryParams: _reduxFormQueryParams = {},
     reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
-  } = useSelector(state =>
-    formValueSelector(formName)(
+  } = useSelector(function dtFormParamsSelector(state) {
+    return formValueSelector(formName)(
       state,
       "reduxFormCellValidation",
       "reduxFormEntities",
       "reduxFormQueryParams",
       "reduxFormSelectedEntityIdMap"
-    )
-  );
+    );
+  });
 
   // We want to make sure we don't rerender everything unnecessary
   // with redux-forms we tend to do unnecessary renders
@@ -376,7 +407,7 @@ const DataTable = ({
     expandAllByDefault,
     extraClasses = "",
     extraCompact: _extraCompact,
-    filters,
+    filters = [],
     fragment,
     getCellHoverText,
     getRowClassName,
@@ -451,15 +482,16 @@ const DataTable = ({
     withSelectAll,
     withSort,
     withTitle = !isSimple,
-    noExcessiveCheck
+    noExcessiveCheck,
+    isEntityCountLoading
   } = props;
 
   const _entities = useMemo(
     () => (reduxFormEntities?.length ? reduxFormEntities : _origEntities) || [],
     [_origEntities, reduxFormEntities]
   );
-
   const entities = useDeepEqualMemo(_entities);
+
   const entitiesAcrossPages = useDeepEqualMemo(_entitiesAcrossPages);
 
   // This is because we need to maintain the reduxFormSelectedEntityIdMap and
@@ -474,16 +506,34 @@ const DataTable = ({
       entities,
       change
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     entitiesAcrossPages,
     reduxFormSelectedEntityIdMap,
     change,
-    noExcessiveCheck
+    noExcessiveCheck,
+    entities,
+    formName
   ]);
 
-  const [tableConfig, setTableConfig] = useState({ fieldOptions: [] });
-
+  const [tableConfig, _setTableConfig] = useState({ fieldOptions: [] });
+  const setTableConfig = useCallback(
+    newConfig => {
+      _setTableConfig(prev => {
+        let newConfigVal = newConfig;
+        if (typeof newConfig === "function") {
+          newConfigVal = newConfig(prev);
+        }
+        if (!isEqual(prev.fieldOptions, newConfigVal.fieldOptions)) {
+          change(
+            "reduxFormReadOnlyFieldOptions",
+            newConfigVal.fieldOptions || []
+          );
+        }
+        return newConfigVal;
+      });
+    },
+    [change]
+  );
   useEffect(() => {
     if (withDisplayOptions) {
       let newTableConfig = {};
@@ -632,6 +682,7 @@ const DataTable = ({
     convertedSchema,
     currentParams,
     entities,
+    setTableConfig,
     history,
     isInfinite,
     isOpenable,
@@ -749,6 +800,7 @@ const DataTable = ({
     currentUser?.user?.id,
     deleteTableConfiguration,
     formName,
+    setTableConfig,
     schema.fields,
     syncDisplayOptionsToDb,
     tableConfig,
@@ -765,6 +817,11 @@ const DataTable = ({
     extraCompact = tableConfig.density === "extraCompact";
   }
 
+  const resized = useMemo(
+    () => tableConfig.resized || [],
+    [tableConfig?.resized]
+  );
+
   const pageSize = controlled_pageSize || _pageSize;
 
   const [expandedEntityIdMap, setExpandedEntityIdMap] = useState(() => {
@@ -849,85 +906,189 @@ const DataTable = ({
     [schema.fields]
   );
 
-  useEffect(() => {
-    // This is bad practice, we shouldn't be assigning value to an
-    // external variable
-    if (helperProp) {
-      helperProp.updateValidationHelper = () => {
-        updateValidation(entities, reduxFormCellValidation);
-      };
+  const updateValidationHelper = useCallback(() => {
+    updateValidation(entities, reduxFormCellValidation);
+  }, [entities, reduxFormCellValidation, updateValidation]);
 
-      helperProp.addEditableTableEntities = incomingEnts => {
-        updateEntitiesHelper(entities, entities => {
-          const newEntities = incomingEnts.map(e => ({
-            ...e,
-            id: e.id || nanoid(),
-            _isClean: false
-          }));
+  const addEditableTableEntities = useCallback(
+    incomingEnts => {
+      updateEntitiesHelper(entities, entities => {
+        const newEntities = incomingEnts.map(e => ({
+          ...e,
+          id: e.id || nanoid(),
+          _isClean: false
+        }));
 
-          const { newEnts, validationErrors } = formatAndValidateEntities(
-            newEntities,
-            {
-              useDefaultValues: true,
-              indexToStartAt: entities.length
-            }
-          );
-          if (every(entities, "_isClean")) {
-            forEach(newEnts, (e, i) => {
-              entities[i] = e;
-            });
-          } else {
-            entities.splice(entities.length, 0, ...newEnts);
+        const { newEnts, validationErrors } = formatAndValidateEntities(
+          newEntities,
+          {
+            useDefaultValues: true,
+            indexToStartAt: entities.length
           }
-
-          updateValidation(entities, {
-            ...reduxFormCellValidation,
-            ...validationErrors
+        );
+        if (every(entities, "_isClean")) {
+          forEach(newEnts, (e, i) => {
+            entities[i] = e;
           });
-        });
-      };
+        } else {
+          entities.splice(entities.length, 0, ...newEnts);
+        }
 
-      helperProp.getEditableTableInfoAndThrowFormError = () => {
-        const { entsToUse, validationToUse } = removeCleanRows(
-          reduxFormEntities,
-          reduxFormCellValidation
-        );
-        const validationWTableErrs = validateTableWideErrors({
-          entities: entsToUse,
-          schema,
-          newCellValidate: validationToUse
+        updateValidation(entities, {
+          ...reduxFormCellValidation,
+          ...validationErrors
         });
+      });
+    },
+    [
+      entities,
+      formatAndValidateEntities,
+      reduxFormCellValidation,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
 
-        if (!entsToUse?.length) {
-          throwFormError(
-            "Please add at least one row to the table before submitting."
-          );
-        }
-        const invalid =
-          isEmpty(validationWTableErrs) || !some(validationWTableErrs, v => v)
-            ? undefined
-            : validationWTableErrs;
-
-        if (invalid) {
-          throwFormError(
-            "Please fix the errors in the table before submitting."
-          );
-        }
+  const getEditableTableInfoAndThrowFormError = useCallback(() => {
+    const { entsToUse, validationToUse } = removeCleanRows(
+      reduxFormEntities,
+      reduxFormCellValidation
+    );
+    const validationWTableErrs = validateTableWideErrors({
+      entities: entsToUse,
+      schema,
+      newCellValidate: validationToUse
+    });
 
-        return entsToUse;
-      };
+    if (!entsToUse?.length) {
+      throwFormError(
+        "Please add at least one row to the table before submitting."
+      );
+    }
+    const invalid =
+      isEmpty(validationWTableErrs) || !some(validationWTableErrs, v => v)
+        ? undefined
+        : validationWTableErrs;
+
+    if (invalid) {
+      throwFormError("Please fix the errors in the table before submitting.");
+    }
+
+    return entsToUse;
+  }, [reduxFormCellValidation, reduxFormEntities, schema]);
+
+  useEffect(() => {
+    // This  is bad practice, we shouldn't be assigning value to an
+    // external variable
+    if (helperProp) {
+      helperProp.updateValidationHelper = updateValidationHelper;
+      helperProp.addEditableTableEntities = addEditableTableEntities;
+      helperProp.getEditableTableInfoAndThrowFormError =
+        getEditableTableInfoAndThrowFormError;
     }
   }, [
-    entities,
-    formatAndValidateEntities,
+    addEditableTableEntities,
+    getEditableTableInfoAndThrowFormError,
     helperProp,
-    reduxFormCellValidation,
-    reduxFormEntities,
-    schema,
-    updateEntitiesHelper,
-    updateValidation
+    updateValidationHelper
   ]);
 
+  const handleRowMove = useCallback(
+    (type, shiftHeld) => e => {
+      e.preventDefault();
+      e.stopPropagation();
+      let newIdMap = {};
+      const lastSelectedEnt = getLastSelectedEntity(
+        reduxFormSelectedEntityIdMap
+      );
+
+      if (noSelect) return;
+      if (lastSelectedEnt) {
+        let lastSelectedIndex = entities.findIndex(
+          ent => ent === lastSelectedEnt
+        );
+        if (lastSelectedIndex === -1) {
+          if (lastSelectedEnt.id !== undefined) {
+            lastSelectedIndex = entities.findIndex(
+              ent => ent.id === lastSelectedEnt.id
+            );
+          } else if (lastSelectedEnt.code !== undefined) {
+            lastSelectedIndex = entities.findIndex(
+              ent => ent.code === lastSelectedEnt.code
+            );
+          }
+        }
+        if (lastSelectedIndex === -1) {
+          return;
+        }
+        const newEntToSelect = getNewEntToSelect({
+          type,
+          lastSelectedIndex,
+          entities,
+          isEntityDisabled
+        });
+
+        if (!newEntToSelect) return;
+        if (shiftHeld && !isSingleSelect) {
+          if (
+            reduxFormSelectedEntityIdMap[
+              newEntToSelect.id || newEntToSelect.code
+            ]
+          ) {
+            //the entity being moved to has already been selected
+            newIdMap = omit(reduxFormSelectedEntityIdMap, [
+              lastSelectedEnt.id || lastSelectedEnt.code
+            ]);
+            newIdMap[newEntToSelect.id || newEntToSelect.code].time =
+              Date.now() + 1;
+          } else {
+            //the entity being moved to has NOT been selected yet
+            newIdMap = {
+              ...reduxFormSelectedEntityIdMap,
+              [newEntToSelect.id || newEntToSelect.code]: {
+                entity: newEntToSelect,
+                time: Date.now()
+              }
+            };
+          }
+        } else {
+          //no shiftHeld
+          newIdMap[newEntToSelect.id || newEntToSelect.code] = {
+            entity: newEntToSelect,
+            time: Date.now()
+          };
+        }
+      }
+
+      finalizeSelection({
+        idMap: newIdMap,
+        entities,
+        props: {
+          onDeselect,
+          onSingleRowSelect,
+          onMultiRowSelect,
+          noDeselectAll,
+          onRowSelect,
+          noSelect,
+          change
+        }
+      });
+    },
+    [
+      change,
+      entities,
+      isEntityDisabled,
+      isSingleSelect,
+      noDeselectAll,
+      noSelect,
+      onDeselect,
+      onMultiRowSelect,
+      onRowSelect,
+      onSingleRowSelect,
+      reduxFormSelectedEntityIdMap
+    ]
+  );
+
   const primarySelectedCellId = useMemo(() => {
     for (const k of Object.keys(selectedCells)) {
       if (selectedCells[k] === PRIMARY_SELECTED_VAL) {
@@ -963,6 +1124,50 @@ const DataTable = ({
     [change]
   );
 
+  const handleEnterStartCellEdit = useCallback(
+    e => {
+      e.stopPropagation();
+      startCellEdit(primarySelectedCellId);
+    },
+    [primarySelectedCellId, startCellEdit]
+  );
+
+  const handleDeleteCell = useCallback(() => {
+    const newCellValidate = {
+      ...reduxFormCellValidation
+    };
+    if (isEmpty(selectedCells)) return;
+    const rowIds = [];
+    updateEntitiesHelper(entities, entities => {
+      const entityIdToEntity = getEntityIdToEntity(entities);
+      Object.keys(selectedCells).forEach(cellId => {
+        const [rowId, path] = cellId.split(":");
+        rowIds.push(rowId);
+        const entity = entityIdToEntity[rowId].e;
+        delete entity._isClean;
+        const { error } = editCellHelper({
+          entity,
+          path,
+          schema,
+          newVal: ""
+        });
+        if (error) {
+          newCellValidate[cellId] = error;
+        } else {
+          delete newCellValidate[cellId];
+        }
+      });
+      updateValidation(entities, newCellValidate);
+    });
+  }, [
+    entities,
+    reduxFormCellValidation,
+    schema,
+    selectedCells,
+    updateEntitiesHelper,
+    updateValidation
+  ]);
+
   const waitUntilAllRowsAreRendered = useCallback(() => {
     return new Promise(resolve => {
       const interval = setInterval(() => {
@@ -977,6 +1182,74 @@ const DataTable = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const handleCopySelectedCells = useCallback(async () => {
+    // if the current selection is consecutive cells then copy with
+    // tabs between. if not then just select primary selected cell
+    if (isEmpty(selectedCells)) return;
+
+    // Temporarily disable virtualization for large tables
+    if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
+      setNoVirtual(true);
+      await waitUntilAllRowsAreRendered();
+    }
+
+    const pathToIndex = getFieldPathToIndex(schema);
+    const entityIdToEntity = getEntityIdToEntity(entities);
+    const selectionGrid = [];
+    let firstRowIndex;
+    let firstCellIndex;
+    Object.keys(selectedCells).forEach(key => {
+      const [rowId, path] = key.split(":");
+      const eInfo = entityIdToEntity[rowId];
+      if (eInfo) {
+        if (firstRowIndex === undefined || eInfo.i < firstRowIndex) {
+          firstRowIndex = eInfo.i;
+        }
+        if (!selectionGrid[eInfo.i]) {
+          selectionGrid[eInfo.i] = [];
+        }
+        const cellIndex = pathToIndex[path];
+        if (firstCellIndex === undefined || cellIndex < firstCellIndex) {
+          firstCellIndex = cellIndex;
+        }
+        selectionGrid[eInfo.i][cellIndex] = true;
+      }
+    });
+    if (firstRowIndex === undefined) return;
+    const allRows = getAllRows(tableRef);
+    let fullCellText = "";
+    const fullJson = [];
+    times(selectionGrid.length, i => {
+      const row = selectionGrid[i];
+      if (fullCellText) {
+        fullCellText += "\n";
+      }
+      if (!row) {
+        return;
+      } else {
+        const jsonRow = [];
+        // ignore header
+        let [rowCopyText, json] = getRowCopyText(allRows[i + 1]);
+        rowCopyText = rowCopyText.split("\t");
+        times(row.length, i => {
+          const cell = row[i];
+          if (cell) {
+            fullCellText += rowCopyText[i];
+            jsonRow.push(json[i]);
+          }
+          if (i !== row.length - 1 && i >= firstCellIndex) fullCellText += "\t";
+        });
+        fullJson.push(jsonRow);
+      }
+    });
+    if (!fullCellText) return window.toastr.warning("No text to copy");
+
+    handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
+
+    // Re-enable virtualization if it was disabled
+    setNoVirtual(false);
+  }, [entities, selectedCells, schema, waitUntilAllRowsAreRendered]);
+
   const handleCopySelectedRows = useCallback(
     async selectedRecords => {
       if (entities.length > VIRTUALIZE_CUTOFF_LENGTH) {
@@ -1019,36 +1292,237 @@ const DataTable = ({
     [entities, waitUntilAllRowsAreRendered]
   );
 
-  const { handleKeyDown, handleKeyUp } = useHotKeysWrapper({
+  const handleCopyHotkey = useCallback(
+    e => {
+      if (isCellEditable) {
+        handleCopySelectedCells(e);
+      } else {
+        handleCopySelectedRows(
+          getRecordsFromIdMap(reduxFormSelectedEntityIdMap),
+          e
+        );
+      }
+    },
+    [
+      handleCopySelectedCells,
+      handleCopySelectedRows,
+      isCellEditable,
+      reduxFormSelectedEntityIdMap
+    ]
+  );
+
+  const handleCut = useCallback(
+    e => {
+      handleDeleteCell();
+      handleCopyHotkey(e);
+    },
+    [handleCopyHotkey, handleDeleteCell]
+  );
+
+  const flashTableBorder = () => {
+    try {
+      const table = tableRef.current.tableRef;
+      table.classList.add("tgBorderBlue");
+      setTimeout(() => {
+        table.classList.remove("tgBorderBlue");
+      }, 300);
+    } catch (e) {
+      console.error(`err when flashing table border:`, e);
+    }
+  };
+
+  const handleUndo = useCallback(() => {
+    if (entitiesUndoRedoStack.currentVersion > 0) {
+      flashTableBorder();
+      const nextState = applyPatches(
+        entities,
+        entitiesUndoRedoStack[entitiesUndoRedoStack.currentVersion]
+          .inversePatches
+      );
+      const { newEnts, validationErrors } =
+        formatAndValidateEntities(nextState);
+      setEntitiesUndoRedoStack(prev => ({
+        ...prev,
+        currentVersion: prev.currentVersion - 1
+      }));
+      updateValidation(newEnts, validationErrors);
+      change("reduxFormEntities", newEnts);
+    }
+  }, [
     change,
     entities,
+    formatAndValidateEntities,
     entitiesUndoRedoStack,
+    updateValidation
+  ]);
+
+  const handleRedo = useCallback(() => {
+    const nextV = entitiesUndoRedoStack.currentVersion + 1;
+    if (entitiesUndoRedoStack[nextV]) {
+      flashTableBorder();
+      const nextState = applyPatches(
+        entities,
+        entitiesUndoRedoStack[nextV].patches
+      );
+      const { newEnts, validationErrors } =
+        formatAndValidateEntities(nextState);
+      change("reduxFormEntities", newEnts);
+      updateValidation(newEnts, validationErrors);
+      setEntitiesUndoRedoStack(prev => ({
+        ...prev,
+        currentVersion: nextV
+      }));
+    }
+  }, [
+    change,
+    entities,
     formatAndValidateEntities,
-    handleCopySelectedRows,
-    isCellEditable,
-    isEntityDisabled,
-    isSingleSelect,
-    noDeselectAll,
-    noSelect,
-    onDeselect,
-    onMultiRowSelect,
-    onRowSelect,
-    onSingleRowSelect,
-    primarySelectedCellId,
-    reduxFormCellValidation,
-    reduxFormSelectedEntityIdMap,
-    schema,
-    selectedCells,
-    setEntitiesUndoRedoStack,
-    setNoVirtual,
-    setSelectedCells,
-    startCellEdit,
-    tableRef,
-    updateEntitiesHelper,
-    updateValidation,
-    waitUntilAllRowsAreRendered
-  });
+    entitiesUndoRedoStack,
+    updateValidation
+  ]);
+
+  const handleSelectAllRows = useCallback(
+    e => {
+      if (isSingleSelect) return;
+      e.preventDefault();
+
+      if (isCellEditable) {
+        const schemaPaths = schema.fields.map(f => f.path);
+        const newSelectedCells = {};
+        entities.forEach((entity, i) => {
+          if (isEntityDisabled(entity)) return;
+          const entityId = getIdOrCodeOrIndex(entity, i);
+          schemaPaths.forEach(p => {
+            newSelectedCells[`${entityId}:${p}`] = true;
+          });
+        });
+        setSelectedCells(newSelectedCells);
+      } else {
+        const newIdMap = {};
+
+        entities.forEach((entity, i) => {
+          if (isEntityDisabled(entity)) return;
+          const entityId = getIdOrCodeOrIndex(entity, i);
+          newIdMap[entityId] = { entity };
+        });
+        finalizeSelection({
+          idMap: newIdMap,
+          entities,
+          props: {
+            onDeselect,
+            onSingleRowSelect,
+            onMultiRowSelect,
+            noDeselectAll,
+            onRowSelect,
+            noSelect,
+            change
+          }
+        });
+      }
+    },
+    [
+      change,
+      entities,
+      isCellEditable,
+      isEntityDisabled,
+      isSingleSelect,
+      noDeselectAll,
+      noSelect,
+      onDeselect,
+      onMultiRowSelect,
+      onRowSelect,
+      onSingleRowSelect,
+      schema.fields
+    ]
+  );
 
+  const hotKeys = useMemo(
+    () => [
+      {
+        global: false,
+        combo: "up",
+        label: "Move Up a Row",
+        onKeyDown: handleRowMove("up")
+      },
+      {
+        global: false,
+        combo: "down",
+        label: "Move Down a Row",
+        onKeyDown: handleRowMove("down")
+      },
+      {
+        global: false,
+        combo: "up+shift",
+        label: "Move Up a Row",
+        onKeyDown: handleRowMove("up", true)
+      },
+      ...(isCellEditable
+        ? [
+            {
+              global: false,
+              combo: "enter",
+              label: "Enter -> Start Cell Edit",
+              onKeyDown: handleEnterStartCellEdit
+            },
+            {
+              global: false,
+              combo: "mod+x",
+              label: "Cut",
+              onKeyDown: handleCut
+            },
+            {
+              global: false,
+              combo: IS_LINUX ? "alt+z" : "mod+z",
+              label: "Undo",
+              onKeyDown: handleUndo
+            },
+            {
+              global: false,
+              combo: IS_LINUX ? "alt+shift+z" : "mod+shift+z",
+              label: "Redo",
+              onKeyDown: handleRedo
+            },
+            {
+              global: false,
+              combo: "backspace",
+              label: "Delete Cell",
+              onKeyDown: handleDeleteCell
+            }
+          ]
+        : []),
+      {
+        global: false,
+        combo: "down+shift",
+        label: "Move Down a Row",
+        onKeyDown: handleRowMove("down", true)
+      },
+      {
+        global: false,
+        combo: "mod + c",
+        label: "Copy rows",
+        onKeyDown: handleCopyHotkey
+      },
+      {
+        global: false,
+        combo: "mod + a",
+        label: "Select rows",
+        onKeyDown: handleSelectAllRows
+      }
+    ],
+    [
+      handleCopyHotkey,
+      handleCut,
+      handleDeleteCell,
+      handleEnterStartCellEdit,
+      handleRedo,
+      handleRowMove,
+      handleSelectAllRows,
+      handleUndo,
+      isCellEditable
+    ]
+  );
+
+  const { handleKeyDown, handleKeyUp } = useHotkeys(hotKeys);
   const [columns, setColumns] = useState([]);
   const [fullscreen, setFullscreen] = useState(false);
   const [selectingAll, setSelectingAll] = useState(false);
@@ -1352,6 +1826,42 @@ const DataTable = ({
     }
   }, [entities, selectedIds, selectAllByDefault, setSelectedIds]);
 
+  const TheadComponent = useCallback(
+    ({ className, style, children }) => {
+      const moveColumn = ({ oldIndex, newIndex }) => {
+        let oldStateColumnIndex, newStateColumnIndex;
+        columns.forEach((column, i) => {
+          if (oldIndex === column.columnIndex) oldStateColumnIndex = i;
+          if (newIndex === column.columnIndex) newStateColumnIndex = i;
+        });
+        // because it is all handled in state we need
+        // to perform the move and update the columnIndices
+        // because they are used for the sortable columns
+        const newColumns = arrayMove(
+          columns,
+          oldStateColumnIndex,
+          newStateColumnIndex
+        ).map((column, i) => {
+          return {
+            ...column,
+            columnIndex: i
+          };
+        });
+        setColumns(newColumns);
+      };
+      return (
+        <SortableColumns
+          className={className}
+          style={style}
+          moveColumn={moveColumnPersist || moveColumn}
+        >
+          {children}
+        </SortableColumns>
+      );
+    },
+    [columns, moveColumnPersist]
+  );
+
   const addEntitiesToSelection = entities => {
     const idMap = reduxFormSelectedEntityIdMap || {};
     const newIdMap = cloneDeep(idMap) || {};
@@ -1588,6 +2098,426 @@ const DataTable = ({
     ]
   );
 
+  const showContextMenu = useCallback(
+    (e, { idMap, selectedCells } = {}) => {
+      let selectedRecords;
+      if (isCellEditable) {
+        const rowIds = {};
+        Object.keys(selectedCells).forEach(cellKey => {
+          const [rowId] = cellKey.split(":");
+          rowIds[rowId] = true;
+        });
+        selectedRecords = entities.filter(
+          ent => rowIds[getIdOrCodeOrIndex(ent)]
+        );
+      } else {
+        selectedRecords = getRecordsFromIdMap(idMap);
+      }
+
+      const itemsToRender = contextMenu({
+        selectedRecords,
+        history
+      });
+      if (!itemsToRender && !isCopyable) return null;
+      const copyMenuItems = [];
+
+      e.persist();
+      if (isCopyable) {
+        //compute the cellWrapper here so we don't lose access to it
+        const cellWrapper =
+          e.target.querySelector(".tg-cell-wrapper") ||
+          e.target.closest(".tg-cell-wrapper");
+        if (cellWrapper) {
+          copyMenuItems.push(
+            <MenuItem
+              key="copyCell"
+              onClick={() => {
+                //TODOCOPY: we need to make sure that the cell copy is being used by the row copy.. right now we have 2 different things going on
+                //do we need to be able to copy hidden cells? It seems like it should just copy what's on the page..?
+                const specificColumn = cellWrapper.getAttribute("data-test");
+                handleCopyRows([cellWrapper.closest(".rt-tr")], {
+                  specificColumn,
+                  onFinishMsg: "Cell copied"
+                });
+                const [text, jsonText] = getCellCopyText(cellWrapper);
+                handleCopyHelper(text, jsonText);
+              }}
+              text="Cell"
+            />
+          );
+
+          copyMenuItems.push(
+            <MenuItem
+              key="copyColumn"
+              onClick={() => {
+                handleCopyColumn(tableRef, cellWrapper);
+              }}
+              text="Column"
+            />
+          );
+          if (selectedRecords.length > 1) {
+            copyMenuItems.push(
+              <MenuItem
+                key="copyColumnSelected"
+                onClick={() => {
+                  handleCopyColumn(tableRef, cellWrapper, selectedRecords);
+                }}
+                text="Column (Selected)"
+              />
+            );
+          }
+        }
+        if (selectedRecords.length === 0 || selectedRecords.length === 1) {
+          //compute the row here so we don't lose access to it
+          const cell =
+            e.target.querySelector(".tg-cell-wrapper") ||
+            e.target.closest(".tg-cell-wrapper") ||
+            e.target.closest(".rt-td");
+          const row = cell.closest(".rt-tr");
+          copyMenuItems.push(
+            <MenuItem
+              key="copySelectedRows"
+              onClick={() => {
+                handleCopyRows([row]);
+                // loop through each cell in the row
+              }}
+              text="Row"
+            />
+          );
+        } else if (selectedRecords.length > 1) {
+          copyMenuItems.push(
+            <MenuItem
+              key="copySelectedRows"
+              onClick={() => {
+                handleCopySelectedRows(selectedRecords, e);
+                // loop through each cell in the row
+              }}
+              text="Rows"
+            />
+          );
+        }
+        copyMenuItems.push(
+          <MenuItem
+            key="copyFullTableRows"
+            onClick={() => {
+              handleCopyTable(tableRef);
+              // loop through each cell in the row
+            }}
+            text="Table"
+          />
+        );
+      }
+      const selectedRowIds = Object.keys(selectedCells).map(cellId => {
+        const [rowId] = cellId.split(":");
+        return rowId;
+      });
+
+      const menu = (
+        <Menu>
+          {itemsToRender}
+          {copyMenuItems.length && (
+            <MenuItem icon="clipboard" key="copyOpts" text="Copy">
+              {copyMenuItems}
+            </MenuItem>
+          )}
+          {isCellEditable && (
+            <>
+              <MenuItem
+                icon="add-row-top"
+                text="Add Row Above"
+                key="addRowAbove"
+                onClick={() => {
+                  insertRows({ above: true });
+                }}
+              />
+              <MenuItem
+                icon="add-row-top"
+                text="Add Row Below"
+                key="addRowBelow"
+                onClick={() => {
+                  insertRows({});
+                }}
+              />
+              <MenuItem
+                icon="remove"
+                text={`Remove Row${selectedRowIds.length > 1 ? "s" : ""}`}
+                key="removeRow"
+                onClick={() => {
+                  const selectedRowIds = Object.keys(selectedCells).map(
+                    cellId => {
+                      const [rowId] = cellId.split(":");
+                      return rowId;
+                    }
+                  );
+                  updateEntitiesHelper(entities, entities => {
+                    const ents = entities.filter(
+                      (e, i) =>
+                        !selectedRowIds.includes(getIdOrCodeOrIndex(e, i))
+                    );
+                    updateValidation(
+                      ents,
+                      omitBy(reduxFormCellValidation, (v, cellId) =>
+                        selectedRowIds.includes(cellId.split(":")[0])
+                      )
+                    );
+                    return ents;
+                  });
+                  refocusTable();
+                }}
+              />
+            </>
+          )}
+        </Menu>
+      );
+      ContextMenu.show(menu, { left: e.clientX, top: e.clientY });
+    },
+    [
+      contextMenu,
+      entities,
+      handleCopySelectedRows,
+      history,
+      insertRows,
+      isCellEditable,
+      isCopyable,
+      reduxFormCellValidation,
+      refocusTable,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
+
+  const getTableRowProps = useCallback(
+    (state, rowInfo) => {
+      if (!rowInfo) {
+        return {
+          className: "no-row-data"
+        };
+      }
+      const entity = rowInfo.original;
+      const rowId = getIdOrCodeOrIndex(entity, rowInfo.index);
+      const rowSelected = reduxFormSelectedEntityIdMap[rowId];
+      const isExpanded = expandedEntityIdMap[rowId];
+      const rowDisabled = isEntityDisabled(entity);
+      const dataId = entity.id || entity.code;
+      return {
+        onClick: e => {
+          if (isCellEditable) return;
+          // if checkboxes are activated or row expander is clicked don't select row
+          if (e.target.matches(".tg-expander, .tg-expander *")) {
+            setExpandedEntityIdMap(prev => ({ ...prev, [rowId]: !isExpanded }));
+            return;
+          } else if (
+            e.target.closest(".tg-react-table-checkbox-cell-container")
+          ) {
+            return;
+          } else if (mustClickCheckboxToSelect) {
+            return;
+          }
+          if (e.detail > 1) {
+            return; //cancel multiple quick clicks
+          }
+          rowClick(e, rowInfo, entities, {
+            reduxFormSelectedEntityIdMap,
+            isSingleSelect,
+            noSelect,
+            onRowClick,
+            isEntityDisabled,
+            withCheckboxes,
+            onDeselect,
+            onSingleRowSelect,
+            onMultiRowSelect,
+            noDeselectAll,
+            onRowSelect,
+            change
+          });
+        },
+        //row right click
+        onContextMenu: e => {
+          e.preventDefault();
+          if (rowId === undefined || rowDisabled || isCellEditable) return;
+          const oldIdMap = cloneDeep(reduxFormSelectedEntityIdMap) || {};
+          let newIdMap;
+          if (withCheckboxes) {
+            newIdMap = oldIdMap;
+          } else {
+            // if we are not using checkboxes we need to make sure
+            // that the id of the record gets added to the id map
+            newIdMap = oldIdMap[rowId] ? oldIdMap : { [rowId]: { entity } };
+
+            // tgreen: this will refresh the selection with fresh data. The entities in redux might not be up to date
+            const keyedEntities = keyBy(entities, getIdOrCodeOrIndex);
+            forEach(newIdMap, (val, key) => {
+              const freshEntity = keyedEntities[key];
+              if (freshEntity) {
+                newIdMap[key] = { ...newIdMap[key], entity: freshEntity };
+              }
+            });
+            finalizeSelection({
+              idMap: newIdMap,
+              entities,
+              props: {
+                onDeselect,
+                onSingleRowSelect,
+                onMultiRowSelect,
+                noDeselectAll,
+                onRowSelect,
+                noSelect,
+                change
+              }
+            });
+          }
+          showContextMenu(e, { idMap: newIdMap, selectedCells });
+        },
+        className: classNames(
+          "with-row-data",
+          getRowClassName && getRowClassName(rowInfo, state),
+          {
+            disabled: rowDisabled,
+            selected: rowSelected && !withCheckboxes,
+            "rt-tr-last-row": rowInfo.index === entities.length - 1
+          }
+        ),
+        "data-test-id": dataId === undefined ? rowInfo.index : dataId,
+        "data-index": rowInfo.index,
+        "data-tip": typeof rowDisabled === "string" ? rowDisabled : undefined,
+        onDoubleClick: e => {
+          if (rowDisabled) return;
+          onDoubleClick &&
+            onDoubleClick(rowInfo.original, rowInfo.index, history, e);
+        }
+      };
+    },
+    [
+      change,
+      entities,
+      expandedEntityIdMap,
+      getRowClassName,
+      history,
+      isCellEditable,
+      isEntityDisabled,
+      isSingleSelect,
+      mustClickCheckboxToSelect,
+      noDeselectAll,
+      noSelect,
+      onDeselect,
+      onDoubleClick,
+      onMultiRowSelect,
+      onRowClick,
+      onRowSelect,
+      onSingleRowSelect,
+      reduxFormSelectedEntityIdMap,
+      selectedCells,
+      showContextMenu,
+      withCheckboxes
+    ]
+  );
+
+  const getTableCellProps = useCallback(
+    (state, rowInfo, column) => {
+      if (!isCellEditable) return {}; //only allow cell selection to do stuff here
+      if (!rowInfo) return {};
+      if (!reduxFormCellValidation) return {};
+      const entity = rowInfo.original;
+      const rowIndex = rowInfo.index;
+      const rowId = getIdOrCodeOrIndex(entity, rowIndex);
+      const {
+        cellId,
+        cellIdAbove,
+        cellIdToRight,
+        cellIdBelow,
+        cellIdToLeft,
+        rowDisabled,
+        columnIndex
+      } = getCellInfo({
+        columnIndex: column.index,
+        columnPath: column.path,
+        rowId,
+        schema,
+        entities,
+        rowIndex,
+        isEntityDisabled,
+        entity
+      });
+
+      const _isClean =
+        (entity._isClean && doNotValidateUntouchedRows) ||
+        isEntityClean(entity);
+
+      const err = !_isClean && reduxFormCellValidation[cellId];
+      let selectedTopBorder,
+        selectedRightBorder,
+        selectedBottomBorder,
+        selectedLeftBorder;
+      if (selectedCells[cellId]) {
+        selectedTopBorder = !selectedCells[cellIdAbove];
+        selectedRightBorder = !selectedCells[cellIdToRight];
+        selectedBottomBorder = !selectedCells[cellIdBelow];
+        selectedLeftBorder = !selectedCells[cellIdToLeft];
+      }
+      const isPrimarySelected = selectedCells[cellId] === PRIMARY_SELECTED_VAL;
+      const className = classNames({
+        isSelectedCell: selectedCells[cellId],
+        isPrimarySelected,
+        isSecondarySelected: selectedCells[cellId] === true,
+        noSelectedTopBorder: !selectedTopBorder,
+        isCleanRow: _isClean,
+        noSelectedRightBorder: !selectedRightBorder,
+        noSelectedBottomBorder: !selectedBottomBorder,
+        noSelectedLeftBorder: !selectedLeftBorder,
+        isDropdownCell: column.type === "dropdown",
+        isEditingCell: reduxFormEditingCell === cellId,
+        hasCellError: !!err,
+        "no-data-tip": selectedCells[cellId]
+      });
+      return {
+        onDoubleClick: () => {
+          // cell double click
+          if (rowDisabled) return;
+          startCellEdit(cellId);
+        },
+        ...(err && {
+          "data-tip": err?.message || err,
+          "data-no-child-data-tip": true
+        }),
+        onContextMenu: e => {
+          const newSelectedCells = { ...selectedCells };
+          if (!isPrimarySelected) {
+            if (primarySelectedCellId) {
+              newSelectedCells[primarySelectedCellId] = true;
+            }
+            newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+            setSelectedCells(newSelectedCells);
+          }
+          showContextMenu(e, { selectedCells: newSelectedCells });
+        },
+        onClick: event => {
+          handleCellClick({
+            event,
+            cellId,
+            rowDisabled,
+            rowIndex,
+            columnIndex
+          });
+        },
+        className
+      };
+    },
+    [
+      doNotValidateUntouchedRows,
+      entities,
+      handleCellClick,
+      isCellEditable,
+      isEntityDisabled,
+      primarySelectedCellId,
+      reduxFormCellValidation,
+      reduxFormEditingCell,
+      schema,
+      selectedCells,
+      showContextMenu,
+      startCellEdit
+    ]
+  );
+
   if (withSelectAll && !safeQuery) {
     throw new Error("safeQuery is needed for selecting all table records");
   }
@@ -1603,7 +2533,7 @@ const DataTable = ({
       : "";
 
   const hasFilters =
-    filters?.length ||
+    filters.length ||
     searchTerm ||
     schema.fields.some(
       field => field.filterIsActive && field.filterIsActive(currentParams)
@@ -1616,7 +2546,7 @@ const DataTable = ({
 
   const filtersOnNonDisplayedFields = useMemo(() => {
     const _filtersOnNonDisplayedFields = [];
-    if (filters?.length) {
+    if (filters && filters.length) {
       schema.fields.forEach(field => {
         const ccDisplayName = getCCDisplayName(field);
         if (field.isHidden) {
@@ -1641,6 +2571,18 @@ const DataTable = ({
   );
   const selectedRowCount = Object.keys(idMap).filter(key => idMap[key]).length;
 
+  let rowsToShow = doNotShowEmptyRows
+    ? Math.min(numRows, entities.length)
+    : numRows;
+  // if there are no entities then provide enough space to show
+  // no rows found message
+  if (entities.length === 0 && rowsToShow < 3) rowsToShow = 3;
+  const expandedRows = entities.reduce((acc, row, index) => {
+    const rowId = getIdOrCodeOrIndex(row, index);
+    acc[index] = expandedEntityIdMap[rowId];
+    return acc;
+  }, {});
+
   const showHeader = (withTitle || withSearch || children) && !noHeader;
   const toggleFullscreenButton = (
     <Button
@@ -1714,19 +2656,44 @@ const DataTable = ({
       _selectedAndTotalMessage += `/ `;
     }
     if (showCount) {
-      _selectedAndTotalMessage += `${entityCount || 0} Total`;
+      if (isEntityCountLoading && entityCount < 1) {
+        _selectedAndTotalMessage += `Loading...`;
+      } else {
+        _selectedAndTotalMessage += `${entityCount || 0} Total`;
+      }
     }
     if (_selectedAndTotalMessage) {
       _selectedAndTotalMessage = <div>{_selectedAndTotalMessage}</div>;
     }
     return _selectedAndTotalMessage;
-  }, [entityCount, selectedRowCount, showCount, showNumSelected]);
+  }, [
+    entityCount,
+    selectedRowCount,
+    showCount,
+    showNumSelected,
+    isEntityCountLoading
+  ]);
 
   const shouldShowPaging =
     !isInfinite &&
     withPaging &&
     (hidePageSizeWhenPossible ? entityCount > pageSize : true);
 
+  const SubComponentToUse = useMemo(() => {
+    if (SubComponent) {
+      return row => {
+        let shouldShow = true;
+        if (shouldShowSubComponent) {
+          shouldShow = shouldShowSubComponent(row.original);
+        }
+        if (shouldShow) {
+          return SubComponent(row);
+        }
+      };
+    }
+    return;
+  }, [SubComponent, shouldShowSubComponent]);
+
   const nonDisplayedFilterComp = useMemo(() => {
     if (filtersOnNonDisplayedFields.length) {
       const content = filtersOnNonDisplayedFields.map(
@@ -1771,12 +2738,179 @@ const DataTable = ({
     return null;
   }, [filtersOnNonDisplayedFields]);
 
+  const filteredEnts = useMemo(() => {
+    if (onlyShowRowsWErrors) {
+      const rowToErrorMap = {};
+      forEach(reduxFormCellValidation, (err, cellId) => {
+        if (err) {
+          const [rowId] = cellId.split(":");
+          rowToErrorMap[rowId] = true;
+        }
+      });
+      return entities.filter(e => {
+        return rowToErrorMap[e.id];
+      });
+    }
+    return entities;
+  }, [entities, onlyShowRowsWErrors, reduxFormCellValidation]);
+
+  const renderColumns = useColumns({
+    addFilters,
+    cellRenderer,
+    columns,
+    currentParams,
+    compact,
+    withDisplayOptions,
+    resetDefaultVisibility,
+    editingCellSelectAll,
+    entities,
+    expandedEntityIdMap,
+    extraCompact,
+    filters,
+    formName,
+    getCellHoverText,
+    isCellEditable,
+    isEntityDisabled,
+    isLocalCall,
+    isSimple,
+    isSingleSelect,
+    isSelectionARectangle,
+    noDeselectAll,
+    noSelect,
+    noUserSelect,
+    onDeselect,
+    onMultiRowSelect,
+    onRowClick,
+    onRowSelect,
+    onSingleRowSelect,
+    order,
+    primarySelectedCellId,
+    reduxFormCellValidation,
+    reduxFormSelectedEntityIdMap,
+    refocusTable,
+    removeSingleFilter,
+    schema,
+    selectedCells,
+    setExpandedEntityIdMap,
+    setNewParams,
+    setOrder,
+    setSelectedCells,
+    shouldShowSubComponent,
+    startCellEdit,
+    SubComponent,
+    tableRef,
+    updateColumnVisibility,
+    updateEntitiesHelper,
+    updateValidation,
+    withCheckboxes,
+    withExpandAndCollapseAllButton,
+    withFilter,
+    withSort,
+    recordIdToIsVisibleMap,
+    setRecordIdToIsVisibleMap
+  });
+
   const scrollToTop = useCallback(
     () =>
       tableRef.current?.tableRef?.children?.[0]?.children?.[0]?.scrollIntoView(),
     []
   );
 
+  const reactTable = useMemo(
+    () => (
+      <ReactTable
+        data={filteredEnts}
+        ref={tableRef}
+        noVirtual={noVirtual}
+        className={classNames({
+          isCellEditable,
+          "tg-table-loading": isLoading,
+          "tg-table-disabled": disabled
+        })}
+        itemSizeEstimator={
+          extraCompact
+            ? itemSizeEstimators.compact
+            : compact
+              ? itemSizeEstimators.normal
+              : itemSizeEstimators.comfortable
+        }
+        TfootComponent={() => {
+          return <button>hasdfasdf</button>;
+        }}
+        // We should try to not give all the props to the render column
+        columns={renderColumns}
+        pageSize={rowsToShow}
+        expanded={expandedRows}
+        showPagination={false}
+        sortable={false}
+        // loading={isLoading || disabled}
+        loading={disabled}
+        defaultResized={resized}
+        onResizedChange={(newResized = []) => {
+          const resizedToUse = newResized.map(column => {
+            // have a min width of 50 so that columns don't disappear
+            if (column.value < 50) {
+              return {
+                ...column,
+                value: 50
+              };
+            } else {
+              return column;
+            }
+          });
+          resizePersist(resizedToUse);
+        }}
+        TheadComponent={TheadComponent}
+        ThComponent={ThComponent}
+        getTrGroupProps={getTableRowProps}
+        getTdProps={getTableCellProps}
+        NoDataComponent={({ children }) =>
+          isLoading ? (
+            <div className="rt-noData">Loading...</div>
+          ) : (
+            <div className="rt-noData">{noRowsFoundMessage || children}</div>
+          )
+        }
+        LoadingComponent={({ loadingText, loading }) => (
+          <DisabledLoadingComponent
+            loading={loading}
+            loadingText={loadingText}
+            disabled={disabled}
+          />
+        )}
+        style={{
+          maxHeight,
+          minHeight: 150,
+          ...style
+        }}
+        SubComponent={SubComponentToUse}
+        {...ReactTableProps}
+      />
+    ),
+    [
+      ReactTableProps,
+      SubComponentToUse,
+      TheadComponent,
+      compact,
+      disabled,
+      expandedRows,
+      extraCompact,
+      filteredEnts,
+      getTableCellProps,
+      getTableRowProps,
+      isCellEditable,
+      isLoading,
+      maxHeight,
+      noRowsFoundMessage,
+      renderColumns,
+      resizePersist,
+      resized,
+      rowsToShow,
+      style,
+      noVirtual
+    ]
+  );
+
   return (
     <div
       tabIndex="1"
@@ -2072,84 +3206,7 @@ const DataTable = ({
               />
             </div>
           )}
-          <ReactTable
-            addFilters={addFilters}
-            cellRenderer={cellRenderer}
-            change={change}
-            columns={columns}
-            compact={compact}
-            contextMenu={contextMenu}
-            currentParams={currentParams}
-            disabled={disabled}
-            doNotShowEmptyRows={doNotShowEmptyRows}
-            doNotValidateUntouchedRows={doNotValidateUntouchedRows}
-            editingCellSelectAll={editingCellSelectAll}
-            entities={entities}
-            expandedEntityIdMap={expandedEntityIdMap}
-            extraCompact={extraCompact}
-            filters={filters}
-            formName={formName}
-            getCellHoverText={getCellHoverText}
-            getRowClassName={getRowClassName}
-            handleCellClick={handleCellClick}
-            handleCopySelectedRows={handleCopySelectedRows}
-            history={history}
-            insertRows={insertRows}
-            isCellEditable={isCellEditable}
-            isCopyable={isCopyable}
-            isEntityDisabled={isEntityDisabled}
-            isLoading={isLoading}
-            isLocalCall={isLocalCall}
-            isSelectionARectangle={isSelectionARectangle}
-            isSimple={isSimple}
-            isSingleSelect={isSingleSelect}
-            maxHeight={maxHeight}
-            moveColumnPersist={moveColumnPersist}
-            mustClickCheckboxToSelect={mustClickCheckboxToSelect}
-            noDeselectAll={noDeselectAll}
-            noRowsFoundMessage={noRowsFoundMessage}
-            noSelect={noSelect}
-            noUserSelect={noUserSelect}
-            noVirtual={noVirtual}
-            numRows={numRows}
-            onDeselect={onDeselect}
-            onDoubleClick={onDoubleClick}
-            onlyShowRowsWErrors={onlyShowRowsWErrors}
-            onMultiRowSelect={onMultiRowSelect}
-            onRowClick={onRowClick}
-            onRowSelect={onRowSelect}
-            onSingleRowSelect={onSingleRowSelect}
-            order={order}
-            primarySelectedCellId={primarySelectedCellId}
-            ReactTableProps={ReactTableProps}
-            recordIdToIsVisibleMap={recordIdToIsVisibleMap}
-            reduxFormCellValidation={reduxFormCellValidation}
-            reduxFormEditingCell={reduxFormEditingCell}
-            reduxFormSelectedEntityIdMap={reduxFormSelectedEntityIdMap}
-            refocusTable={refocusTable}
-            removeSingleFilter={removeSingleFilter}
-            resizePersist={resizePersist}
-            schema={schema}
-            selectedCells={selectedCells}
-            setColumns={setColumns}
-            setExpandedEntityIdMap={setExpandedEntityIdMap}
-            setNewParams={setNewParams}
-            setOrder={setOrder}
-            setRecordIdToIsVisibleMap={setRecordIdToIsVisibleMap}
-            setSelectedCells={setSelectedCells}
-            shouldShowSubComponent={shouldShowSubComponent}
-            startCellEdit={startCellEdit}
-            style={style}
-            SubComponent={SubComponent}
-            tableConfig={tableConfig}
-            tableRef={tableRef}
-            updateEntitiesHelper={updateEntitiesHelper}
-            updateValidation={updateValidation}
-            withCheckboxes={withCheckboxes}
-            withExpandAndCollapseAllButton={withExpandAndCollapseAllButton}
-            withFilter={withFilter}
-            withSort={withSort}
-          />
+          {reactTable}
           {isCellEditable && (
             <div style={{ display: "flex" }}>
               <div
@@ -2195,6 +3252,7 @@ const DataTable = ({
                 {!noFullscreenButton && toggleFullscreenButton}
                 {withDisplayOptions && (
                   <DisplayOptions
+                    doNotSearchHiddenColumns={doNotSearchHiddenColumns}
                     compact={compact}
                     extraCompact={extraCompact}
                     disabled={disabled}
@@ -2247,41 +3305,7 @@ const DataTable = ({
   );
 };
 
-const WithRouterDatatable = withRouter(DataTable);
-
-const RouterDTWrapper = props => {
-  if (props.noRouter) {
-    return <DataTable {...props} />;
-  }
-  return <WithRouterDatatable {...props} />;
-};
-
-const WithReduxFormDataTable = reduxForm({})(RouterDTWrapper);
-
-const ReduxFormDTWrapper = props => {
-  if (props.noForm) {
-    return <RouterDTWrapper {...props} form={props.formName} />;
-  }
-  return <WithReduxFormDataTable {...props} form={props.formName} />;
-};
-
-const WithRouterPagingTool = withRouter(PagingTool);
-
-const RouterPTWrapper = props => {
-  if (props.noRouter) {
-    return <DataTable {...props} />;
-  }
-  return <WithRouterPagingTool {...props} />;
-};
-
-const WithReduxFormPagingTool = reduxForm({})(RouterPTWrapper);
-
-const ConnectedPagingTool = props => {
-  if (props.noForm) {
-    return <RouterPTWrapper {...props} form={props.formName} />;
-  }
-  return <WithReduxFormPagingTool {...props} form={props.formName} />;
-};
-
-export default ReduxFormDTWrapper;
+const WrappedDT = dataTableEnhancer(DataTable);
+export default WrappedDT;
+const ConnectedPagingTool = dataTableEnhancer(PagingTool);
 export { ConnectedPagingTool };