🎉 remove react-data-grid dependency

package.json

@@ -47,7 +47,6 @@
     "react": "^18.0.0",
     "react-beautiful-dnd": "^13.1.0",
     "react-color-palette": "^6.2.0",
-    "react-data-grid": "7.0.0-beta.5",
     "react-detect-offline": "^2.4.5",
     "react-div-100vh": "^0.7.0",
     "react-dnd": "^16.0.1",

src/components/SideDrawer/SideDrawer.tsx

@@ -1,10 +1,8 @@
 import { useEffect } from "react";
-import useMemoValue from "use-memo-value";
 import clsx from "clsx";
 import { useAtom } from "jotai";
-import { find, findIndex, isEqual } from "lodash-es";
+import { find, findIndex } from "lodash-es";
 import { ErrorBoundary } from "react-error-boundary";
-import { DataGridHandle } from "react-data-grid";
 import { TransitionGroup } from "react-transition-group";
 
 import { Fab, Fade } from "@mui/material";
@@ -16,34 +14,20 @@ import ErrorFallback from "@src/components/ErrorFallback";
 import StyledDrawer from "./StyledDrawer";
 import SideDrawerFields from "./SideDrawerFields";
 
-import { projectScope, userSettingsAtom } from "@src/atoms/projectScope";
 import {
   tableScope,
-  tableIdAtom,
-  tableColumnsOrderedAtom,
   tableRowsAtom,
   sideDrawerOpenAtom,
   selectedCellAtom,
 } from "@src/atoms/tableScope";
 import { analytics, logEvent } from "@src/analytics";
-import { formatSubTableName } from "@src/utils/table";
 
 export const DRAWER_WIDTH = 512;
 export const DRAWER_COLLAPSED_WIDTH = 36;
 
-export default function SideDrawer({
-  dataGridRef,
-}: {
-  dataGridRef?: React.MutableRefObject<DataGridHandle | null>;
-}) {
-  const [userSettings] = useAtom(userSettingsAtom, projectScope);
-  const [tableId] = useAtom(tableIdAtom, tableScope);
-  const [tableColumnsOrdered] = useAtom(tableColumnsOrderedAtom, tableScope);
+export default function SideDrawer() {
   const [tableRows] = useAtom(tableRowsAtom, tableScope);
 
-  const userDocHiddenFields =
-    userSettings.tables?.[formatSubTableName(tableId)]?.hiddenFields ?? [];
-
   const [cell, setCell] = useAtom(selectedCellAtom, tableScope);
   const [open, setOpen] = useAtom(sideDrawerOpenAtom, tableScope);
   const selectedRow = find(tableRows, ["_rowy_ref.path", cell?.path]);
@@ -51,26 +35,6 @@ export default function SideDrawer({
     "_rowy_ref.path",
     cell?.path,
   ]);
-  // Memo a list of visible column keys for useEffect dependencies
-  const visibleColumnKeys = useMemoValue(
-    tableColumnsOrdered
-      .filter((col) => !userDocHiddenFields.includes(col.key))
-      .map((col) => col.key),
-    isEqual
-  );
-
-  // When side drawer is opened, select the cell in the table
-  // in case we’ve scrolled and selected cell was reset
-  useEffect(() => {
-    if (open) {
-      const columnIndex = visibleColumnKeys.indexOf(cell?.columnKey || "");
-      if (columnIndex === -1 || selectedCellRowIndex === -1) return;
-      dataGridRef?.current?.selectCell(
-        { rowIdx: selectedCellRowIndex, idx: columnIndex },
-        false
-      );
-    }
-  }, [open, visibleColumnKeys, selectedCellRowIndex, cell, dataGridRef]);
 
   const handleNavigate = (direction: "up" | "down") => () => {
     if (!tableRows || !cell) return;
@@ -84,12 +48,6 @@ export default function SideDrawer({
       path: newPath,
       focusInside: false,
     }));
-
-    const columnIndex = visibleColumnKeys.indexOf(cell!.columnKey || "");
-    dataGridRef?.current?.selectCell(
-      { rowIdx: rowIndex, idx: columnIndex },
-      false
-    );
   };
 
   // const [urlDocState, dispatchUrlDoc] = useDoc({});

src/pages/Table/TablePage.tsx

@@ -1,6 +1,5 @@
-import { useRef, Suspense, lazy } from "react";
+import { Suspense, lazy } from "react";
 import { useAtom } from "jotai";
-import { DataGridHandle } from "react-data-grid";
 import { ErrorBoundary } from "react-error-boundary";
 import { isEmpty, intersection } from "lodash-es";
 
@@ -81,9 +80,6 @@ export default function TablePage({
   useBeforeUnload(columnModalAtom, tableScope);
   useBeforeUnload(tableModalAtom, tableScope);
 
-  // A ref to the data grid. Contains data grid functions
-  const dataGridRef = useRef<DataGridHandle | null>(null);
-
   if (!(tableSchema as any)._rowy_ref)
     return (
       <>
@@ -161,7 +157,7 @@ export default function TablePage({
 
       <ErrorBoundary FallbackComponent={InlineErrorFallback}>
         <Suspense fallback={null}>
-          {!disableSideDrawer && <SideDrawer dataGridRef={dataGridRef} />}
+          {!disableSideDrawer && <SideDrawer />}
         </Suspense>
       </ErrorBoundary>
 

yarn.lock

@@ -9970,13 +9970,6 @@ react-color-palette@^6.2.0:
   resolved "https://registry.yarnpkg.com/react-color-palette/-/react-color-palette-6.2.0.tgz#aa3be88f6953d57502c00f4433692129ffbad3e7"
   integrity sha512-9rIboaRJNoeF8aCI2f3J8wgMyhl74SnGmZLDjor3bKf0iDBhP2EBv0/jGmm0hrj6OackGCqtWl5ZvM89XUc3sg==
 
-react-data-grid@7.0.0-beta.5:
-  version "7.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-7.0.0-beta.5.tgz#bc39ce45b7a7f42ebfb66840e0ec1c8619d60f10"
-  integrity sha512-rtN4wnePrQ80UN6lYF/zUQqVVJMT3HW5bTLx9nR5XOKQiG72cGzX2d2+b+e82vUh23zTFBicEnuWSlN9Fa/83Q==
-  dependencies:
-    clsx "^1.1.1"
-
 react-detect-offline@^2.4.5:
   version "2.4.5"
   resolved "https://registry.yarnpkg.com/react-detect-offline/-/react-detect-offline-2.4.5.tgz#3c242516c37b6789cf89102881031f87e70b80e6"