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

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/availability.tsx

@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 import { Check, X } from 'lucide-react';
 
 import { Badge } from '@@/Badge';
@@ -6,23 +6,23 @@ import { Icon } from '@@/Icon';
 
 import type { IngressControllerClassMap } from '../../types';
 
-export const availability: Column<IngressControllerClassMap> = {
-  Header: 'Availability',
-  accessor: 'Availability',
-  Cell: AvailailityCell,
-  id: 'availability',
-  disableFilters: true,
-  canHide: true,
-  sortInverted: true,
-  sortType: 'basic',
-  Filter: () => null,
-};
+import { columnHelper } from './helper';
+
+export const availability = columnHelper.accessor('Availability', {
+  header: 'Availability',
+  cell: Cell,
+  id: 'availability',
+  invertSorting: true,
+  sortingFn: 'basic',
+});
+
+function Cell({ getValue }: CellContext<IngressControllerClassMap, boolean>) {
+  const availability = getValue();
 
-function AvailailityCell({ value }: CellProps<IngressControllerClassMap>) {
   return (
-    <Badge type={value ? 'success' : 'danger'}>
-      <Icon icon={value ? Check : X} className="!mr-1" />
-      {value ? 'Allowed' : 'Disallowed'}
+    <Badge type={availability ? 'success' : 'danger'}>
+      <Icon icon={availability ? Check : X} className="!mr-1" />
+      {availability ? 'Allowed' : 'Disallowed'}
     </Badge>
   );
 }

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { IngressControllerClassMap } from '../../types';
+
+export const columnHelper = createColumnHelper<IngressControllerClassMap>();

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/index.ts

@@ -1,9 +1,5 @@
-import { useMemo } from 'react';
-
 import { availability } from './availability';
 import { type } from './type';
 import { name } from './name';
 
-export function useColumns() {
-  return useMemo(() => [name, type, availability], []);
-}
+export const columns = [name, type, availability];

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx

@@ -1,24 +1,26 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { Badge } from '@@/Badge';
 
 import type { IngressControllerClassMap } from '../../types';
 
-export const name: Column<IngressControllerClassMap> = {
-  Header: 'Ingress class',
-  accessor: 'ClassName',
-  Cell: NameCell,
-  id: 'name',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-  sortType: 'string',
-};
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('ClassName', {
+  header: 'Ingress class',
+  cell: NameCell,
+  id: 'name',
+});
+
+function NameCell({
+  row,
+  getValue,
+}: CellContext<IngressControllerClassMap, string>) {
+  const className = getValue();
 
-function NameCell({ row }: CellProps<IngressControllerClassMap>) {
   return (
     <span className="flex flex-nowrap">
-      {row.original.ClassName}
+      {className}
       {row.original.New && <Badge className="ml-1">Newly detected</Badge>}
     </span>
   );

app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/type.tsx

@@ -1,14 +1,10 @@
-import { CellProps, Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import type { IngressControllerClassMap } from '../../types';
-
-export const type: Column<IngressControllerClassMap> = {
-  Header: 'Ingress controller type',
-  accessor: 'Type',
-  Cell: ({ row }: CellProps<IngressControllerClassMap>) =>
-    row.original.Type || '-',
+export const type = columnHelper.accessor('Type', {
+  header: 'Ingress controller type',
+  cell: ({ getValue }) => {
+    const type = getValue();
+    return type || '-';
+  },
   id: 'type',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+});