Merge pull request #829 from Orfium/fix/NDS-1013_table_doesnt_rerende…

…r_when_new_data_are_provided fix: table not rerendering on data change
Orfium · Sep 16, 2024 · b3fcf2a · b3fcf2a
2 parents 7d4bc9b + f45b33e
commit b3fcf2a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 10 deletions.
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -42,7 +42,6 @@ const Table = <TData extends NoUndefined<TData>>({
     sorting,
     rowsConfig,
     columnsConfig,
-    pagination,
     dataTestPrefixId,
   });
 

diff --git a/src/components/Table/hooks/useTable.tsx b/src/components/Table/hooks/useTable.tsx
@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-table';
 import useTheme from 'hooks/useTheme';
 import { concat } from 'lodash-es';
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { Theme } from 'theme';
 
 import { CheckBox } from 'components/Controls';
@@ -152,7 +152,6 @@ const useTable = <TData,>({
   sorting,
   rowsConfig,
   columnsConfig,
-  pagination,
   dataTestPrefixId,
   ...rest
 }): ReturnValue<TData> => {
@@ -164,6 +163,8 @@ const useTable = <TData,>({
 
   const hasRowDetails = data.some((row) => row.details) && Boolean(expanded);
 
+  const tableData = useMemo(() => data.map((data) => data.cells), [data]);
+
   const hasCheckboxes = Boolean(rowSelection && isTableInteractive);
 
   const tColumns = getColumns(columns, hasCheckboxes, hasRowDetails, theme, dataTestPrefixId);
@@ -177,13 +178,6 @@ const useTable = <TData,>({
     };
   }, [columnsConfig, expanded, isTableInteractive, rowSelection, sorting]);
 
-  /** Since tanstack's useTable doesn't detect array object mutations, we need to manually create new data array (new ref) to trigger a re-render */
-  const [tableData, setTableData] = React.useState(data.map((data) => data.cells));
-
-  React.useEffect(() => {
-    setTableData(data.map((data) => data.cells));
-  }, [sorting?.sortingColumn, pagination?.page, pagination?.showItems]);
-
   const table = useReactTable<TData>({
     /** Basic Functionality */
     data: tableData,