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

app/react/components/datatables/expand-column.tsx

@@ -1,49 +1,45 @@
 import { ChevronDown, ChevronUp } from 'lucide-react';
-import { CellProps, Column, HeaderProps } from 'react-table';
+import { ColumnDef } from '@tanstack/react-table';
 
 import { Button } from '@@/buttons';
 
-export function buildExpandColumn<T extends Record<string, unknown>>(
-  isExpandable: (item: T) => boolean
-): Column<T> {
+export function buildExpandColumn<
+  T extends Record<string, unknown>
+>(): ColumnDef<T> {
   return {
     id: 'expand',
-    Header: ({
-      filteredFlatRows,
-      getToggleAllRowsExpandedProps,
-      isAllRowsExpanded,
-    }: HeaderProps<T>) => {
-      const hasExpandableItems = filteredFlatRows.some((item) =>
-        isExpandable(item.original)
-      );
+    header: ({ table }) => {
+      const hasExpandableItems = table.getExpandedRowModel().rows.length > 0;
 
       return (
         hasExpandableItems && (
           <Button
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...getToggleAllRowsExpandedProps()}
+            onClick={table.getToggleAllRowsExpandedHandler()}
             color="none"
-            icon={isAllRowsExpanded ? ChevronDown : ChevronUp}
+            icon={table.getIsAllRowsExpanded() ? ChevronDown : ChevronUp}
           />
         )
       );
     },
-    Cell: ({ row }: CellProps<T>) => (
-      <div className="vertical-center">
-        {isExpandable(row.original) && (
-          <Button
-            /*  eslint-disable-next-line react/jsx-props-no-spreading */
-            {...row.getToggleRowExpandedProps()}
-            color="none"
-            icon={row.isExpanded ? ChevronDown : ChevronUp}
-          />
-        )}
-      </div>
-    ),
-    disableFilters: true,
-    Filter: () => null,
-    canHide: false,
-    width: 30,
-    disableResizing: true,
+    cell: ({ row }) =>
+      row.getCanExpand() && (
+        <Button
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            row.toggleExpanded();
+          }}
+          color="none"
+          icon={row.getIsExpanded() ? ChevronDown : ChevronUp}
+        />
+      ),
+    enableColumnFilter: false,
+    enableGlobalFilter: false,
+    enableHiding: false,
+
+    meta: {
+      width: 40,
+    },
   };
 }