@teselagen/ui 0.5.19 → 0.5.20

package/src/DataTable/index.js

@@ -1,10 +1,15 @@
-import React, { createRef } from "react";
+/* eslint react/jsx-no-bind: 0 */
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import copy from "copy-to-clipboard";
+import download from "downloadjs";
 import {
   invert,
   toNumber,
   isEmpty,
   min,
   max,
+  flatMap,
   set,
   map,
   toString,
@@ -26,6 +31,7 @@ import {
   every
 } from "lodash-es";
 import joinUrl from "url-join";
+
 import {
   Button,
   Menu,
@@ -34,6 +40,7 @@ import {
   ContextMenu,
   Checkbox,
   Icon,
+  Popover,
   Intent,
   Callout,
   Tooltip
@@ -51,50 +58,30 @@ import immer, { produceWithPatches, enablePatches, applyPatches } from "immer";
 import papaparse from "papaparse";
 import remarkGfm from "remark-gfm";
 
-import {
-  computePresets,
-  defaultParsePaste,
-  formatPasteData,
-  getAllRows,
-  getCellCopyText,
-  getCellInfo,
-  getEntityIdToEntity,
-  getFieldPathToIndex,
-  getFieldPathToField,
-  getIdOrCodeOrIndex,
-  getLastSelectedEntity,
-  getNewEntToSelect,
-  getNumberStrAtEnd,
-  getRecordsFromIdMap,
-  getRowCopyText,
-  getSelectedRowsFromEntities,
-  handleCopyColumn,
-  handleCopyHelper,
-  handleCopyRows,
-  isBottomRightCornerOfRectangle,
-  isEntityClean,
-  removeCleanRows,
-  stripNumberAtEnd
-} from "./utils";
-import InfoHelper from "../InfoHelper";
+import TgSelect from "../TgSelect";
 import { withHotkeys } from "../utils/hotkeyUtils";
+import InfoHelper from "../InfoHelper";
 import getTextFromEl from "../utils/getTextFromEl";
+import { getSelectedRowsFromEntities } from "./utils/selection";
 import rowClick, {
   changeSelectedEntities,
   finalizeSelection
 } from "./utils/rowClick";
 import PagingTool from "./PagingTool";
 import FilterAndSortMenu from "./FilterAndSortMenu";
+import getIdOrCodeOrIndex from "./utils/getIdOrCodeOrIndex";
 import SearchBar from "./SearchBar";
 import DisplayOptions from "./DisplayOptions";
 import DisabledLoadingComponent from "./DisabledLoadingComponent";
 import SortableColumns from "./SortableColumns";
+import computePresets from "./utils/computePresets";
 import dataTableEnhancer from "./dataTableEnhancer";
 import defaultProps from "./defaultProps";
 
 import "../toastr";
 import "@teselagen/react-table/react-table.css";
 import "./style.css";
+import { getRecordsFromIdMap } from "./utils/withSelectedEntities";
 import { CellDragHandle } from "./CellDragHandle";
 import { nanoid } from "nanoid";
 import { SwitchField } from "../FormComponents";
@@ -103,27 +90,15 @@ import { editCellHelper } from "./editCellHelper";
 import { getCellVal } from "./getCellVal";
 import { getVals } from "./getVals";
 import { throwFormError } from "../throwFormError";
-import { DropdownCell } from "./DropdownCell";
-import { EditableCell } from "./EditabelCell";
-import { ColumnFilterMenu } from "./ColumnFilterMenu";
 enablePatches();
 
 const PRIMARY_SELECTED_VAL = "main_cell";
 
 dayjs.extend(localizedFormat);
 const IS_LINUX = window.navigator.platform.toLowerCase().search("linux") > -1;
-
-const itemSizeEstimators = {
-  compact: () => 25.34,
-  normal: () => 33.34,
-  comfortable: () => 41.34
-};
-
 class DataTable extends React.Component {
   constructor(props) {
     super(props);
-
-    this.tableRef = createRef();
     if (this.props.helperProp) {
       this.props.helperProp.updateValidationHelper =
         this.updateValidationHelper;
@@ -204,52 +179,25 @@ class DataTable extends React.Component {
       }
     });
   }
-
   state = {
     columns: [],
-    fullscreen: false,
-    // This state prevents the first letter from not being written,
-    // when the user starts typing in a cell. It is quite hacky, we should
-    // refactor this in the future.
-    editableCellInitialValue: ""
+    fullscreen: false
   };
-  static defaultProps = defaultProps;
 
-  getPrimarySelectedCellId = () => {
-    const { reduxFormSelectedCells = {} } = this.props;
-    for (const k of Object.keys(reduxFormSelectedCells)) {
-      if (reduxFormSelectedCells[k] === PRIMARY_SELECTED_VAL) {
-        return k;
-      }
-    }
-  };
+  static defaultProps = defaultProps;
 
-  startCellEdit = (cellId, { shouldSelectAll } = {}) => {
-    const {
-      change,
-      reduxFormSelectedCells = {},
-      reduxFormEditingCell
-    } = computePresets(this.props);
-    const newSelectedCells = { ...reduxFormSelectedCells };
-    newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
-    //check if the cell is already selected and editing and if so, don't change it
-    if (reduxFormEditingCell === cellId) return;
-    change("reduxFormSelectedCells", newSelectedCells);
-    change("reduxFormEditingCell", cellId);
-    if (shouldSelectAll) {
-      //we should select the text
-      change("reduxFormEditingCellSelectAll", true);
-    }
+  toggleFullscreen = () => {
+    this.setState({
+      fullscreen: !this.state.fullscreen
+    });
   };
-
   handleEnterStartCellEdit = e => {
     e.stopPropagation();
     this.startCellEdit(this.getPrimarySelectedCellId());
   };
-
   flashTableBorder = () => {
     try {
-      const table = this.tableRef.current.tableRef;
+      const table = ReactDOM.findDOMNode(this.table);
       table.classList.add("tgBorderBlue");
       setTimeout(() => {
         table.classList.remove("tgBorderBlue");
@@ -258,59 +206,6 @@ class DataTable extends React.Component {
       console.error(`err when flashing table border:`, e);
     }
   };
-
-  formatAndValidateEntities = (
-    entities,
-    { useDefaultValues, indexToStartAt } = {}
-  ) => {
-    const { schema } = this.props;
-    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
-    };
-  };
-
-  updateValidation = (entities, newCellValidate) => {
-    const { change, schema } = computePresets(this.props);
-    const tableWideErr = validateTableWideErrors({
-      entities,
-      schema,
-      newCellValidate,
-      props: this.props
-    });
-    change("reduxFormCellValidation", tableWideErr);
-    this.forceUpdate();
-  };
-
   handleUndo = () => {
     const {
       change,
@@ -336,7 +231,6 @@ class DataTable extends React.Component {
       });
     }
   };
-
   handleRedo = () => {
     const {
       change,
@@ -361,7 +255,6 @@ class DataTable extends React.Component {
       });
     }
   };
-
   updateFromProps = (oldProps, newProps) => {
     const {
       selectedIds,
@@ -373,6 +266,7 @@ class DataTable extends React.Component {
       reduxFormExpandedEntityIdMap,
       change
     } = newProps;
+    const table = ReactDOM.findDOMNode(this.table);
 
     const idMap = reduxFormSelectedEntityIdMap;
 
@@ -438,8 +332,7 @@ class DataTable extends React.Component {
       // if not changing selectedIds then we just want to make sure selected entities
       // stored in redux are in proper format
       // if selected ids have changed then it will handle redux selection
-      const tableScrollElement =
-        this.tableRef.current.tableRef.getElementsByClassName("rt-table")[0];
+      const tableScrollElement = table.getElementsByClassName("rt-table")[0];
       const {
         entities: oldEntities = [],
         reduxFormSelectedEntityIdMap: oldIdMap
@@ -488,9 +381,8 @@ class DataTable extends React.Component {
       const entityIndexToScrollTo = entities.findIndex(
         e => e.id === idToScrollTo || e.code === idToScrollTo
       );
-      if (entityIndexToScrollTo === -1 || !this.tableRef.current) return;
-      const tableBody =
-        this.tableRef.current.tableRef.querySelector(".rt-tbody");
+      if (entityIndexToScrollTo === -1 || !table) return;
+      const tableBody = table.querySelector(".rt-tbody");
       if (!tableBody) return;
       const rowEl =
         tableBody.getElementsByClassName("rt-tr-group")[entityIndexToScrollTo];
@@ -505,7 +397,45 @@ class DataTable extends React.Component {
       }, 0);
     }
   };
+  formatAndValidateEntities = (
+    entities,
+    { useDefaultValues, indexToStartAt } = {}
+  ) => {
+    const { schema } = this.props;
+    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
+    };
+  };
   formatAndValidateTableInitial = () => {
     const {
       _origEntities,
@@ -532,25 +462,151 @@ class DataTable extends React.Component {
     });
   };
 
-  updateEntitiesHelper = (ents, fn) => {
-    const { change, reduxFormEntitiesUndoRedoStack = { currentVersion: 0 } } =
-      this.props;
-    const [nextState, patches, inversePatches] = produceWithPatches(ents, fn);
-    if (!inversePatches.length) return;
-    const thatNewNew = [...nextState];
-    thatNewNew.isDirty = true;
-    change("reduxFormEntities", thatNewNew);
-    change("reduxFormEntitiesUndoRedoStack", {
-      ...omitBy(reduxFormEntitiesUndoRedoStack, (v, k) => {
-        return toNumber(k) > reduxFormEntitiesUndoRedoStack.currentVersion + 1;
-      }),
-      currentVersion: reduxFormEntitiesUndoRedoStack.currentVersion + 1,
-      [reduxFormEntitiesUndoRedoStack.currentVersion + 1]: {
-        inversePatches,
-        patches
+  componentDidMount() {
+    const {
+      isCellEditable,
+      entities = [],
+      isLoading,
+      showForcedHiddenColumns,
+      setShowForcedHidden
+    } = this.props;
+    isCellEditable && this.formatAndValidateTableInitial();
+    this.updateFromProps({}, computePresets(this.props));
+    document.addEventListener("paste", this.handlePaste);
+
+    if (!entities.length && !isLoading && !showForcedHiddenColumns) {
+      setShowForcedHidden(true);
+    }
+    // const table = ReactDOM.findDOMNode(this.table);
+    // let theads = table.getElementsByClassName("rt-thead");
+    // let tbody = table.getElementsByClassName("rt-tbody")[0];
+
+    // tbody.addEventListener("scroll", () => {
+    //   for (let i = 0; i < theads.length; i++) {
+    //     theads.item(i).scrollLeft = tbody.scrollLeft;
+    //   }
+    // });
+  }
+
+  componentDidUpdate(oldProps) {
+    // const tableBody = table.querySelector(".rt-tbody");
+    // const headerNode = table.querySelector(".rt-thead.-header");
+    // if (headerNode) headerNode.style.overflowY = "inherit";
+    // if (tableBody && tableBody.scrollHeight > tableBody.clientHeight) {
+    //   if (headerNode) {
+    //     headerNode.style.overflowY = "scroll";
+    //     headerNode.style.overflowX = "hidden";
+    //   }
+    // }
+
+    this.updateFromProps(computePresets(oldProps), computePresets(this.props));
+
+    // comment in to test what is causing re-render
+    // Object.entries(this.props).forEach(
+    //   ([key, val]) =>
+    //     oldProps[key] !== val && console.info(`Prop '${key}' changed`)
+    // );
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("paste", this.handlePaste);
+  }
+
+  handleRowMove = (type, shiftHeld) => e => {
+    e.preventDefault();
+    e.stopPropagation();
+    const props = computePresets(this.props);
+    const {
+      noSelect,
+      entities,
+      reduxFormSelectedEntityIdMap: idMap,
+      isEntityDisabled,
+      isSingleSelect
+    } = props;
+    let newIdMap = {};
+    const lastSelectedEnt = getLastSelectedEntity(idMap);
+
+    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 (idMap[newEntToSelect.id || newEntToSelect.code]) {
+          //the entity being moved to has already been selected
+          newIdMap = omit(idMap, [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 = {
+            ...idMap,
+            [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
     });
   };
+  handleCopyHotkey = e => {
+    const { isCellEditable, reduxFormSelectedEntityIdMap } = computePresets(
+      this.props
+    );
+
+    if (isCellEditable) {
+      this.handleCopySelectedCells(e);
+    } else {
+      this.handleCopySelectedRows(
+        getRecordsFromIdMap(reduxFormSelectedEntityIdMap),
+        e
+      );
+    }
+  };
+
+  getPrimarySelectedCellId = () => {
+    const { reduxFormSelectedCells = {} } = this.props;
+    for (const k of Object.keys(reduxFormSelectedCells)) {
+      if (reduxFormSelectedCells[k] === PRIMARY_SELECTED_VAL) {
+        return k;
+      }
+    }
+  };
 
   handlePaste = e => {
     const {
@@ -663,188 +719,49 @@ class DataTable extends React.Component {
               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];
-                        }
-                      }
-                    }
-                  }
-                });
-              });
-              this.updateValidation(entities, newCellValidate);
-            });
-            change("reduxFormSelectedCells", newSelectedCells);
-          }
-        }
-      } catch (error) {
-        console.error(`error:`, error);
-      }
-    }
-  };
-
-  componentDidMount() {
-    const {
-      isCellEditable,
-      entities = [],
-      isLoading,
-      showForcedHiddenColumns,
-      setShowForcedHidden
-    } = this.props;
-    isCellEditable && this.formatAndValidateTableInitial();
-    this.updateFromProps({}, computePresets(this.props));
-    document.addEventListener("paste", this.handlePaste);
-
-    if (!entities.length && !isLoading && !showForcedHiddenColumns) {
-      setShowForcedHidden(true);
-    }
-    // const table = this.tableRef.current.tableRef;
-    // let theads = table.getElementsByClassName("rt-thead");
-    // let tbody = table.getElementsByClassName("rt-tbody")[0];
-
-    // tbody.addEventListener("scroll", () => {
-    //   for (let i = 0; i < theads.length; i++) {
-    //     theads.item(i).scrollLeft = tbody.scrollLeft;
-    //   }
-    // });
-  }
-
-  componentDidUpdate(oldProps) {
-    // const tableBody = table.querySelector(".rt-tbody");
-    // const headerNode = table.querySelector(".rt-thead.-header");
-    // if (headerNode) headerNode.style.overflowY = "inherit";
-    // if (tableBody && tableBody.scrollHeight > tableBody.clientHeight) {
-    //   if (headerNode) {
-    //     headerNode.style.overflowY = "scroll";
-    //     headerNode.style.overflowX = "hidden";
-    //   }
-    // }
-
-    this.updateFromProps(computePresets(oldProps), computePresets(this.props));
-
-    // comment in to test what is causing re-render
-    // Object.entries(this.props).forEach(
-    //   ([key, val]) =>
-    //     oldProps[key] !== val && console.info(`Prop '${key}' changed`)
-    // );
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener("paste", this.handlePaste);
-  }
-
-  handleRowMove = (type, shiftHeld) => e => {
-    e.preventDefault();
-    e.stopPropagation();
-    const props = computePresets(this.props);
-    const {
-      noSelect,
-      entities,
-      reduxFormSelectedEntityIdMap: idMap,
-      isEntityDisabled,
-      isSingleSelect
-    } = props;
-    let newIdMap = {};
-    const lastSelectedEnt = getLastSelectedEntity(idMap);
-
-    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 (idMap[newEntToSelect.id || newEntToSelect.code]) {
-          //the entity being moved to has already been selected
-          newIdMap = omit(idMap, [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 = {
-            ...idMap,
-            [newEntToSelect.id || newEntToSelect.code]: {
-              entity: newEntToSelect,
-              time: Date.now()
-            }
-          };
+              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];
+                        }
+                      }
+                    }
+                  }
+                });
+              });
+              this.updateValidation(entities, newCellValidate);
+            });
+            change("reduxFormSelectedCells", newSelectedCells);
+          }
         }
