@teselagen/ui 0.7.36 → 0.8.1

package/src/DataTable/index.js

@@ -0,0 +1,3220 @@
+import React, {
+  useEffect,
+  useRef,
+  useMemo,
+  useState,
+  useCallback,
+  useContext
+} from "react";
+import {
+  invert,
+  toNumber,
+  isEmpty,
+  min,
+  max,
+  camelCase,
+  startCase,
+  noop,
+  cloneDeep,
+  keyBy,
+  omit,
+  forEach,
+  lowerCase,
+  get,
+  omitBy,
+  times,
+  toArray,
+  isFunction,
+  isEqual,
+  every,
+  some
+} from "lodash-es";
+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 ReactTable 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 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";
+import { nanoid } from "nanoid";
+import { SwitchField } from "../FormComponents";
+import { validateTableWideErrors } from "./validateTableWideErrors";
+import { editCellHelper } from "./editCellHelper";
+import getTableConfigFromStorage from "./utils/getTableConfigFromStorage";
+import { viewColumn, openColumn, multiViewColumn } from "./viewColumn";
+import convertSchema from "./utils/convertSchema";
+import TableFormTrackerContext from "./TableFormTrackerContext";
+import {
+  getCCDisplayName,
+  getCurrentParamsFromUrl,
+  getQueryParams,
+  makeDataTableHandlers,
+  setCurrentParamsOnUrl
+} from "./utils/queryParams";
+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";
+
+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,
+  isSimple,
+  isLocalCall = true,
+  isTableParamsConnected,
+  noForm,
+  orderByFirstColumn,
+  schema: _schema,
+  showEmptyColumnsByDefault,
+  tableParams: _tableParams,
+  anyTouched,
+  blur,
+  ...ownProps
+}) => {
+  if (isTableParamsConnected && _tableParams && !_tableParams.entities) {
+    throw new Error(
+      `No entities array detected in tableParams object (<DataTable {...tableParams}/>). You need to call withQuery() after withTableParams() like: compose(withTableParams(), withQuery(something)).`
+    );
+  }
+  const dispatch = useDispatch();
+  const change = useCallback(
+    (...args) => dispatch(_change(formName, ...args)),
+    [dispatch, formName]
+  );
+  const tableRef = useRef();
+  const alreadySelected = useRef(false);
+  const [onlyShowRowsWErrors, setOnlyShowRowsWErrors] = useState(false);
+  const [entitiesUndoRedoStack, setEntitiesUndoRedoStack] = useState({
+    currentVersion: 0
+  });
+  const [selectedCells, setSelectedCells] = useState({});
+  const _tableConfig = getTableConfigFromStorage(formName);
+  // make user set page size persist
+  const userSetPageSize =
+    _tableConfig?.userSetPageSize && parseInt(_tableConfig.userSetPageSize, 10);
+
+  const formTracker = useContext(TableFormTrackerContext);
+  useEffect(() => {
+    if (formTracker.isActive && !formTracker.formNames.includes(formName)) {
+      formTracker.pushFormName(formName);
+    }
+  }, [formTracker, formName]);
+
+  const [showForcedHiddenColumns, setShowForcedHidden] = useState(() => {
+    if (showEmptyColumnsByDefault) {
+      return true;
+    }
+    return false;
+  });
+
+  const {
+    reduxFormCellValidation: _reduxFormCellValidation,
+    reduxFormEditingCell,
+    reduxFormEntities,
+    reduxFormQueryParams: _reduxFormQueryParams = {},
+    reduxFormSelectedEntityIdMap: _reduxFormSelectedEntityIdMap = {}
+  } = useSelector(state =>
+    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
+  const reduxFormCellValidation = useDeepEqualMemo(_reduxFormCellValidation);
+  const reduxFormQueryParams = useDeepEqualMemo(_reduxFormQueryParams);
+  const reduxFormSelectedEntityIdMap = useDeepEqualMemo(
+    _reduxFormSelectedEntityIdMap
+  );
+
+  let props = ownProps;
+  if (!isTableParamsConnected) {
+    // When using mobx values we need to transform it to a js array instead of a proxy so the next hooks get the right values
+    const normalizedEntities = isObservableArray(ownProps.entities)
+      ? toJS(ownProps.entities)
+      : ownProps.entities;
+    //this is the case where we're hooking up to withTableParams locally, so we need to take the tableParams off the props
+    props = {
+      ...ownProps,
+      ..._tableParams,
+      entities: normalizedEntities
+    };
+  }
+
+  const convertedSchema = useMemo(() => convertSchema(_schema), [_schema]);
+
+  if (isLocalCall) {
+    if (!noForm && (!formName || formName === "tgDataTable")) {
+      throw new Error(
+        "Please pass a unique 'formName' prop to the locally connected <DataTable/> component with schema: ",
+        _schema
+      );
+    }
+  } else {
+    //in user instantiated withTableParams() call
+    if (!formName || formName === "tgDataTable") {
+      throw new Error(
+        "Please pass a unique 'formName' prop to the withTableParams() with schema: ",
+        _schema
+      );
+    }
+  }
+
+  const { withPaging = !isSimple } = props;
+  const {
+    doNotCoercePageSize,
+    isInfinite = isSimple && !withPaging,
+    syncDisplayOptionsToDb,
+    urlConnected,
+    withSelectedEntities
+  } = props;
+
+  const defaults = useMemo(() => {
+    const _defaults = {
+      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
+        //   filterValue: 'thomas',
+        // }
+      ],
+      ...(props.defaults || {})
+    };
+    if (isLocalCall && orderByFirstColumn && !_defaults?.order?.length) {
+      const r = [getCCDisplayName(convertedSchema.fields[0])];
+      _defaults.order = r;
+    }
+
+    if (!syncDisplayOptionsToDb && userSetPageSize) {
+      _defaults.pageSize = userSetPageSize;
+    }
+
+    return _defaults;
+  }, [
+    controlled_pageSize,
+    convertedSchema.fields,
+    isLocalCall,
+    orderByFirstColumn,
+    props.defaults,
+    syncDisplayOptionsToDb,
+    userSetPageSize
+  ]);
+
+  const selectedEntities = withSelectedEntities
+    ? getRecordsFromIdMap(reduxFormSelectedEntityIdMap)
+    : undefined;
+
+  props = {
+    ...props,
+    ...(withSelectedEntities &&
+      typeof withSelectedEntities === "string" && {
+        [withSelectedEntities]: selectedEntities
+      })
+  };
+
+  const _currentParams = useMemo(() => {
+    const tmp =
+      (urlConnected
+        ? getCurrentParamsFromUrl(history.location) //important to use history location and not ownProps.location because for some reason the location path lags one render behind!!
+        : reduxFormQueryParams) || {};
+    return tmp;
+  }, [history, reduxFormQueryParams, urlConnected]);
+
+  const currentParams = useDeepEqualMemo(_currentParams);
+
+  const tableParams = useMemo(() => {
+    if (!isTableParamsConnected) {
+      const setNewParams = newParams => {
+        // we always will update the redux params as a workaround for withRouter not always working
+        // if inside a redux-connected container https://github.com/ReactTraining/react-router/issues/5037
+        change("reduxFormQueryParams", prev => {
+          let tmp = newParams;
+          if (typeof tmp === "function") tmp = newParams(prev);
+          urlConnected && setCurrentParamsOnUrl(tmp, history?.replace);
+          return tmp;
+        });
+      };
+
+      const dispatchProps = makeDataTableHandlers({
+        setNewParams,
+        defaults,
+        onlyOneFilter: props.onlyOneFilter
+      });
+
+      const changeFormValue = (...args) => change(...args);
+
+      return {
+        changeFormValue,
+        selectedEntities,
+        ..._tableParams,
+        ...dispatchProps,
+        isTableParamsConnected: true //let the table know not to do local sorting/filtering etc.
+      };
+    }
+    return _tableParams;
+  }, [
+    _tableParams,
+    change,
+    defaults,
+    history?.replace,
+    isTableParamsConnected,
+    props.onlyOneFilter,
+    selectedEntities,
+    urlConnected
+  ]);
+
+  props = {
+    ...props,
+    ...tableParams
+  };
+
+  const queryParams = useMemo(() => {
+    if (!isTableParamsConnected) {
+      const additionalFilterToUse =
+        typeof props.additionalFilter === "function"
+          ? props.additionalFilter
+          : () => props.additionalFilter;
+
+      const additionalOrFilterToUse =
+        typeof props.additionalOrFilter === "function"
+          ? props.additionalOrFilter
+          : () => props.additionalOrFilter;
+
+      return getQueryParams({
+        doNotCoercePageSize,
+        currentParams,
+        entities: props.entities, // for local table
+        urlConnected,
+        defaults,
+        schema: convertedSchema,
+        isInfinite,
+        isLocalCall,
+        additionalFilter: additionalFilterToUse,
+        additionalOrFilter: additionalOrFilterToUse,
+        noOrderError: props.noOrderError,
+        isCodeModel: props.isCodeModel,
+        ownProps: props
+      });
+    }
+    return {};
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    props.entities,
+    props.noOrderError,
+    props.isCodeModel,
+    convertedSchema,
+    currentParams,
+    doNotCoercePageSize,
+    isInfinite,
+    isLocalCall,
+    isTableParamsConnected,
+    urlConnected
+  ]);
+
+  props = {
+    ...props,
+    ...queryParams
+  };
+
+  const {
+    addFilters = noop,
+    additionalFilters,
+    additionalFooterButtons,
+    autoFocusSearch,
+    cellRenderer,
+    children,
+    className = "",
+    clearFilters = noop,
+    compact: _compact = true,
+    compactPaging,
+    contextMenu = noop,
+    controlled_hasNextPage,
+    controlled_onRefresh,
+    controlled_page,
+    controlled_setPage,
+    controlled_setPageSize,
+    controlled_total,
+    currentUser,
+    deleteTableConfiguration,
+    disabled = false,
+    disableSetPageSize,
+    doNotShowEmptyRows,
+    doNotValidateUntouchedRows,
+    editingCellSelectAll,
+    entities: _origEntities = [],
+    entitiesAcrossPages: _entitiesAcrossPages,
+    entityCount,
+    errorParsingUrlString,
+    expandAllByDefault,
+    extraClasses = "",
+    extraCompact: _extraCompact,
+    filters = [],
+    fragment,
+    getCellHoverText,
+    getRowClassName,
+    helperProp,
+    hideColumnHeader,
+    hideDisplayOptionsIcon,
+    hidePageSizeWhenPossible = isSimple ? !withPaging : false,
+    hideSelectedCount = isSimple,
+    hideSetPageSize,
+    hideTotalPages,
+    selectedIds,
+    isCellEditable,
+    isCopyable = true,
+    isEntityDisabled = noop,
+    isLoading = false,
+    isOpenable,
+    isSingleSelect = false,
+    isViewable,
+    recordIdToIsVisibleMap,
+    setRecordIdToIsVisibleMap,
+    keepSelectionOnPageChange,
+    leftOfSearchBarItems,
+    maxHeight = 600,
+    minimalStyle,
+    mustClickCheckboxToSelect,
+    noDeselectAll,
+    noFooter = isSimple ? !withPaging : false,
+    noFullscreenButton = isSimple,
+    noHeader = false,
+    noPadding = isSimple,
+    noRowsFoundMessage,
+    noSelect = false,
+    noUserSelect,
+    onDeselect = noop,
+    onDoubleClick,
+    onMultiRowSelect = noop,
+    onRefresh,
+    onRowClick = noop,
+    onRowSelect = noop,
+    onSingleRowSelect = noop,
+    order,
+    page = 1,
+    pageSize: _pageSize = 10,
+    pagingDisabled,
+    removeSingleFilter,
+    ReactTableProps = {},
+    safeQuery,
+    searchMenuButton,
+    searchTerm,
+    selectAllByDefault,
+    setNewParams,
+    setOrder,
+    setPage = noop,
+    setPageSize = noop,
+    setSearchTerm = noop,
+    shouldShowSubComponent,
+    showCount = false,
+    style = {},
+    SubComponent,
+    subHeader,
+    tableConfigurations,
+    tableName,
+    topLeftItems,
+    upsertFieldOption,
+    upsertTableConfiguration,
+    variables,
+    withCheckboxes = false,
+    withDisplayOptions,
+    withExpandAndCollapseAllButton,
+    withFilter,
+    withSearch = !isSimple,
+    withSelectAll,
+    withSort,
+    withTitle = !isSimple,
+    noExcessiveCheck
+  } = 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
+  // allOrderedEntities updated
+  useEffect(() => {
+    !noExcessiveCheck &&
+      isBeingCalledExcessively({ uniqName: `dt_entities_${formName}` });
+    change("allOrderedEntities", entitiesAcrossPages);
+    if (entities.length === 0 || isEmpty(reduxFormSelectedEntityIdMap)) return;
+    changeSelectedEntities({
+      idMap: reduxFormSelectedEntityIdMap,
+      entities,
+      change
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    entitiesAcrossPages,
+    reduxFormSelectedEntityIdMap,
+    change,
+    noExcessiveCheck
+  ]);
+
+  const [tableConfig, setTableConfig] = useState({ fieldOptions: [] });
+
+  useEffect(() => {
+    if (withDisplayOptions) {
+      let newTableConfig = {};
+      if (syncDisplayOptionsToDb) {
+        newTableConfig = tableConfigurations && tableConfigurations[0];
+      } else {
+        newTableConfig = getTableConfigFromStorage(formName);
+      }
+      !noExcessiveCheck &&
+        isBeingCalledExcessively({ uniqName: `dt_setTableConfig_${formName}` });
+      // if the tableConfig is the same as the newTableConfig, don't update
+      setTableConfig(prev => {
+        if (!newTableConfig) {
+          newTableConfig = {
+            fieldOptions: []
+          };
+          if (isEqual(prev, newTableConfig)) {
+            return prev;
+          } else {
+            return newTableConfig;
+          }
+        } else {
+          return newTableConfig;
+        }
+      });
+    }
+  }, [
+    convertedSchema, // If the schema changes we want to take into account the synced tableConfig again
+    formName,
+    syncDisplayOptionsToDb,
+    tableConfigurations,
+    withDisplayOptions,
+    noExcessiveCheck
+  ]);
+
+  const schema = useMemo(() => {
+    const schema = { ...convertedSchema };
+    if (isViewable) {
+      schema.fields = [viewColumn, ...schema.fields];
+    }
+    if (recordIdToIsVisibleMap) {
+      schema.fields = [multiViewColumn, ...schema.fields];
+    }
+    if (isOpenable) {
+      schema.fields = [
+        openColumn({ onDoubleClick, history }),
+        ...schema.fields
+      ];
+    }
+    // this must come before handling orderings.
+    schema.fields = schema.fields.map(field => {
+      if (field.placementPath) {
+        return {
+          ...field,
+          sortDisabled:
+            field.sortDisabled ||
+            (typeof field.path === "string" && field.path.includes(".")),
+          path: field.placementPath
+        };
+      } else {
+        return field;
+      }
+    });
+
+    if (withDisplayOptions) {
+      const fieldOptsByPath = keyBy(tableConfig.fieldOptions, "path");
+      schema.fields = schema.fields.map(field => {
+        const fieldOpt = fieldOptsByPath[field.path];
+        let noValsForField = false;
+        // only add this hidden column ability if no paging
+        if (
+          !showForcedHiddenColumns &&
+          withDisplayOptions &&
+          (isSimple || isInfinite)
+        ) {
+          noValsForField = entities.every(e => {
+            const val = get(e, field.path);
+            return field.render
+              ? !field.render(val, e, undefined, {
+                  currentParams,
+                  setNewParams
+                })
+              : cellRenderer?.[field.path]
+                ? !cellRenderer[field.path](val, e, undefined, {
+                    currentParams,
+                    setNewParams
+                  })
+                : !val;
+          });
+        }
+        if (noValsForField) {
+          return {
+            ...field,
+            isHidden: true,
+            isForcedHidden: true
+          };
+        } else if (fieldOpt) {
+          return {
+            ...field,
+            isHidden: fieldOpt.isHidden
+          };
+        } else {
+          return field;
+        }
+      });
+
+      const columnOrderings = tableConfig.columnOrderings;
+      if (columnOrderings) {
+        const fieldsWithOrders = [];
+        const fieldsWithoutOrder = [];
+        // if a new field has been added since the orderings were set then we want
+        // it to be at the end instead of the beginning
+        schema.fields.forEach(field => {
+          if (columnOrderings.indexOf(field.path) > -1) {
+            fieldsWithOrders.push(field);
+          } else {
+            fieldsWithoutOrder.push(field);
+          }
+        });
+        schema.fields = fieldsWithOrders
+          .sort(({ path: path1 }, { path: path2 }) => {
+            return (
+              columnOrderings.indexOf(path1) - columnOrderings.indexOf(path2)
+            );
+          })
+          .concat(fieldsWithoutOrder);
+        // We shouldn't need to update the columnOrderings here, this could lead
+        // to unnecessary updates. TableConfig and schema have circular
+        // dependencies, which is bad at the moment of updating.
+        if (
+          !isEqual(
+            schema.fields.map(f => f.path),
+            columnOrderings
+          )
+        ) {
+          setTableConfig(prev => ({
+            ...prev,
+            columnOrderings: schema.fields.map(f => f.path)
+          }));
+        }
+      }
+    }
+    return schema;
+  }, [
+    cellRenderer,
+    convertedSchema,
+    currentParams,
+    entities,
+    history,
+    isInfinite,
+    isOpenable,
+    isSimple,
+    isViewable,
+    onDoubleClick,
+    setNewParams,
+    showForcedHiddenColumns,
+    tableConfig.columnOrderings,
+    tableConfig.fieldOptions,
+    withDisplayOptions,
+    recordIdToIsVisibleMap
+  ]);
+
+  const {
+    moveColumnPersist,
+    persistPageSize,
+    resetDefaultVisibility,
+    resizePersist,
+    updateColumnVisibility,
+    updateTableDisplayDensity
+  } = useMemo(() => {
+    let resetDefaultVisibility;
+    let updateColumnVisibility;
+    let updateTableDisplayDensity;
+    let persistPageSize;
+    let moveColumnPersist;
+    let resizePersist = noop;
+
+    if (withDisplayOptions) {
+      const fieldOptsByPath = keyBy(tableConfig.fieldOptions, "path");
+      if (syncDisplayOptionsToDb) {
+        // sync up to db
+        // There must be a better way to set this variable...
+        let tableConfigurationId;
+        resetDefaultVisibility = function () {
+          tableConfigurationId = tableConfig.id;
+          if (tableConfigurationId) {
+            deleteTableConfiguration(tableConfigurationId);
+          }
+        };
+        updateColumnVisibility = function ({ shouldShow, path }) {
+          if (tableConfigurationId) {
+            const existingFieldOpt = fieldOptsByPath[path] || {};
+            upsertFieldOption({
+              id: existingFieldOpt.id,
+              path,
+              isHidden: !shouldShow,
+              tableConfigurationId
+            });
+          } else {
+            upsertTableConfiguration({
+              userId: currentUser.user.id,
+              formName,
+              fieldOptions: [
+                {
+                  path,
+                  isHidden: !shouldShow
+                }
+              ]
+            });
+          }
+        };
+      } else {
+        const syncStorage = newTableConfig => {
+          setTableConfig(newTableConfig);
+          window.localStorage.setItem(formName, JSON.stringify(newTableConfig));
+        };
+
+        //sync display options with localstorage
+        resetDefaultVisibility = function () {
+          setTableConfig({ fieldOptions: [] });
+          window.localStorage.removeItem(formName);
+        };
+        updateColumnVisibility = function ({ path, paths, shouldShow }) {
+          const newFieldOpts = {
+            ...fieldOptsByPath
+          };
+          const pathsToUse = paths ? paths : [path];
+          pathsToUse.forEach(path => {
+            newFieldOpts[path] = { path, isHidden: !shouldShow };
+          });
+          syncStorage({ ...tableConfig, fieldOptions: toArray(newFieldOpts) });
+        };
+        updateTableDisplayDensity = function (density) {
+          syncStorage({ ...tableConfig, density: density });
+        };
+        persistPageSize = function (pageSize) {
+          syncStorage({ ...tableConfig, userSetPageSize: pageSize });
+        };
+        moveColumnPersist = function ({ oldIndex, newIndex }) {
+          // we might already have an array of the fields [path1, path2, ..etc]
+          const columnOrderings =
+            tableConfig.columnOrderings ||
+            schema.fields.map(({ path }) => path); // columnOrderings is [path1, path2, ..etc]
+          syncStorage({
+            ...tableConfig,
+            columnOrderings: arrayMove(columnOrderings, oldIndex, newIndex)
+          });
+        };
+        resizePersist = function (newResized) {
+          syncStorage({ ...tableConfig, resized: newResized });
+        };
+      }
+    }
+    return {
+      moveColumnPersist,
+      persistPageSize,
+      resetDefaultVisibility,
+      resizePersist,
+      updateColumnVisibility,
+      updateTableDisplayDensity
+    };
+  }, [
+    currentUser?.user?.id,
+    deleteTableConfiguration,
+    formName,
+    schema.fields,
+    syncDisplayOptionsToDb,
+    tableConfig,
+    upsertFieldOption,
+    upsertTableConfiguration,
+    withDisplayOptions
+  ]);
+
+  let compact = _compact;
+  let extraCompact = _extraCompact;
+
+  if (withDisplayOptions && tableConfig.density) {
+    compact = tableConfig.density === "compact";
+    extraCompact = tableConfig.density === "extraCompact";
+  }
+
+  const resized = useMemo(
+    () => tableConfig.resized || [],
+    [tableConfig?.resized]
+  );
+
+  const pageSize = controlled_pageSize || _pageSize;
+
+  const [expandedEntityIdMap, setExpandedEntityIdMap] = useState(() => {
+    const initialExpandedEntityIdMap = {};
+    if (expandAllByDefault) {
+      entities.forEach(entity => {
+        initialExpandedEntityIdMap[entity.id || entity.code] = true;
+      });
+    }
+    return initialExpandedEntityIdMap;
+  });
+
+  const updateValidation = useCallback(
+    (entities, newCellValidate) => {
+      const tableWideErr = validateTableWideErrors({
+        entities,
+        schema,
+        newCellValidate
+      });
+      change("reduxFormCellValidation", tableWideErr);
+    },
+    [schema, change]
+  );
+
+  const updateEntitiesHelper = useCallback(
+    (ents, fn) => {
+      const [nextState, patches, inversePatches] = produceWithPatches(ents, fn);
+      if (!inversePatches.length) return;
+      const thatNewNew = [...nextState];
+      thatNewNew.isDirty = true;
+      change("reduxFormEntities", thatNewNew);
+      setEntitiesUndoRedoStack(prev => ({
+        ...omitBy(prev, (v, k) => {
+          return toNumber(k) > prev.currentVersion + 1;
+        }),
+        currentVersion: prev.currentVersion + 1,
+        [prev.currentVersion + 1]: {
+          inversePatches,
+          patches
+        }
+      }));
+    },
+    [change]
+  );
+
+  const formatAndValidateEntities = useCallback(
+    (entities, { useDefaultValues, indexToStartAt } = {}) => {
+      const editableFields = schema.fields.filter(f => !f.isNotEditable);
+      const validationErrors = {};
+
+      const newEnts = immer(entities, entities => {
+        entities.forEach((e, index) => {
+          editableFields.forEach(columnSchema => {
+            if (useDefaultValues) {
+              if (e[columnSchema.path] === undefined) {
+                if (isFunction(columnSchema.defaultValue)) {
+                  e[columnSchema.path] = columnSchema.defaultValue(
+                    index + indexToStartAt,
+                    e
+                  );
+                } else e[columnSchema.path] = columnSchema.defaultValue;
+              }
+            }
+            //mutative
+            const { error } = editCellHelper({
+              entity: e,
+              columnSchema,
+              newVal: e[columnSchema.path]
+            });
+            if (error) {
+              const rowId = getIdOrCodeOrIndex(e, index);
+              validationErrors[`${rowId}:${columnSchema.path}`] = error;
+            }
+          });
+        });
+      });
+      return {
+        newEnts,
+        validationErrors
+      };
+    },
+    [schema.fields]
+  );
+
+  const updateValidationHelper = useCallback(() => {
+    updateValidation(entities, reduxFormCellValidation);
+  }, [entities, reduxFormCellValidation, updateValidation]);
+
+  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);
+        }
+
+        updateValidation(entities, {
+          ...reduxFormCellValidation,
+          ...validationErrors
+        });
+      });
+    },
+    [
+      entities,
+      formatAndValidateEntities,
+      reduxFormCellValidation,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
+
+  const getEditableTableInfoAndThrowFormError = useCallback(() => {
+    const { entsToUse, validationToUse } = removeCleanRows(
+      reduxFormEntities,
+      reduxFormCellValidation
+    );
+    const validationWTableErrs = validateTableWideErrors({
+      entities: entsToUse,
+      schema,
+      newCellValidate: validationToUse
+    });
+
+    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;
+    }
+  }, [
+    addEditableTableEntities,
+    getEditableTableInfoAndThrowFormError,
+    helperProp,
+    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) {
+        return k;
+      }
+    }
+  }, [selectedCells]);
+
+  const startCellEdit = useCallback(
+    (cellId, initialValue) => {
+      // This initial value is not needed if the event is propagated accordingly.
+      // This is directly connected to the RenderCell component, which does set
+      // the initial value.
+      change("reduxFormInitialValue", initialValue);
+      change("reduxFormEditingCell", prev => {
+        //check if the cell is already selected and editing and if so, don't change it
+        if (prev === cellId) return cellId;
+        setSelectedCells(prev => {
+          if (prev[cellId] === PRIMARY_SELECTED_VAL) {
+            return prev;
+          }
+          return { ...prev, [cellId]: PRIMARY_SELECTED_VAL };
+        });
+        return cellId;
+      });
+    },
+    [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 handleCopySelectedCells = useCallback(
+    e => {
+      // if the current selection is consecutive cells then copy with
+      // tabs between. if not then just select primary selected cell
+      if (isEmpty(selectedCells)) return;
+      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(e);
+      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");
+    },
+    [entities, selectedCells, schema]
+  );
+
+  const handleCopySelectedRows = useCallback(
+    (selectedRecords, e) => {
+      const idToIndex = entities.reduce((acc, e, i) => {
+        acc[e.id || e.code] = i;
+        return acc;
+      }, {});
+
+      //index 0 of the table is the column titles
+      //must add 1 to rowNum
+      const rowNumbersToCopy = selectedRecords
+        .map(rec => idToIndex[rec.id || rec.code] + 1)
+        .sort();
+
+      if (!rowNumbersToCopy.length) return;
+      rowNumbersToCopy.unshift(0); //add in the header row
+      try {
+        const allRowEls = getAllRows(e);
+        if (!allRowEls) return;
+        const rowEls = rowNumbersToCopy.map(i => allRowEls[i]);
+
+        handleCopyRows(rowEls, {
+          onFinishMsg: "Selected rows copied"
+        });
+      } catch (error) {
+        console.error(`error:`, error);
+        window.toastr.error("Error copying rows.");
+      }
+    },
+    [entities]
+  );
+
+  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,
+    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);
+
+  // format in the schema shouldn't be something that changes the value
+  // everytime, it produces weird behavior since it keeps rerendering,
+  // we should make enforce the user set the format as something that
+  // "formats", not "changes".
+  useEffect(() => {
+    const formatAndValidateTableInitial = () => {
+      const { newEnts, validationErrors } = formatAndValidateEntities(entities);
+      const toKeep = {};
+      //on the initial load we want to keep any async table wide errors
+      forEach(reduxFormCellValidation, (v, k) => {
+        if (v && v._isTableAsyncWideError) {
+          toKeep[k] = v;
+        }
+      });
+      change("reduxFormEntities", prev => {
+        if (!isEqual(prev, newEnts)) {
+          return newEnts;
+        }
+        return prev;
+      });
+      updateValidation(newEnts, {
+        ...toKeep,
+        ...validationErrors
+      });
+    };
+    isCellEditable && formatAndValidateTableInitial();
+  }, [
+    change,
+    entities,
+    formatAndValidateEntities,
+    isCellEditable,
+    reduxFormCellValidation,
+    updateValidation
+  ]);
+
+  const handlePaste = useCallback(
+    e => {
+      if (isCellEditable) {
+        if (isEmpty(selectedCells)) return;
+        try {
+          let pasteData = [];
+          let toPaste;
+          if (window.clipboardData && window.clipboardData.getData) {
+            // IE
+            toPaste = window.clipboardData.getData("Text");
+          } else if (e.clipboardData && e.clipboardData.getData) {
+            toPaste = e.clipboardData.getData("text/plain");
+          }
+          const jsonToPaste = e.clipboardData.getData("application/json");
+          try {
+            const pastedJson = [];
+            JSON.parse(jsonToPaste).forEach(row => {
+              const newRow = [];
+              Object.values(row).forEach(cell => {
+                const cellVal = JSON.parse(cell);
+                newRow.push(cellVal);
+              });
+              pastedJson.push(newRow);
+            });
+            pasteData = pastedJson;
+            // try to remove the header row if it exists
+            if (
+              pasteData[0] &&
+              pasteData[0][0] &&
+              pasteData[0][0].__isHeaderCell
+            ) {
+              pasteData = pasteData.slice(1);
+            }
+          } catch (e) {
+            if (toPaste.includes(",")) {
+              //try papaparsing it out as a csv if it contains commas
+              try {
+                const { data, errors } = papaparse.parse(toPaste, {
+                  header: false
+                });
+                if (data?.length && !errors?.length) {
+                  pasteData = data;
+                }
+              } catch (error) {
+                console.error(`error p982qhgpf9qh`, error);
+              }
+            }
+          }
+          pasteData = pasteData.length ? pasteData : defaultParsePaste(toPaste);
+
+          if (!pasteData || !pasteData.length) return;
+
+          if (pasteData.length === 1 && pasteData[0].length === 1) {
+            const newCellValidate = {
+              ...reduxFormCellValidation
+            };
+            // single paste value, fill all cells with value
+            const newVal = pasteData[0][0];
+            updateEntitiesHelper(entities, entities => {
+              const entityIdToEntity = getEntityIdToEntity(entities);
+              Object.keys(selectedCells).forEach(cellId => {
+                const [rowId, path] = cellId.split(":");
+
+                const entity = entityIdToEntity[rowId].e;
+                delete entity._isClean;
+                const { error } = editCellHelper({
+                  entity,
+                  path,
+                  schema,
+                  newVal: formatPasteData({ newVal, path, schema })
+                });
+                if (error) {
+                  newCellValidate[cellId] = error;
+                } else {
+                  delete newCellValidate[cellId];
+                }
+              });
+              updateValidation(entities, newCellValidate);
+            });
+          } else {
+            // handle paste in same format
+            if (primarySelectedCellId) {
+              const newCellValidate = {
+                ...reduxFormCellValidation
+              };
+
+              const newSelectedCells = { ...selectedCells };
+              updateEntitiesHelper(entities, entities => {
+                const entityIdToEntity = getEntityIdToEntity(entities);
+                const [rowId, primaryCellPath] =
+                  primarySelectedCellId.split(":");
+                const primaryEntityInfo = entityIdToEntity[rowId];
+                const startIndex = primaryEntityInfo.i;
+                const endIndex = primaryEntityInfo.i + pasteData.length;
+                for (let i = startIndex; i < endIndex; i++) {
+                  if (!entities[i]) {
+                    entities[i] = { id: nanoid() };
+                  }
+                }
+                const entitiesToManipulate = entities.slice(
+                  startIndex,
+                  endIndex
+                );
+                const pathToIndex = getFieldPathToIndex(schema);
+                const indexToPath = invert(pathToIndex);
+                const startCellIndex = pathToIndex[primaryCellPath];
+                pasteData.forEach((row, i) => {
+                  row.forEach((newVal, j) => {
+                    if (newVal) {
+                      const cellIndexToChange = startCellIndex + j;
+                      const entity = entitiesToManipulate[i];
+                      if (entity) {
+                        delete entity._isClean;
+                        const path = indexToPath[cellIndexToChange];
+                        if (path) {
+                          const { error } = editCellHelper({
+                            entity,
+                            path,
+                            schema,
+                            newVal: formatPasteData({
+                              newVal,
+                              path,
+                              schema
+                            })
+                          });
+                          const cellId = `${getIdOrCodeOrIndex(entity)}:${path}`;
+                          if (!newSelectedCells[cellId]) {
+                            newSelectedCells[cellId] = true;
+                          }
+                          if (error) {
+                            newCellValidate[cellId] = error;
+                          } else {
+                            delete newCellValidate[cellId];
+                          }
+                        }
+                      }
+                    }
+                  });
+                });
+                updateValidation(entities, newCellValidate);
+              });
+              setSelectedCells(newSelectedCells);
+            }
+          }
+        } catch (error) {
+          console.error(`error:`, error);
+        }
+      }
+    },
+    [
+      entities,
+      isCellEditable,
+      primarySelectedCellId,
+      reduxFormCellValidation,
+      schema,
+      selectedCells,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
+
+  useEffect(() => {
+    document.addEventListener("paste", handlePaste);
+    return () => {
+      document.removeEventListener("paste", handlePaste);
+    };
+  }, [handlePaste]);
+
+  useEffect(() => {
+    addFilters(additionalFilters);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [additionalFilters]);
+
+  useEffect(() => {
+    setColumns(
+      schema.fields
+        ? schema.fields.reduce((col, field, i) => {
+            if (field.isHidden) {
+              return col;
+            }
+            return col.concat({
+              ...field,
+              columnIndex: i
+            });
+          }, [])
+        : []
+    );
+  }, [schema?.fields]);
+
+  const setSelectedIds = useCallback(
+    (selectedIds, scrollToFirst) => {
+      const idArray = Array.isArray(selectedIds) ? selectedIds : [selectedIds];
+      const selectedEntities = entities.filter(
+        e => idArray.indexOf(getIdOrCodeOrIndex(e)) > -1 && !isEntityDisabled(e)
+      );
+      const newIdMap = selectedEntities.reduce((acc, entity) => {
+        acc[getIdOrCodeOrIndex(entity)] = { entity };
+        return acc;
+      }, {});
+      setExpandedEntityIdMap(newIdMap);
+      finalizeSelection({
+        idMap: newIdMap,
+        entities,
+        props: {
+          onDeselect,
+          onSingleRowSelect,
+          onMultiRowSelect,
+          noDeselectAll,
+          onRowSelect,
+          noSelect,
+          change
+        }
+      });
+      // This option could be eliminated, keeping it because it was prior in the
+      // code, but it is a fuctionality not needed
+      if (scrollToFirst) {
+        const idToScrollTo = idArray[0];
+        if (!idToScrollTo && idToScrollTo !== 0) return;
+        const entityIndexToScrollTo = entities.findIndex(
+          e => e.id === idToScrollTo || e.code === idToScrollTo
+        );
+        if (entityIndexToScrollTo === -1 || !tableRef.current) return;
+        const tableBody = tableRef.current.tableRef.querySelector(".rt-tbody");
+        if (!tableBody) return;
+        const rowEl =
+          tableBody.getElementsByClassName("rt-tr-group")[
+            entityIndexToScrollTo
+          ];
+        if (!rowEl) return;
+        setTimeout(() => {
+          //we need to delay for a teeny bit to make sure the table has drawn
+          rowEl &&
+            tableBody &&
+            scrollIntoView(rowEl, tableBody, {
+              alignWithTop: true
+            });
+        }, 0);
+      }
+    },
+    [
+      change,
+      entities,
+      isEntityDisabled,
+      noDeselectAll,
+      noSelect,
+      onDeselect,
+      onMultiRowSelect,
+      onRowSelect,
+      onSingleRowSelect
+    ]
+  );
+
+  // We need to make sure this only runs at the beggining
+  useEffect(() => {
+    if (selectedIds) {
+      setSelectedIds(selectedIds);
+    }
+    if (selectAllByDefault && entities && entities.length) {
+      if (alreadySelected.current) return;
+      setSelectedIds(entities.map(getIdOrCodeOrIndex));
+      alreadySelected.current = true;
+    }
+  }, [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) || {};
+    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
+      }
+    });
+  };
+
+  const refocusTable = useCallback(() => {
+    const table = tableRef.current?.tableRef?.closest(
+      ".data-table-container>div"
+    );
+    table?.focus();
+  }, []);
+
+  const isSelectionARectangle = useCallback(() => {
+    if (selectedCells && Object.keys(selectedCells).length > 1) {
+      const pathToIndex = getFieldPathToIndex(schema);
+      const entityMap = getEntityIdToEntity(entities);
+      let selectionGrid = [];
+      let firstCellIndex;
+      let lastCellIndex;
+      let lastRowIndex;
+      let firstRowIndex;
+      const selectedPaths = [];
+      Object.keys(selectedCells).forEach(key => {
+        // if (reduxFormSelectedCells[key] === PRIMARY_SELECTED_VAL) {
+        //   primaryCellId = key;
+        // }
+        const [rowId, cellPath] = key.split(":");
+        if (!selectedPaths.includes(cellPath)) selectedPaths.push(cellPath);
+        const cellIndex = pathToIndex[cellPath];
+        const ent = entityMap[rowId];
+        if (!ent) return;
+        const { i } = ent;
+        if (firstRowIndex === undefined || i < firstRowIndex) {
+          firstRowIndex = i;
+        }
+        if (lastRowIndex === undefined || i > lastRowIndex) {
+          lastRowIndex = i;
+        }
+        if (!selectionGrid[i]) selectionGrid[i] = [];
+        selectionGrid[i][cellIndex] = { cellId: key, rowIndex: i, cellIndex };
+        if (firstCellIndex === undefined || cellIndex < firstCellIndex) {
+          firstCellIndex = cellIndex;
+        }
+        if (lastCellIndex === undefined || cellIndex > lastCellIndex) {
+          lastCellIndex = cellIndex;
+        }
+      });
+      selectionGrid = selectionGrid.slice(firstRowIndex);
+      let isRectangle = true;
+      for (let i = 0; i < selectionGrid.length; i++) {
+        const row = selectionGrid[i];
+        if (!row) {
+          isRectangle = false;
+          break;
+        } else {
+          for (let j = firstCellIndex; j < row.length; j++) {
+            if (!row[j]) {
+              isRectangle = false;
+              break;
+            }
+          }
+        }
+      }
+      if (isRectangle) {
+        return {
+          entityMap,
+          firstCellIndex,
+          firstRowIndex,
+          isRect: true,
+          lastCellIndex,
+          lastRowIndex,
+          selectedPaths,
+          selectionGrid,
+          pathToIndex
+        };
+      } else {
+        return {};
+      }
+    }
+    return {};
+  }, [entities, schema, selectedCells]);
+
+  const handleCellClick = useCallback(
+    ({ event, cellId }) => {
+      if (!cellId) return;
+      const [rowId, cellPath] = cellId.split(":");
+      const entityMap = getEntityIdToEntity(entities);
+      const { e: entity, i: rowIndex } = entityMap[rowId];
+      const pathToIndex = getFieldPathToIndex(schema);
+      const columnIndex = pathToIndex[cellPath];
+      const rowDisabled = isEntityDisabled(entity);
+
+      if (rowDisabled) return;
+      let newSelectedCells = {
+        ...selectedCells
+      };
+      if (newSelectedCells[cellId] && !event.shiftKey) {
+        // don't deselect if editing
+        if (reduxFormEditingCell === cellId) return;
+        if (event.metaKey) {
+          delete newSelectedCells[cellId];
+        } else {
+          newSelectedCells = {};
+          newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+        }
+      } else {
+        if (event.metaKey) {
+          if (isEmpty(newSelectedCells)) {
+            newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+          } else {
+            newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+            if (primarySelectedCellId)
+              newSelectedCells[primarySelectedCellId] = true;
+          }
+        } else if (event.shiftKey) {
+          if (primarySelectedCellId) {
+            const [rowId, colPath] = primarySelectedCellId.split(":");
+            const primaryRowIndex = entities.findIndex((e, i) => {
+              return getIdOrCodeOrIndex(e, i) === rowId;
+            });
+            const fieldToIndex = getFieldPathToIndex(schema);
+            const primaryColIndex = fieldToIndex[colPath];
+
+            if (primaryRowIndex === -1 || primaryColIndex === -1) {
+              newSelectedCells = {};
+              newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+            } else {
+              const minRowIndex = min([primaryRowIndex, rowIndex]);
+              const minColIndex = min([primaryColIndex, columnIndex]);
+              const maxRowIndex = max([primaryRowIndex, rowIndex]);
+              const maxColIndex = max([primaryColIndex, columnIndex]);
+              const entitiesBetweenRows = entities.slice(
+                minRowIndex,
+                maxRowIndex + 1
+              );
+              const fieldsBetweenCols = schema.fields.slice(
+                minColIndex,
+                maxColIndex + 1
+              );
+              newSelectedCells = {
+                [primarySelectedCellId]: PRIMARY_SELECTED_VAL
+              };
+              entitiesBetweenRows.forEach(e => {
+                const rowId = getIdOrCodeOrIndex(e, entities.indexOf(e));
+                fieldsBetweenCols.forEach(f => {
+                  const cellId = `${rowId}:${f.path}`;
+                  if (!newSelectedCells[cellId])
+                    newSelectedCells[cellId] = true;
+                });
+              });
+              // newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+              // newSelectedCells[primarySelectedCellId] = true;
+            }
+          } else {
+            newSelectedCells = {};
+            newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+          }
+        } else {
+          newSelectedCells = {};
+          newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+        }
+      }
+
+      setSelectedCells(newSelectedCells);
+    },
+    [
+      entities,
+      isEntityDisabled,
+      primarySelectedCellId,
+      reduxFormEditingCell,
+      schema,
+      selectedCells
+    ]
+  );
+
+  const insertRows = useCallback(
+    ({ above, numRows = 1, appendToBottom } = {}) => {
+      const [rowId] = primarySelectedCellId?.split(":") || [];
+      updateEntitiesHelper(entities, entities => {
+        const newEntities = times(numRows).map(() => ({ id: nanoid() }));
+
+        const indexToInsert = entities.findIndex((e, i) => {
+          return getIdOrCodeOrIndex(e, i) === rowId;
+        });
+        const insertIndex = above ? indexToInsert : indexToInsert + 1;
+        const insertIndexToUse = appendToBottom ? entities.length : insertIndex;
+        let { newEnts, validationErrors } = formatAndValidateEntities(
+          newEntities,
+          {
+            useDefaultValues: true,
+            indexToStartAt: insertIndexToUse
+          }
+        );
+
+        newEnts = newEnts.map(e => ({
+          ...e,
+          _isClean: true
+        }));
+        updateValidation(entities, {
+          ...reduxFormCellValidation,
+          ...validationErrors
+        });
+
+        entities.splice(insertIndexToUse, 0, ...newEnts);
+      });
+      refocusTable();
+    },
+    [
+      entities,
+      formatAndValidateEntities,
+      primarySelectedCellId,
+      reduxFormCellValidation,
+      refocusTable,
+      updateEntitiesHelper,
+      updateValidation
+    ]
+  );
+
+  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(e, cellWrapper);
+              }}
+              text="Column"
+            />
+          );
+          if (selectedRecords.length > 1) {
+            copyMenuItems.push(
+              <MenuItem
+                key="copyColumnSelected"
+                onClick={() => {
+                  handleCopyColumn(e, 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(e);
+              // 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");
+  }
+
+  let compactClassName = "";
+  if (compactPaging) {
+    compactClassName += " tg-compact-paging";
+  }
+  compactClassName += extraCompact
+    ? " tg-extra-compact-table"
+    : compact
+      ? " tg-compact-table"
+      : "";
+
+  const hasFilters =
+    filters.length ||
+    searchTerm ||
+    schema.fields.some(
+      field => field.filterIsActive && field.filterIsActive(currentParams)
+    );
+
+  const additionalFilterKeys = schema.fields.reduce((acc, field) => {
+    if (field.filterKey) acc.push(field.filterKey);
+    return acc;
+  }, []);
+
+  const filtersOnNonDisplayedFields = useMemo(() => {
+    const _filtersOnNonDisplayedFields = [];
+    if (filters && filters.length) {
+      schema.fields.forEach(field => {
+        const ccDisplayName = getCCDisplayName(field);
+        if (field.isHidden) {
+          filters.forEach(filter => {
+            if (filter.filterOn === ccDisplayName) {
+              _filtersOnNonDisplayedFields.push({
+                ...filter,
+                displayName: field.displayName
+              });
+            }
+          });
+        }
+      });
+    }
+    return _filtersOnNonDisplayedFields;
+  }, [filters, schema.fields]);
+
+  const numRows = isInfinite ? entities.length : pageSize;
+  const idMap = useMemo(
+    () => reduxFormSelectedEntityIdMap || {},
+    [reduxFormSelectedEntityIdMap]
+  );
+  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
+      icon="fullscreen"
+      active={fullscreen}
+      minimal
+      onClick={() => setFullscreen(prev => !prev)}
+    />
+  );
+
+  const { showSelectAll, showClearAll } = useMemo(() => {
+    let _showSelectAll = false;
+    let _showClearAll = false;
+    // we want to show select all if every row on the current page is selected
+    // and not every row across all pages are already selected.
+    if (!isInfinite) {
+      const canShowSelectAll =
+        withSelectAll ||
+        (entitiesAcrossPages && numRows < entitiesAcrossPages.length);
+      if (canShowSelectAll) {
+        // could all be disabled
+        let atLeastOneRowOnCurrentPageSelected = false;
+        const allRowsOnCurrentPageSelected = entities.every(e => {
+          const rowId = getIdOrCodeOrIndex(e);
+          const selected = idMap[rowId] || isEntityDisabled(e);
+          if (selected) atLeastOneRowOnCurrentPageSelected = true;
+          return selected;
+        });
+        if (
+          atLeastOneRowOnCurrentPageSelected &&
+          allRowsOnCurrentPageSelected
+        ) {
+          let everyEntitySelected;
+          if (isLocalCall) {
+            everyEntitySelected = entitiesAcrossPages.every(e => {
+              const rowId = getIdOrCodeOrIndex(e);
+              return idMap[rowId] || isEntityDisabled(e);
+            });
+          } else {
+            everyEntitySelected = entityCount <= selectedRowCount;
+          }
+          if (everyEntitySelected) {
+            _showClearAll = selectedRowCount;
+          }
+          // only show if not all selected
+          _showSelectAll = !everyEntitySelected;
+        }
+      }
+    }
+    return { showSelectAll: _showSelectAll, showClearAll: _showClearAll };
+  }, [
+    entities,
+    entitiesAcrossPages,
+    entityCount,
+    idMap,
+    isEntityDisabled,
+    isInfinite,
+    isLocalCall,
+    numRows,
+    selectedRowCount,
+    withSelectAll
+  ]);
+
+  const showNumSelected = !noSelect && !isSingleSelect && !hideSelectedCount;
+  const selectedAndTotalMessage = useMemo(() => {
+    let _selectedAndTotalMessage = "";
+    if (showNumSelected) {
+      _selectedAndTotalMessage += `${selectedRowCount} Selected `;
+    }
+    if (showCount && showNumSelected) {
+      _selectedAndTotalMessage += `/ `;
+    }
+    if (showCount) {
+      _selectedAndTotalMessage += `${entityCount || 0} Total`;
+    }
+    if (_selectedAndTotalMessage) {
+      _selectedAndTotalMessage = <div>{_selectedAndTotalMessage}</div>;
+    }
+    return _selectedAndTotalMessage;
+  }, [entityCount, selectedRowCount, showCount, showNumSelected]);
+
+  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(
+        ({ displayName, path, selectedFilter, filterValue }) => {
+          let filterValToDisplay = filterValue;
+          if (selectedFilter === "inList") {
+            filterValToDisplay = Array.isArray(filterValToDisplay)
+              ? filterValToDisplay
+              : filterValToDisplay && filterValToDisplay.split(";");
+          }
+          if (Array.isArray(filterValToDisplay)) {
+            filterValToDisplay = filterValToDisplay.join(", ");
+          }
+          return (
+            <div
+              key={displayName || startCase(camelCase(path))}
+              className="tg-filter-on-non-displayed-field"
+            >
+              {displayName || startCase(camelCase(path))}{" "}
+              {lowerCase(selectedFilter)} {filterValToDisplay}
+            </div>
+          );
+        }
+      );
+      return (
+        <div style={{ marginRight: 5, marginLeft: "auto" }}>
+          <Tooltip
+            content={
+              <div>
+                Active filters on hidden columns:
+                <br />
+                <br />
+                {content}
+              </div>
+            }
+          >
+            <Icon icon="filter-list" />
+          </Tooltip>
+        </div>
+      );
+    }
+    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,
+    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,
+    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}
+        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}
+        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 ? null : (
+            <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
+    ]
+  );
+
+  return (
+    <div tabIndex="1" onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
+      <div
+        className={classNames(
+          "data-table-container",
+          extraClasses,
+          className,
+          compactClassName,
+          {
+            fullscreen,
+            in_cypress_test: window.Cypress, //tnr: this is a hack to make cypress be able to correctly click the table without the sticky header getting in the way. remove me once https://github.com/cypress-io/cypress/issues/871 is fixed
+            "dt-isViewable": isViewable,
+            "dt-minimalStyle": minimalStyle,
+            "no-padding": noPadding,
+            "hide-column-header": hideColumnHeader
+          }
+        )}
+      >
+        <div
+          className="data-table-container-inner"
+          {...(isCellEditable && {
+            tabIndex: -1,
+            onKeyDown: e => {
+              const isTabKey = e.key === "Tab";
+              const isArrowKey = e.key.startsWith("Arrow");
+              if ((isArrowKey && e.target?.tagName !== "INPUT") || isTabKey) {
+                const left = e.key === "ArrowLeft";
+                const up = e.key === "ArrowUp";
+                const down = e.key === "ArrowDown" || e.key === "Enter";
+                let cellIdToUse = primarySelectedCellId;
+                const pathToIndex = getFieldPathToIndex(schema);
+                const entityMap = getEntityIdToEntity(entities);
+                if (!cellIdToUse) return;
+                const {
+                  isRect,
+                  firstCellIndex,
+                  lastCellIndex,
+                  lastRowIndex,
+                  firstRowIndex
+                } = isSelectionARectangle();
+
+                if (isRect) {
+                  const [rowId, columnPath] = cellIdToUse.split(":");
+
+                  const columnIndex = pathToIndex[columnPath];
+                  const indexToPath = invert(pathToIndex);
+                  // we want to grab the cell opposite to the primary selected cell
+                  if (
+                    firstCellIndex === columnIndex &&
+                    firstRowIndex === entityMap[rowId]?.i
+                  ) {
+                    cellIdToUse = `${entities[lastRowIndex].id}:${indexToPath[lastCellIndex]}`;
+                  } else if (
+                    firstCellIndex === columnIndex &&
+                    lastRowIndex === entityMap[rowId]?.i
+                  ) {
+                    cellIdToUse = `${entities[firstRowIndex].id}:${indexToPath[lastCellIndex]}`;
+                  } else if (
+                    lastCellIndex === columnIndex &&
+                    firstRowIndex === entityMap[rowId]?.i
+                  ) {
+                    cellIdToUse = `${entities[lastRowIndex].id}:${indexToPath[firstCellIndex]}`;
+                  } else {
+                    cellIdToUse = `${entities[firstRowIndex].id}:${indexToPath[firstCellIndex]}`;
+                  }
+                }
+                if (!cellIdToUse) return;
+                const [rowId, columnPath] = cellIdToUse.split(":");
+                const columnIndex = pathToIndex[columnPath];
+
+                const { i: rowIndex } = entityMap[rowId];
+
+                const {
+                  cellIdAbove,
+                  cellIdToRight,
+                  cellIdBelow,
+                  cellIdToLeft
+                } = getCellInfo({
+                  columnIndex,
+                  columnPath,
+                  rowId,
+                  schema,
+                  entities,
+                  rowIndex,
+                  isEntityDisabled,
+                  entity: entityMap[rowId].e
+                });
+                const nextCellId = up
+                  ? cellIdAbove
+                  : down
+                    ? cellIdBelow
+                    : left
+                      ? cellIdToLeft
+                      : cellIdToRight;
+
+                e.stopPropagation();
+                e.preventDefault();
+                if (!nextCellId) return;
+                // this.handleCellBlur();
+                // this.finishCellEdit
+                if (
+                  document.activeElement?.parentElement?.classList.contains(
+                    "rt-td"
+                  )
+                ) {
+                  document.activeElement.blur();
+                }
+                handleCellClick({
+                  event: e,
+                  cellId: nextCellId
+                });
+              }
+              if (e.metaKey || e.ctrlKey || e.altKey) return;
+              if (!primarySelectedCellId) return;
+              const entityIdToEntity = getEntityIdToEntity(entities);
+              const [rowId] = primarySelectedCellId.split(":");
+              if (!rowId) return;
+              const entity = entityIdToEntity[rowId].e;
+              if (!entity) return;
+              const rowDisabled = isEntityDisabled(entity);
+              const isNum = e.code?.startsWith("Digit");
+              const isLetter = e.code?.startsWith("Key");
+              if (!isNum && !isLetter) {
+                return;
+              }
+              if (rowDisabled) return;
+              e.stopPropagation();
+              startCellEdit(primarySelectedCellId, e.key);
+            }
+          })}
+        >
+          {isCellEditable && entities.length > 50 && (
+            // test for this!!
+            <SwitchField
+              name="onlyShowRowsWErrors"
+              inlineLabel={true}
+              label="Only Show Rows With Errors"
+              onChange={e => {
+                setOnlyShowRowsWErrors(e.target.value);
+              }}
+            />
+          )}
+          {showHeader && (
+            <div className="data-table-header">
+              <div className="data-table-title-and-buttons">
+                {tableName && withTitle && (
+                  <span className="data-table-title">{tableName}</span>
+                )}
+                {children}
+                {topLeftItems}
+              </div>
+              {errorParsingUrlString && (
+                <Callout
+                  icon="error"
+                  style={{
+                    width: "unset"
+                  }}
+                  intent={Intent.WARNING}
+                >
+                  Error parsing URL
+                </Callout>
+              )}
+              {nonDisplayedFilterComp}
+              {withSearch && (
+                <div className="data-table-search-and-clear-filter-container">
+                  {leftOfSearchBarItems}
+                  {hasFilters ? (
+                    <Tooltip content="Clear Filters">
+                      <Button
+                        minimal
+                        intent="danger"
+                        icon="filter-remove"
+                        disabled={disabled}
+                        className="data-table-clear-filters"
+                        onClick={() => {
+                          clearFilters(additionalFilterKeys);
+                        }}
+                      />
+                    </Tooltip>
+                  ) : (
+                    ""
+                  )}
+                  <SearchBar
+                    noForm={noForm}
+                    searchInput={currentParams.searchTerm}
+                    setSearchTerm={setSearchTerm}
+                    loading={isLoading}
+                    searchMenuButton={searchMenuButton}
+                    disabled={disabled}
+                    autoFocusSearch={autoFocusSearch}
+                  />
+                </div>
+              )}
+            </div>
+          )}
+          {subHeader}
+          {showSelectAll && !isSingleSelect && (
+            <div
+              style={{
+                marginTop: 5,
+                marginBottom: 5,
+                display: "flex",
+                alignItems: "center"
+              }}
+            >
+              All items on this page are selected.{" "}
+              <Button
+                small
+                minimal
+                intent="primary"
+                text={`Select all ${
+                  entityCount || entitiesAcrossPages.length
+                } items`}
+                loading={selectingAll}
+                onClick={async () => {
+                  if (withSelectAll) {
+                    // this will be by querying for everything
+                    setSelectingAll(true);
+                    try {
+                      const allEntities = await safeQuery(fragment, {
+                        variables: {
+                          filter: variables.filter,
+                          sort: variables.sort
+                        },
+                        canCancel: true
+                      });
+                      addEntitiesToSelection(allEntities);
+                    } catch (error) {
+                      console.error(`error:`, error);
+                      window.toastr.error("Error selecting all constructs");
+                    }
+                    setSelectingAll(false);
+                  } else {
+                    addEntitiesToSelection(entitiesAcrossPages);
+                  }
+                }}
+              />
+            </div>
+          )}
+          {showClearAll > 0 && (
+            <div
+              style={{
+                marginTop: 5,
+                marginBottom: 5,
+                display: "flex",
+                alignItems: "center"
+              }}
+            >
+              All {showClearAll} items are selected.
+              <Button
+                small
+                minimal
+                intent="primary"
+                text="Clear Selection"
+                onClick={() => {
+                  finalizeSelection({
+                    idMap: {},
+                    entities,
+                    props: {
+                      onDeselect,
+                      onSingleRowSelect,
+                      onMultiRowSelect,
+                      noDeselectAll,
+                      onRowSelect,
+                      noSelect,
+                      change
+                    }
+                  });
+                }}
+              />
+            </div>
+          )}
+          {reactTable}
+          {isCellEditable && (
+            <div style={{ display: "flex" }}>
+              <div
+                style={{
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "center"
+                }}
+              >
+                {!onlyShowRowsWErrors && (
+                  <Button
+                    icon="add"
+                    onClick={() => {
+                      insertRows({ numRows: 10, appendToBottom: true });
+                    }}
+                    minimal
+                  >
+                    Add 10 Rows
+                  </Button>
+                )}
+              </div>
+              <Button
+                onClick={e => {
+                  handleCopyTable(e, { isDownload: true });
+                }}
+                data-tip="Download Table as CSV"
+                minimal
+                icon="download"
+              />
+            </div>
+          )}
+          {!noFooter && (
+            <div
+              className="data-table-footer"
+              style={{
+                justifyContent:
+                  !showNumSelected && !showCount ? "flex-end" : "space-between"
+              }}
+            >
+              {selectedAndTotalMessage}
+              <div style={{ display: "flex", flexWrap: "wrap" }}>
+                {additionalFooterButtons}
+                {!noFullscreenButton && toggleFullscreenButton}
+                {withDisplayOptions && (
+                  <DisplayOptions
+                    compact={compact}
+                    extraCompact={extraCompact}
+                    disabled={disabled}
+                    hideDisplayOptionsIcon={hideDisplayOptionsIcon}
+                    resetDefaultVisibility={resetDefaultVisibility}
+                    updateColumnVisibility={updateColumnVisibility}
+                    updateTableDisplayDensity={updateTableDisplayDensity}
+                    showForcedHiddenColumns={showForcedHiddenColumns}
+                    setShowForcedHidden={setShowForcedHidden}
+                    hasOptionForForcedHidden={
+                      withDisplayOptions && (isSimple || isInfinite)
+                    }
+                    schema={schema}
+                  />
+                )}
+                {shouldShowPaging && (
+                  <PagingTool
+                    controlled_hasNextPage={controlled_hasNextPage}
+                    controlled_onRefresh={controlled_onRefresh}
+                    controlled_page={controlled_page}
+                    controlled_setPage={controlled_setPage}
+                    controlled_setPageSize={controlled_setPageSize}
+                    controlled_total={controlled_total}
+                    disabled={disabled}
+                    disableSetPageSize={disableSetPageSize}
+                    entities={entities}
+                    entityCount={entityCount}
+                    hideSetPageSize={hideSetPageSize}
+                    hideTotalPages={hideTotalPages}
+                    keepSelectionOnPageChange={keepSelectionOnPageChange}
+                    onRefresh={onRefresh}
+                    page={page}
+                    pageSize={pageSize}
+                    pagingDisabled={pagingDisabled}
+                    persistPageSize={persistPageSize}
+                    setPage={setPage}
+                    setPageSize={setPageSize}
+                    setSelectedEntityIdMap={newIdMap => {
+                      change("reduxFormSelectedEntityIdMap", newIdMap);
+                    }}
+                    scrollToTop={scrollToTop}
+                  />
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const WrappedDT = dataTableEnhancer(DataTable);
+export default WrappedDT;
+const ConnectedPagingTool = dataTableEnhancer(PagingTool);
+export { ConnectedPagingTool };