refactor(data-table): refactor table tables to @TanStack

Author: OliverDudgeon

components/DataTable/DataTable.tsx

@@ -1,11 +1,12 @@
 import type { FC } from "react";
 import { useMemo } from "react";
-import type { Cell, Column } from "react-table";
 
 import { Alert, Typography } from "@mui/material";
+import type { CoreOptions } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
 
 import { CenterLoader } from "../../../../../../components/CenterLoader";
-import { DataTable } from "../../../../../../components/DataTable";
+import { DataTable } from "../../../../../../components/DataTable/DataTable";
 import { ModalWrapper } from "../../../../../../components/modals/ModalWrapper";
 import { getErrorMessage } from "../../../../../../utils/next/orvalError";
 import { JSON_SCHEMA_TYPES } from "./constants";
@@ -46,6 +47,8 @@ export interface DatasetSchemaViewModalProps {
   onClose: () => void;
 }
 
+const columnHelper = createColumnHelper<TableSchemaView>();
+
 /**
  * Displays the schema of a version of a dataset in a tabular format.
  */
@@ -88,17 +91,13 @@ export const DatasetSchemaViewModal: FC<DatasetSchemaViewModalProps> = ({
     return undefined;
   }, [schema, originalSchema]);
 
-  const columns: Column<TableSchemaView>[] = useMemo(
+  const columns = useMemo(
     () => [
-      {
-        accessor: "name",
-        Header: "Field Name",
-      },
-      {
+      columnHelper.accessor("name", { header: "Field Name" }),
+      columnHelper.accessor((row) => row.description.current, {
         id: "description",
-        accessor: (row) => row.description.current,
-        Header: "Description",
-        Cell: ({ row }: Cell<TableSchemaView>) => {
+        header: "Description",
+        cell: ({ row }) => {
           const {
             name,
             description: { original, current },
@@ -113,12 +112,11 @@ export const DatasetSchemaViewModal: FC<DatasetSchemaViewModalProps> = ({
             />
           );
         },
-      },
-      {
+      }),
+      columnHelper.accessor((row) => row.type.current, {
         id: "type",
-        accessor: (row) => row.type.current,
-        Header: "Type",
-        Cell: ({ row }: Cell<TableSchemaView>) => {
+        header: "Type",
+        cell: ({ row }) => {
           const {
             name,
             type: { original, current },
@@ -134,7 +132,7 @@ export const DatasetSchemaViewModal: FC<DatasetSchemaViewModalProps> = ({
             />
           );
         },
-      },
+      }),
     ],
     [setSchemaField],
   );
@@ -164,6 +162,8 @@ export const DatasetSchemaViewModal: FC<DatasetSchemaViewModalProps> = ({
       );
     }
 
+    const getRowId: CoreOptions<TableSchemaView>["getRowId"] = (row) => row.name;
+
     return (
       <>
         {isSavingError &&
@@ -184,7 +184,7 @@ export const DatasetSchemaViewModal: FC<DatasetSchemaViewModalProps> = ({
             },
           }}
           data={fields}
-          getRowId={(row) => row.name}
+          getRowId={getRowId}
           tableContainer={false}
           ToolbarChild={
             <DatasetSchemaDescriptionInput

features/DatasetsTable/DatasetDetails/VersionActionsSection/DatasetSchemaListItem/DatasetSchemaViewModal/DatasetSchemaViewModal.tsx

@@ -1,13 +1,14 @@
 import { useCallback, useMemo } from "react";
-import type { Column, Row } from "react-table";
 
 import { useGetDatasets } from "@squonk/data-manager-client/dataset";
 
 import { CircularProgress } from "@mui/material";
+import type { CoreOptions, Row } from "@tanstack/react-table";
+import { createColumnHelper } from "@tanstack/react-table";
 import dynamic from "next/dynamic";
 
 import { Chips } from "../../components/Chips";
-import { DataTable } from "../../components/DataTable";
+import { DataTable } from "../../components/DataTable/DataTable";
 import { LabelChip } from "../../components/labels/LabelChip";
 import { combineLabels } from "../../utils/app/labels";
 import { getErrorMessage } from "../../utils/next/orvalError";
@@ -43,54 +44,47 @@ const editorsSorter = (rowA: Row<TableDataset>, rowB: Row<TableDataset>) => {
   return -1;
 };
 
+const columnHelper = createColumnHelper<TableDataset>();
+
 /**
  * MuiTable managed by react-table that displays datasets viewable by the user with option to see
  * further details of a dataset.
  */
 export const DatasetsTable = () => {
-  const columns: Column<TableDataset>[] = useMemo(
+  const columns = useMemo(
     () => [
-      {
-        accessor: "fileName",
-        Header: "File Name",
-        Cell: ({ row }) => {
-          return (
-            <DatasetDetails
-              dataset={row.original.datasetSummary}
-              datasetName={row.original.datasetSummary.versions[0].file_name}
-              version={row.original.datasetVersion}
-            />
-          );
-        },
-      },
-      {
-        accessor: "labels",
-        Cell: ({ value: labels }) => (
+      columnHelper.accessor("fileName", {
+        header: "File Name",
+        cell: ({ row }) => (
+          <DatasetDetails
+            dataset={row.original.datasetSummary}
+            datasetName={row.original.datasetSummary.versions[0].file_name}
+            version={row.original.datasetVersion}
+          />
+        ),
+      }),
+      columnHelper.accessor("labels", {
+        header: "Labels",
+        cell: ({ getValue }) => (
           <Chips>
-            {Object.entries(labels).map(([label, values]) => (
+            {Object.entries(getValue()).map(([label, values]) => (
               <LabelChip key={label} label={label} values={values} />
             ))}
           </Chips>
         ),
-        Header: "Labels",
-      },
-      {
-        accessor: "editors",
-        Header: "Editors",
-        sortType: editorsSorter,
-        Cell: ({ value: editors }) => {
-          return editors.join(", ");
-        },
-      },
-      {
+      }),
+      columnHelper.accessor("editors", {
+        header: "Editors",
+        sortingFn: editorsSorter,
+        cell: ({ getValue }) => getValue().join(", "),
+      }),
+      columnHelper.accessor((row) => row.subRows.length || "", {
         id: "versions",
-        accessor: (row) => row.subRows.length || "",
-        Header: "Versions",
-      },
-      {
-        accessor: (row) => row.numberOfProjects,
-        Header: "Number of projects",
-      },
+        header: "Versions",
+      }),
+      columnHelper.accessor("numberOfProjects", {
+        header: "Number of projects",
+      }),
     ],
     [],
   );
@@ -135,7 +129,10 @@ export const DatasetsTable = () => {
   const { selectedDatasets, onSelection } = useSelectedDatasets(datasets);
 
   const { owner, editor, fileType, labels } = filter;
-  const getRowId = useCallback((row) => `${row.dataset_id}#${row.version}`, []);
+  const getRowId: CoreOptions<TableDataset>["getRowId"] = useCallback(
+    (row) => `${row.dataset_id}#${row.version}`,
+    [],
+  );
 
   return (
     <DataTable

features/DatasetsTable/DatasetsTable.tsx

@@ -1,56 +1,48 @@
-import { useCallback, useMemo } from "react";
-import type { CellProps, Column, PluginHook } from "react-table";
+import { useMemo } from "react";
 
 import type { ProductDmStorage } from "@squonk/account-server-client";
 
+import { createColumnHelper } from "@tanstack/react-table";
+
 import { DataTable } from "../../../components/DataTable";
 import { AdjustProjectProduct } from "../../../components/products/AdjustProjectProduct";
 import { ChargesLinkIconButton } from "../../../components/products/ChargesLinkIconButton";
 import { DeleteProductButton } from "../../../components/products/DeleteProductButton";
-import { sharedProductColumns } from "../columns";
+import { getSharedColumns } from "../columns";
 
 export interface DatasetProductTableProps {
   products: ProductDmStorage[];
 }
 
+const columnHelper = createColumnHelper<ProductDmStorage>();
+
 export const DatasetProductTable = ({ products }: DatasetProductTableProps) => {
-  const columns: Column<ProductDmStorage>[] = useMemo(
+  const columns = useMemo(
     () => [
-      ...(sharedProductColumns as Column<ProductDmStorage>[]),
-      { id: "size", Header: "Size", accessor: (row) => row.storage.size.current },
-      { id: "coins", Header: "Coins", accessor: (row) => row.storage.coins.used },
+      ...getSharedColumns<ProductDmStorage>(),
+      columnHelper.accessor((row) => row.storage.size.current, { id: "size", header: "Size" }),
+      columnHelper.accessor((row) => row.storage.coins.used, { id: "coins", header: "Coins" }),
+      columnHelper.display({
+        id: "actions",
+        header: "Actions",
+        enableGrouping: false,
+        cell: ({ row }) => (
+          <>
+            <ChargesLinkIconButton productId={row.original.product.id} />
+            <AdjustProjectProduct
+              allowance={row.original.coins.allowance}
+              product={row.original.product}
+            />
+            <DeleteProductButton
+              product={row.original.product}
+              tooltip="Delete product permanently"
+            />
+          </>
+        ),
+      }),
     ],
     [],
   );
 
-  // react-table plugin to add actions buttons for project files
-  const useActionsColumnPlugin: PluginHook<ProductDmStorage> = useCallback((hooks) => {
-    hooks.visibleColumns.push((columns) => {
-      return [
-        ...columns,
-        {
-          id: "actions",
-          groupByBoundary: true, // Ensure normal columns can't be ordered before this
-          Header: "Actions",
-          Cell: ({ row }: CellProps<ProductDmStorage, any>) => (
-            <>
-              <ChargesLinkIconButton productId={row.original.product.id} />
-              <AdjustProjectProduct
-                allowance={row.original.coins.allowance}
-                product={row.original.product}
-              />
-              <DeleteProductButton
-                product={row.original.product}
-                tooltip="Delete product permanently"
-              />
-            </>
-          ),
-        },
-      ];
-    });
-  }, []);
-
-  return (
-    <DataTable columns={columns} data={products} useActionsColumnPlugin={useActionsColumnPlugin} />
-  );
+  return <DataTable columns={columns} data={products} />;
 };