-      } else {
-        //no shiftHeld
-        newIdMap[newEntToSelect.id || newEntToSelect.code] = {
-          entity: newEntToSelect,
-          time: Date.now()
-        };
+      } catch (error) {
+        console.error(`error:`, error);
       }
     }
-
-    finalizeSelection({
-      idMap: newIdMap,
-      entities,
-      props
-    });
-  };
-
-  handleCopyHotkey = e => {
-    const { isCellEditable, reduxFormSelectedEntityIdMap } = computePresets(
-      this.props
-    );
-
-    if (isCellEditable) {
-      this.handleCopySelectedCells(e);
-    } else {
-      this.handleCopySelectedRows(
-        getRecordsFromIdMap(reduxFormSelectedEntityIdMap),
-        e
-      );
-    }
   };
-
   handleSelectAllRows = e => {
     const {
       change,
@@ -883,12 +800,22 @@ class DataTable extends React.Component {
       });
     }
   };
-
   updateValidationHelper = () => {
     const { entities, reduxFormCellValidation } = computePresets(this.props);
     this.updateValidation(entities, reduxFormCellValidation);
   };
 
+  updateValidation = (entities, newCellValidate) => {
+    const { change, schema } = computePresets(this.props);
+    const tableWideErr = validateTableWideErrors({
+      entities,
+      schema,
+      newCellValidate,
+      props: this.props
+    });
+    change("reduxFormCellValidation", tableWideErr);
+    this.forceUpdate();
+  };
   handleDeleteCell = () => {
     const {
       reduxFormSelectedCells,
@@ -929,11 +856,119 @@ class DataTable extends React.Component {
     this.handleCopyHotkey(e);
   };
 
+  getCellCopyText = cellWrapper => {
+    const text = cellWrapper && cellWrapper.getAttribute("data-copy-text");
+    const jsonText = cellWrapper && cellWrapper.getAttribute("data-copy-json");
+
+    const textContent = text || cellWrapper.textContent || "";
+    return [textContent, jsonText];
+  };
+
+  handleCopyColumn = (e, cellWrapper, selectedRecords) => {
+    const specificColumn = cellWrapper.getAttribute("data-test");
+    let rowElsToCopy = getAllRows(e);
+    if (!rowElsToCopy) return;
+    if (selectedRecords) {
+      const ids = selectedRecords.map(e => getIdOrCodeOrIndex(e)?.toString());
+      rowElsToCopy = Array.from(rowElsToCopy).filter(rowEl => {
+        const id = rowEl.closest(".rt-tr-group")?.getAttribute("data-test-id");
+        return id !== undefined && ids.includes(id);
+      });
+    }
+    if (!rowElsToCopy) return;
+    this.handleCopyRows(rowElsToCopy, {
+      specificColumn,
+      onFinishMsg: "Column Copied"
+    });
+  };
+  handleCopyRows = (
+    rowElsToCopy,
+    { specificColumn, onFinishMsg, isDownload } = {}
+  ) => {
+    let textToCopy = [];
+    const jsonToCopy = [];
+    forEach(rowElsToCopy, rowEl => {
+      const [t, j] = this.getRowCopyText(rowEl, { specificColumn });
+      textToCopy.push(t);
+      jsonToCopy.push(j);
+    });
+    textToCopy = textToCopy.filter(text => text).join("\n");
+    if (!textToCopy) return window.toastr.warning("No text to copy");
+    if (isDownload) {
+      download(textToCopy.replaceAll("\t", ","), "tableData.csv", "text/csv");
+    } else {
+      this.handleCopyHelper(
+        textToCopy,
+        jsonToCopy,
+        onFinishMsg || "Row Copied"
+      );
+    }
+  };
+  updateEntitiesHelper = (ents, fn) => {
+    const { change, reduxFormEntitiesUndoRedoStack = { currentVersion: 0 } } =
+      this.props;
+    const [nextState, patches, inversePatches] = produceWithPatches(ents, fn);
+    if (!inversePatches.length) return;
+    const thatNewNew = [...nextState];
+    thatNewNew.isDirty = true;
+    change("reduxFormEntities", thatNewNew);
+    change("reduxFormEntitiesUndoRedoStack", {
+      ...omitBy(reduxFormEntitiesUndoRedoStack, (v, k) => {
+        return toNumber(k) > reduxFormEntitiesUndoRedoStack.currentVersion + 1;
+      }),
+      currentVersion: reduxFormEntitiesUndoRedoStack.currentVersion + 1,
+      [reduxFormEntitiesUndoRedoStack.currentVersion + 1]: {
+        inversePatches,
+        patches
+      }
+    });
+  };
+
+  getRowCopyText = (rowEl, { specificColumn } = {}) => {
+    //takes in a row element
+    if (!rowEl) return [];
+    const textContent = [];
+    const jsonText = [];
+
+    forEach(rowEl.children, cellEl => {
+      const cellChild = cellEl.querySelector(`[data-copy-text]`);
+      if (!cellChild) {
+        if (specificColumn) return []; //strip it
+        return; //just leave it blank
+      }
+      if (
+        specificColumn &&
+        cellChild.getAttribute("data-test") !== specificColumn
+      ) {
+        return [];
+      }
+      const [t, j] = this.getCellCopyText(cellChild);
+      textContent.push(t);
+      jsonText.push(j);
+    });
+
+    return [flatMap(textContent).join("\t"), jsonText];
+  };
+
+  handleCopyHelper = (stringToCopy, jsonToCopy, message) => {
+    !window.Cypress &&
+      copy(stringToCopy, {
+        onCopy: clipboardData => {
+          clipboardData.setData("application/json", JSON.stringify(jsonToCopy));
+        },
+        // keep this so that pasting into spreadsheets works.
+        format: "text/plain"
+      });
+    if (message) {
+      window.toastr.success(message);
+    }
+  };
+
   handleCopyTable = (e, opts) => {
     try {
       const allRowEls = getAllRows(e);
       if (!allRowEls) return;
-      handleCopyRows(allRowEls, {
+      this.handleCopyRows(allRowEls, {
         ...opts,
         onFinishMsg: "Table Copied"
       });
@@ -942,7 +977,6 @@ class DataTable extends React.Component {
       window.toastr.error("Error copying rows.");
     }
   };
-
   handleCopySelectedCells = e => {
     const {
       entities = [],
@@ -988,7 +1022,7 @@ class DataTable extends React.Component {
       } else {
         const jsonRow = [];
         // ignore header
-        let [rowCopyText, json] = getRowCopyText(allRows[i + 1]);
+        let [rowCopyText, json] = this.getRowCopyText(allRows[i + 1]);
         rowCopyText = rowCopyText.split("\t");
         times(row.length, i => {
           const cell = row[i];
@@ -1003,7 +1037,7 @@ class DataTable extends React.Component {
     });
     if (!fullCellText) return window.toastr.warning("No text to copy");
 
-    handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
+    this.handleCopyHelper(fullCellText, fullJson, "Selected cells copied");
   };
 
   handleCopySelectedRows = (selectedRecords, e) => {
@@ -1026,7 +1060,7 @@ class DataTable extends React.Component {
       if (!allRowEls) return;
       const rowEls = rowNumbersToCopy.map(i => allRowEls[i]);
 
-      handleCopyRows(rowEls, {
+      this.handleCopyRows(rowEls, {
         onFinishMsg: "Selected rows copied"
       });
     } catch (error) {
@@ -1083,7 +1117,6 @@ class DataTable extends React.Component {
       />
     );
   };
-
   getThComponent = compose(
     withProps(props => {
       const { columnindex } = props;
@@ -1302,11 +1335,7 @@ class DataTable extends React.Component {
         icon="fullscreen"
         active={fullscreen}
         minimal
-        onClick={() => {
-          this.setState({
-            fullscreen: !this.state.fullscreen
-          });
-        }}
+        onClick={this.toggleFullscreen}
       />
     );
 
@@ -1461,17 +1490,24 @@ class DataTable extends React.Component {
             {...(isCellEditable && {
               tabIndex: -1,
               onKeyDown: e => {
-                const isTabKey = e.key === "Tab";
-                const isArrowKey = e.key.startsWith("Arrow");
+                // const isArrowKey =
+                //   (e.keyCode >= 37 && e.keyCode <= 40) || e.keyCode === 9;
+                // if (isArrowKey && e.target?.tagName !== "INPUT") {
+                const isTabKey = e.keyCode === 9;
+                // const isEnter = e.keyCode === 13;
+                // console.log(`onKeydown datatable inner`);
+                // console.log(`isEnter:`, isEnter)
+                const isArrowKey = e.keyCode >= 37 && e.keyCode <= 40;
+                // console.log(`e.target?.tagName:`,e.target?.tagName)
                 if (
                   (isArrowKey && e.target?.tagName !== "INPUT") ||
                   isTabKey
                   // || (isEnter && e.target?.tagName === "INPUT")
                 ) {
                   const { schema, entities } = computePresets(this.props);
-                  const left = e.key === "ArrowLeft";
-                  const up = e.key === "ArrowUp";
-                  const down = e.key === "ArrowDown" || e.key === "Enter";
+                  const left = e.keyCode === 37;
+                  const up = e.keyCode === 38;
+                  const down = e.keyCode === 40 || e.keyCode === 13;
                   let cellIdToUse = this.getPrimarySelectedCellId();
                   const pathToIndex = getFieldPathToIndex(schema);
                   const entityMap = getEntityIdToEntity(entities);
@@ -1564,23 +1600,13 @@ class DataTable extends React.Component {
                 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) {
-                  this.setState(prev => ({
-                    ...prev,
-                    editableCellInitialValue: ""
-                  }));
-                  return;
-                } else {
-                  this.setState(prev => ({
-                    ...prev,
-                    editableCellInitialValue: e.key
-                  }));
-                }
+                const isNum = e.keyCode >= 48 && e.keyCode <= 57;
+                const isLetter = e.keyCode >= 65 && e.keyCode <= 90;
+                if (!isNum && !isLetter) return;
                 if (rowDisabled) return;
                 this.startCellEdit(cellId, { shouldSelectAll: true });
                 e.stopPropagation();
+                // e.preventDefault();
               }
             })}
           >
@@ -1720,7 +1746,10 @@ class DataTable extends React.Component {
             )}
             <ReactTable
               data={filteredEnts}
-              ref={this.tableRef}
+              ref={n => {
+                if (n) this.table = n;
+              }}
+              // additionalBodyEl={}
               className={classNames({
                 isCellEditable,
                 "tg-table-loading": isLoading,
@@ -1807,7 +1836,7 @@ class DataTable extends React.Component {
                   data-tip="Download Table as CSV"
                   minimal
                   icon="download"
-                />
+                ></Button>
               </div>
             )}
             {!noFooter && (
@@ -1952,6 +1981,24 @@ class DataTable extends React.Component {
     };
   };
 
+  startCellEdit = (cellId, { shouldSelectAll } = {}) => {
+    const {
+      change,
+      reduxFormSelectedCells = {},
+      reduxFormEditingCell
+    } = computePresets(this.props);
+    const newSelectedCells = { ...reduxFormSelectedCells };
+    newSelectedCells[cellId] = PRIMARY_SELECTED_VAL;
+    //check if the cell is already selected and editing and if so, don't change it
+    if (reduxFormEditingCell === cellId) return;
+    change("reduxFormSelectedCells", newSelectedCells);
+    change("reduxFormEditingCell", cellId);
+    if (shouldSelectAll) {
+      //we should select the text
+      change("reduxFormEditingCellSelectAll", true);
+    }
+  };
+
   getTableCellProps = (state, rowInfo, column) => {
     const {
       entities,
@@ -2147,7 +2194,6 @@ class DataTable extends React.Component {
 
     change("reduxFormSelectedCells", newSelectedCells);
   };
-
   renderCheckboxHeader = () => {
     const {
       reduxFormSelectedEntityIdMap,
@@ -2270,10 +2316,9 @@ class DataTable extends React.Component {
     change("reduxFormEditingCell", null);
     this.refocusTable();
   };
-
   refocusTable = () => {
     setTimeout(() => {
-      const table = this.tableRef.current?.tableRef?.closest(
+      const table = ReactDOM.findDOMNode(this.table)?.closest(
         ".data-table-container>div"
       );
       table?.focus();
@@ -2550,6 +2595,7 @@ class DataTable extends React.Component {
             <Checkbox
               disabled={isEntityDisabled(row.original)}
               className="tg-cell-edit-boolean-checkbox"
+              // {...dataTest}
               checked={oldVal === "True"}
               onChange={e => {
                 const checked = e.target.checked;
@@ -2559,6 +2605,9 @@ class DataTable extends React.Component {
           );
           noEllipsis = true;
         } else {
+          // if (column.type === "genericSelect") {
+          //   val =
+          // }
           if (reduxFormEditingCell === cellId) {
             if (column.type === "genericSelect") {
               const GenericSelectComp = column.GenericSelectComp;
@@ -2589,7 +2638,7 @@ class DataTable extends React.Component {
                   }}
                   dataTest={dataTest}
                   cancelEdit={this.cancelCellEdit}
-                />
+                ></DropdownCell>
               );
             } else {
               return (
@@ -2601,18 +2650,11 @@ class DataTable extends React.Component {
                   shouldSelectAll={reduxFormEditingCellSelectAll}
                   cancelEdit={this.cancelCellEdit}
                   isNumeric={column.type === "number"}
-                  initialValue={
-                    this.state.editableCellInitialValue.length
-                      ? this.state.editableCellInitialValue
-                      : text
-                  }
-                  isEditableCellInitialValue={
-                    !!this.state.editableCellInitialValue.length
-                  }
+                  initialValue={text}
                   finishEdit={newVal => {
                     this.finishCellEdit(cellId, newVal);
                   }}
-                />
+                ></EditableCell>
               );
             }
           }
@@ -2684,7 +2726,7 @@ class DataTable extends React.Component {
 
             {isSelectedCell &&
               (isRect
-                ? isBottomRightCornerOfRectangle({
+                ? this.isBottomRightCornerOfRectangle({
                     cellId,
                     selectionGrid,
                     lastRowIndex,
@@ -2695,11 +2737,11 @@ class DataTable extends React.Component {
                 : isSelectedCell === PRIMARY_SELECTED_VAL) && (
                 <CellDragHandle
                   key={cellId}
-                  thisTable={this.tableRef.current.tableRef}
+                  thisTable={this.table}
                   cellId={cellId}
                   isSelectionARectangle={this.isSelectionARectangle}
                   onDragEnd={this.onDragEnd}
-                />
+                ></CellDragHandle>
               )}
           </>
         );
@@ -2709,6 +2751,26 @@ class DataTable extends React.Component {
     });
     return columnsToRender;
   };
+  isBottomRightCornerOfRectangle = ({
+    cellId,
+    selectionGrid,
+    lastRowIndex,
+    lastCellIndex,
+    entityMap,
+    pathToIndex
+  }) => {
+    selectionGrid.forEach(row => {
+      // remove undefineds from start of row
+      while (row[0] === undefined && row.length) row.shift();
+    });
+    const [rowId, cellPath] = cellId.split(":");
+    const ent = entityMap[rowId];
+    if (!ent) return;
+    const { i } = ent;
+    const cellIndex = pathToIndex[cellPath];
+    const isBottomRight = i === lastRowIndex && cellIndex === lastCellIndex;
+    return isBottomRight;
+  };
 
   onDragEnd = cellsToSelect => {
     const {
@@ -2913,7 +2975,6 @@ class DataTable extends React.Component {
       change("reduxFormSelectedCells", newReduxFormSelectedCells);
     });
   };
-
   getCopyTextForCell = (val, row = {}, column = {}) => {
     const { cellRenderer } = computePresets(this.props);
     // TODOCOPY we need a way to potentially omit certain columns from being added as a \t element (talk to taoh about this)
@@ -2999,7 +3060,6 @@ class DataTable extends React.Component {
       });
     });
   };
-
   getEditableTableInfoAndThrowFormError = () => {
     const { schema, reduxFormEntities, reduxFormCellValidation } =
       computePresets(this.props);
@@ -3109,12 +3169,12 @@ class DataTable extends React.Component {
               //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")], {
+              this.handleCopyRows([cellWrapper.closest(".rt-tr")], {
                 specificColumn,
                 onFinishMsg: "Cell copied"
               });
-              const [text, jsonText] = getCellCopyText(cellWrapper);
-              handleCopyHelper(text, jsonText);
+              const [text, jsonText] = this.getCellCopyText(cellWrapper);
+              this.handleCopyHelper(text, jsonText);
             }}
             text="Cell"
           />
@@ -3124,7 +3184,7 @@ class DataTable extends React.Component {
           <MenuItem
             key="copyColumn"
             onClick={() => {
-              handleCopyColumn(e, cellWrapper);
+              this.handleCopyColumn(e, cellWrapper);
             }}
             text="Column"
           />
@@ -3134,7 +3194,7 @@ class DataTable extends React.Component {
             <MenuItem
               key="copyColumnSelected"
               onClick={() => {
-                handleCopyColumn(e, cellWrapper, selectedRecords);
+                this.handleCopyColumn(e, cellWrapper, selectedRecords);
               }}
               text="Column (Selected)"
             />
@@ -3152,7 +3212,7 @@ class DataTable extends React.Component {
           <MenuItem
             key="copySelectedRows"
             onClick={() => {
-              handleCopyRows([row]);
+              this.handleCopyRows([row]);
               // loop through each cell in the row
             }}
             text="Row"
@@ -3203,7 +3263,7 @@ class DataTable extends React.Component {
               onClick={() => {
                 this.insertRows({ above: true });
               }}
-            />
+            ></MenuItem>
             <MenuItem
               icon="add-row-top"
               text="Add Row Below"
@@ -3211,7 +3271,7 @@ class DataTable extends React.Component {
               onClick={() => {
                 this.insertRows({});
               }}
-            />
+            ></MenuItem>
             <MenuItem
               icon="remove"
               text={`Remove Row${selectedRowIds.length > 1 ? "s" : ""}`}
@@ -3401,7 +3461,7 @@ class DataTable extends React.Component {
           }}
           indeterminate={isIndeterminate}
           checked={isChecked}
-        />
+        ></Checkbox>
       );
     }
 
@@ -3426,7 +3486,7 @@ class DataTable extends React.Component {
         })}
       >
         {columnTitleTextified && !noTitle && (
-          <>
+          <React.Fragment>
             {maybeCheckbox}
             <span
               title={columnTitleTextified}
@@ -3441,7 +3501,7 @@ class DataTable extends React.Component {
             >
               {renderTitleInner ? renderTitleInner : columnTitle}{" "}
             </span>
-          </>
+          </React.Fragment>
         )}
         <div
           style={{ display: "flex", marginLeft: "auto", alignItems: "center" }}
@@ -3463,3 +3523,333 @@ const WrappedDT = dataTableEnhancer(DataTable);
 export default WrappedDT;
 const ConnectedPagingTool = dataTableEnhancer(PagingTool);
 export { ConnectedPagingTool };
+
+const itemSizeEstimators = {
+  compact: () => 25.34,
+  normal: () => 33.34,
+  comfortable: () => 41.34
+};
+
+function getCellInfo({
+  columnIndex,
+  columnPath,
+  rowId,
+  schema,
+  entities,
+  rowIndex,
+  isEntityDisabled,
+  entity
+}) {
+  const leftpath = schema.fields[columnIndex - 1]?.path;
+  const rightpath = schema.fields[columnIndex + 1]?.path;
+  const cellIdToLeft = leftpath && `${rowId}:${leftpath}`;
+  const cellIdToRight = rightpath && `${rowId}:${rightpath}`;
+  const rowAboveId =
+    entities[rowIndex - 1] &&
+    getIdOrCodeOrIndex(entities[rowIndex - 1], rowIndex - 1);
+  const rowBelowId =
+    entities[rowIndex + 1] &&
+    getIdOrCodeOrIndex(entities[rowIndex + 1], rowIndex + 1);
+  const cellIdAbove = rowAboveId && `${rowAboveId}:${columnPath}`;
+  const cellIdBelow = rowBelowId && `${rowBelowId}:${columnPath}`;
+
+  const cellId = `${rowId}:${columnPath}`;
+  const rowDisabled = isEntityDisabled(entity);
+  return {
+    cellId,
+    cellIdAbove,
+    cellIdToRight,
+    cellIdBelow,
+    cellIdToLeft,
+    rowDisabled
+  };
+}
+
+function ColumnFilterMenu({
+  FilterMenu,
+  filterActiveForColumn,
+  compact,
+  extraCompact,
+  ...rest
+}) {
+  const [columnFilterMenuOpen, setColumnFilterMenuOpen] = useState(false);
+  return (
+    <Popover
+      position="bottom"
+      onClose={() => {
+        setColumnFilterMenuOpen(false);
+      }}
+      isOpen={columnFilterMenuOpen}
+      modifiers={{
+        preventOverflow: { enabled: true },
+        hide: { enabled: false },
+        flip: { enabled: false }
+      }}
+    >
+      <Icon
+        style={{ marginLeft: 5 }}
+        icon="filter"
+        iconSize={extraCompact ? 14 : undefined}
+        onClick={() => {
+          setColumnFilterMenuOpen(!columnFilterMenuOpen);
+        }}
+        className={classNames("tg-filter-menu-button", {
+          "tg-active-filter": !!filterActiveForColumn
+        })}
+      />
+      <FilterMenu
+        togglePopover={() => {
+          setColumnFilterMenuOpen(false);
+        }}
+        {...rest}
+      />
+    </Popover>
+  );
+}
+
+function getLastSelectedEntity(idMap) {
+  let lastSelectedEnt;
+  let latestTime;
+  forEach(idMap, ({ time, entity }) => {
+    if (!latestTime || time > latestTime) {
+      lastSelectedEnt = entity;
+      latestTime = time;
+    }
+  });
+  return lastSelectedEnt;
+}
+
+function getNewEntToSelect({
+  type,
+  lastSelectedIndex,
+  entities,
+  isEntityDisabled
+}) {
+  let newIndexToSelect;
+  if (type === "up") {
+    newIndexToSelect = lastSelectedIndex - 1;
+  } else {
+    newIndexToSelect = lastSelectedIndex + 1;
+  }
+  const newEntToSelect = entities[newIndexToSelect];
+  if (!newEntToSelect) return;
+  if (isEntityDisabled && isEntityDisabled(newEntToSelect)) {
+    return getNewEntToSelect({
+      type,
+      lastSelectedIndex: newIndexToSelect,
+      entities,
+      isEntityDisabled
+    });
+  } else {
+    return newEntToSelect;
+  }
+}
+
+function getAllRows(e) {
+  const el = e.target.querySelector(".data-table-container")
+    ? e.target.querySelector(".data-table-container")
+    : e.target.closest(".data-table-container");
+
+  const allRowEls = el.querySelectorAll(".rt-tr");
+  if (!allRowEls || !allRowEls.length) {
+    return;
+  }
+  return allRowEls;
+}
+
+function EditableCell({
+  shouldSelectAll,
+  stopSelectAll,
+  initialValue,
+  finishEdit,
+  cancelEdit,
+  isNumeric,
+  dataTest
+}) {
+  const [v, setV] = useState(initialValue);
+  return (
+    <input
+      style={{
+        border: 0,
+        width: "95%",
+        fontSize: 12,
+        background: "none"
+      }}
+      ref={r => {
+        if (shouldSelectAll && r) {
+          r?.select();
+          stopSelectAll();
+        }
+      }}
+      {...dataTest}
+      type={isNumeric ? "number" : undefined}
+      value={v}
+      autoFocus
+      onKeyDown={e => {
+        if (e.key === "Enter") {
+          finishEdit(v);
+          e.stopPropagation();
+        } else if (e.key === "Escape") {
+          e.stopPropagation();
+          cancelEdit();
+        }
+      }}
+      onBlur={() => {
+        finishEdit(v);
+      }}
+      onChange={e => {
+        setV(e.target.value);
+      }}
+    ></input>
+  );
+}
+
+function DropdownCell({
+  options,
+  isMulti,
+  initialValue,
+  finishEdit,
+  cancelEdit,
+  dataTest
+}) {
+  const [v, setV] = useState(
+    isMulti
+      ? initialValue.split(",").map(v => ({ value: v, label: v }))
+      : initialValue
+  );
+  return (
+    <div
+      className={classNames("tg-dropdown-cell-edit-container", {
+        "tg-dropdown-cell-edit-container-multi": isMulti
+      })}
+    >
+      <TgSelect
+        small
+        multi={isMulti}
+        autoOpen
+        value={v}
+        onChange={val => {
+          if (isMulti) {
+            setV(val);
+            return;
+          }
+          finishEdit(val ? val.value : null);
+        }}
+        {...dataTest}
+        popoverProps={{
+          onClose: e => {
+            if (isMulti) {
+              if (e && e.key === "Escape") {
+                cancelEdit();
+              } else {
+                finishEdit(
+                  v && v.map
+                    ? v
+                        .map(v => v.value)
+                        .filter(v => v)
+                        .join(",")
+                    : v
+                );
+              }
+            } else {
+              cancelEdit();
+            }
+          }
+        }}
+        options={options.map(value => ({ label: value, value }))}
+      ></TgSelect>
+    </div>
+  );
+}
+
+function getFieldPathToIndex(schema) {
+  const fieldToIndex = {};
+  schema.fields.forEach((f, i) => {
+    fieldToIndex[f.path] = i;
+  });
+  return fieldToIndex;
+}
+
+function getFieldPathToField(schema) {
+  const fieldPathToField = {};
+  schema.fields.forEach(f => {
+    fieldPathToField[f.path] = f;
+  });
+  return fieldPathToField;
+}
+
+const defaultParsePaste = str => {
+  return str.split(/\r\n|\n|\r/).map(row => row.split("\t"));
+};
+
+function getEntityIdToEntity(entities) {
+  const entityIdToEntity = {};
+  entities.forEach((e, i) => {
+    entityIdToEntity[getIdOrCodeOrIndex(e, i)] = { e, i };
+  });
+  return entityIdToEntity;
+}
+
+function endsWithNumber(str) {
+  return /[0-9]+$/.test(str);
+}
+
+function getNumberStrAtEnd(str) {
+  if (endsWithNumber(str)) {
+    return str.match(/[0-9]+$/)[0];
+  }
+
+  return null;
+}
+
+function stripNumberAtEnd(str) {
+  return str?.replace?.(getNumberStrAtEnd(str), "");
+}
+
+export function isEntityClean(e) {
+  let isClean = true;
+  some(e, (val, key) => {
+    if (key === "id") return;
+    if (key === "_isClean") return;
+    if (val) {
+      isClean = false;
+      return true;
+    }
+  });
+  return isClean;
+}
+
+const formatPasteData = ({ schema, newVal, path }) => {
+  const pathToField = getFieldPathToField(schema);
+  const column = pathToField[path];
+  if (column.type === "genericSelect") {
+    if (newVal?.__genSelCol === path) {
+      newVal = newVal.__strVal;
+    } else {
+      newVal = undefined;
+    }
+  } else {
+    newVal = Object.hasOwn(newVal, "__strVal") ? newVal.__strVal : newVal;
+  }
+  return newVal;
+};
+
+export function removeCleanRows(reduxFormEntities, reduxFormCellValidation) {
+  const toFilterOut = {};
+  const entsToUse = (reduxFormEntities || []).filter(e => {
+    if (!(e._isClean || isEntityClean(e))) return true;
+    else {
+      toFilterOut[getIdOrCodeOrIndex(e)] = true;
+      return false;
+    }
+  });
+
+  const validationToUse = {};
+  forEach(reduxFormCellValidation, (v, k) => {
+    const [rowId] = k.split(":");
+    if (!toFilterOut[rowId]) {
+      validationToUse[k] = v;
+    }
+  });
+  return { entsToUse, validationToUse };
+}