chore(deps): upgrade react-table to v8 [EE-4837] (#8245)

app/react/components/datatables/NestedDatatable.tsx

@@ -1,27 +1,28 @@
 import {
-  useTable,
-  useFilters,
-  useSortBy,
-  Column,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  TableOptions,
   TableState,
-  usePagination,
-} from 'react-table';
+  useReactTable,
+} from '@tanstack/react-table';
 
+import { defaultGetRowId } from './defaultGetRowId';
 import { Table } from './Table';
-import { multiple } from './filter-types';
 import { NestedTable } from './NestedTable';
 import { DatatableContent } from './DatatableContent';
-import { defaultGetRowId } from './defaultGetRowId';
+import { BasicTableSettings } from './types';
 
 interface Props<D extends Record<string, unknown>> {
   dataset: D[];
-  columns: readonly Column<D>[];
+  columns: TableOptions<D>['columns'];
 
   getRowId?(row: D): string;
   emptyContentLabel?: string;
-  initialTableState?: Partial<TableState<D>>;
+  initialTableState?: Partial<TableState>;
   isLoading?: boolean;
-  defaultSortBy?: string;
+  initialSortBy?: BasicTableSettings['sortBy'];
 }
 
 export function NestedDatatable<D extends Record<string, unknown>>({
@@ -31,25 +32,26 @@ export function NestedDatatable<D extends Record<string, unknown>>({
   emptyContentLabel,
   initialTableState = {},
   isLoading,
-  defaultSortBy,
+  initialSortBy,
 }: Props<D>) {
-  const tableInstance = useTable<D>(
-    {
-      defaultCanFilter: false,
-      columns,
-      data: dataset,
-      filterTypes: { multiple },
-      initialState: {
-        sortBy: defaultSortBy ? [{ id: defaultSortBy, desc: true }] : [],
-        ...initialTableState,
-      },
-      autoResetSelectedRows: false,
-      getRowId,
+  const tableInstance = useReactTable<D>({
+    columns,
+    data: dataset,
+    initialState: {
+      sorting: initialSortBy ? [initialSortBy] : [],
+      ...initialTableState,
     },
-    useFilters,
-    useSortBy,
-    usePagination
-  );
+    defaultColumn: {
+      enableColumnFilter: false,
+      enableHiding: false,
+    },
+    getRowId,
+    autoResetExpanded: false,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+  });
 
   return (
     <NestedTable>
@@ -58,15 +60,7 @@ export function NestedDatatable<D extends Record<string, unknown>>({
           tableInstance={tableInstance}
           isLoading={isLoading}
           emptyContentLabel={emptyContentLabel}
-          renderRow={(row, { key, className, role, style }) => (
-            <Table.Row<D>
-              cells={row.cells}
-              key={key}
-              className={className}
-              role={role}
-              style={style}
-            />
-          )}
+          renderRow={(row) => <Table.Row<D> cells={row.getVisibleCells()} />}
         />
       </Table.Container>
     </NestedTable>