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

app/react/kubernetes/ServicesView/ServicesDatatable/ServicesDatatable.tsx

@@ -1,8 +1,7 @@
-import { Row, TableRowProps } from 'react-table';
 import { Shuffle, Trash2 } from 'lucide-react';
-import { useStore } from 'zustand';
 import { useRouter } from '@uirouter/react';
 import clsx from 'clsx';
+import { Row } from '@tanstack/react-table';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import {
@@ -15,15 +14,15 @@ import { notifyError, notifySuccess } from '@/portainer/services/notifications';
 
 import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
 import { confirmDelete } from '@@/modals/confirm';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { useMutationDeleteServices, useServices } from '../service';
 import { Service } from '../types';
 import { DefaultDatatableSettings } from '../../datatables/DefaultDatatableSettings';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 import { createStore } from './datatable-store';
 import { ServicesDatatableDescription } from './ServicesDatatableDescription';
 
@@ -31,19 +30,16 @@ const storageKey = 'k8sServicesDatatable';
 const settingsStore = createStore(storageKey);
 
 export function ServicesDatatable() {
+  const tableState = useTableState(settingsStore, storageKey);
   const environmentId = useEnvironmentId();
   const servicesQuery = useServices(environmentId);
 
-  const settings = useStore(settingsStore);
-
-  const [search, setSearch] = useSearchBarState(storageKey);
-  const columns = useColumns();
   const readOnly = !useAuthorizations(['K8sServiceW']);
   const { isAdmin } = useCurrentUser();
 
   const filteredServices = servicesQuery.data?.filter(
     (service) =>
-      (isAdmin && settings.showSystemResources) ||
+      (isAdmin && tableState.showSystemResources) ||
       !KubernetesNamespaceHelper.isSystemNamespace(service.Namespace)
   );
 
@@ -51,35 +47,30 @@ export function ServicesDatatable() {
     <Datatable
       dataset={filteredServices || []}
       columns={columns}
+      settingsManager={tableState}
       isLoading={servicesQuery.isLoading}
       emptyContentLabel="No services found"
       title="Services"
       titleIcon={Shuffle}
       getRowId={(row) => row.UID}
       isRowSelectable={(row) =>
-        !KubernetesNamespaceHelper.isSystemNamespace(row.values.namespace)
+        !KubernetesNamespaceHelper.isSystemNamespace(row.original.Namespace)
       }
       disableSelect={readOnly}
       renderTableActions={(selectedRows) => (
         <TableActions selectedItems={selectedRows} />
       )}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
       renderTableSettings={() => (
         <TableSettingsMenu>
           <DefaultDatatableSettings
-            settings={settings}
+            settings={tableState}
             hideShowSystemResources={!isAdmin}
           />
         </TableSettingsMenu>
       )}
       description={
         <ServicesDatatableDescription
-          showSystemResources={settings.showSystemResources || !isAdmin}
+          showSystemResources={tableState.showSystemResources || !isAdmin}
         />
       }
       renderRow={servicesRenderRow}
@@ -89,20 +80,13 @@ export function ServicesDatatable() {
 
 // needed to apply custom styling to the row cells and not globally.
 // required in the AC's for this ticket.
-function servicesRenderRow<D extends Record<string, unknown>>(
-  row: Row<D>,
-  rowProps: TableRowProps,
-  highlightedItemId?: string
-) {
+function servicesRenderRow(row: Row<Service>, highlightedItemId?: string) {
   return (
-    <Table.Row<D>
-      key={rowProps.key}
-      cells={row.cells}
-      className={clsx('[&>td]:!py-4 [&>td]:!align-top', rowProps.className, {
+    <Table.Row<Service>
+      cells={row.getVisibleCells()}
+      className={clsx('[&>td]:!py-4 [&>td]:!align-top', {
         active: highlightedItemId === row.id,
       })}
-      role={rowProps.role}
-      style={rowProps.style}
     />
   );
 }

app/react/kubernetes/ServicesView/ServicesDatatable/columns/application.tsx

@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 
@@ -6,29 +6,34 @@ import { Link } from '@@/Link';
 
 import { Service } from '../../types';
 
-export const application: Column<Service> = {
-  Header: 'Application',
-  accessor: (row) => (row.Applications ? row.Applications[0].Name : ''),
-  id: 'application',
+import { columnHelper } from './helper';
 
-  Cell: ({ row, value: appname }: CellProps<Service, string>) => {
-    const environmentId = useEnvironmentId();
-    return appname ? (
-      <Link
-        to="kubernetes.applications.application"
-        params={{
-          endpointId: environmentId,
-          namespace: row.original.Namespace,
-          name: appname,
-        }}
-        title={appname}
-      >
-        {appname}
-      </Link>
-    ) : (
-      '-'
-    );
-  },
-  canHide: true,
-  disableFilters: true,
-};
+export const application = columnHelper.accessor(
+  (row) => (row.Applications ? row.Applications[0].Name : ''),
+  {
+    header: 'Application',
+    id: 'application',
+    cell: Cell,
+  }
+);
+
+function Cell({ row, getValue }: CellContext<Service, string>) {
+  const appName = getValue();
+  const environmentId = useEnvironmentId();
+
+  return appName ? (
+    <Link
+      to="kubernetes.applications.application"
+      params={{
+        endpointId: environmentId,
+        namespace: row.original.Namespace,
+        name: appName,
+      }}
+      title={appName}
+    >
+      {appName}
+    </Link>
+  ) : (
+    '-'
+  );
+}

app/react/kubernetes/ServicesView/ServicesDatatable/columns/clusterIP.tsx

@@ -1,20 +1,17 @@
-import { CellProps, Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Service } from '../../types';
-
-export const clusterIP: Column<Service> = {
-  Header: 'Cluster IP',
-  accessor: 'ClusterIPs',
+export const clusterIP = columnHelper.accessor('ClusterIPs', {
+  header: 'Cluster IP',
   id: 'clusterIP',
-  Cell: ({ value: clusterIPs }: CellProps<Service, Service['ClusterIPs']>) => {
+  cell: ({ getValue }) => {
+    const clusterIPs = getValue();
+
     if (!clusterIPs?.length) {
       return '-';
     }
     return clusterIPs.map((ip) => <div key={ip}>{ip}</div>);
   },
-  disableFilters: true,
-  canHide: true,
-  sortType: (rowA, rowB) => {
+  sortingFn: (rowA, rowB) => {
     const a = rowA.original.ClusterIPs;
     const b = rowB.original.ClusterIPs;
 
@@ -38,4 +35,4 @@ export const clusterIP: Column<Service> = {
       }
     );
   },
-};
+});

app/react/kubernetes/ServicesView/ServicesDatatable/columns/created.tsx

@@ -1,23 +1,20 @@
-import { CellProps, Column } from 'react-table';
-
 import { formatDate } from '@/portainer/filters/filters';
 
-import { Service } from '../../types';
+import { columnHelper } from './helper';
 
-export const created: Column<Service> = {
-  Header: 'Created',
+export const created = columnHelper.accessor('CreationTimestamp', {
+  header: 'Created',
   id: 'created',
-  accessor: (row) => row.CreationTimestamp,
-  Cell: ({ row }: CellProps<Service>) => {
+  cell: ({ row, getValue }) => {
+    const date = formatDate(getValue());
+
     const owner =
       row.original.Labels?.['io.portainer.kubernetes.application.owner'];
 
     if (owner) {
-      return `${formatDate(row.original.CreationTimestamp)} by ${owner}`;
+      return `${date} by ${owner}`;
     }
 
-    return formatDate(row.original.CreationTimestamp);
+    return date;
   },
-  disableFilters: true,
-  canHide: true,
-};
+});

app/react/kubernetes/ServicesView/ServicesDatatable/columns/externalIP.tsx

@@ -1,8 +1,108 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { Service } from '../../types';
 
-import { ExternalIPLink } from './externalIPLink';
+import { ExternalIPLink } from './ExternalIPLink';
+import { columnHelper } from './helper';
+
+export const externalIP = columnHelper.accessor(
+  (row) => {
+    if (row.Type === 'ExternalName') {
+      return row.ExternalName;
+    }
+
+    if (row.ExternalIPs?.length) {
+      return row.ExternalIPs?.slice(0);
+    }
+
+    return row.IngressStatus?.slice(0);
+  },
+  {
+    header: 'External IP',
+    id: 'externalIP',
+    cell: Cell,
+    sortingFn: (rowA, rowB) => {
+      const a = rowA.original.IngressStatus;
+      const b = rowB.original.IngressStatus;
+      const aExternal = rowA.original.ExternalIPs;
+      const bExternal = rowB.original.ExternalIPs;
+
+      const ipA = a?.[0].IP || aExternal?.[0] || rowA.original.ExternalName;
+      const ipB = b?.[0].IP || bExternal?.[0] || rowA.original.ExternalName;
+
+      if (!ipA) return 1;
+      if (!ipB) return -1;
+
+      // use a nat sort order for ip addresses
+      return ipA.localeCompare(
+        ipB,
+        navigator.languages[0] || navigator.language,
+        {
+          numeric: true,
+          ignorePunctuation: true,
+        }
+      );
+    },
+  }
+);
+
+function Cell({ row }: CellContext<Service, string>) {
+  if (row.original.Type === 'ExternalName') {
+    if (row.original.ExternalName) {
+      const linkTo = `http://${row.original.ExternalName}`;
+      return <ExternalIPLink to={linkTo} text={row.original.ExternalName} />;
+    }
+    return '-';
+  }
+
+  const [scheme, port] = getSchemeAndPort(row.original);
+  if (row.original.ExternalIPs?.length) {
+    return row.original.ExternalIPs?.map((ip, index) => {
+      // some ips come through blank
+      if (ip.length === 0) {
+        return '-';
+      }
+
+      if (scheme) {
+        let linkTo = `${scheme}://${ip}`;
+        if (port !== 80 && port !== 443) {
+          linkTo = `${linkTo}:${port}`;
+        }
+        return (
+          <div key={index}>
+            <ExternalIPLink to={linkTo} text={ip} />
+          </div>
+        );
+      }
+      return <div key={index}>{ip}</div>;
+    });
+  }
+
+  const status = row.original.IngressStatus;
+  if (status) {
+    return status?.map((status, index) => {
+      // some ips come through blank
+      if (status.IP.length === 0) {
+        return '-';
+      }
+
+      if (scheme) {
+        let linkTo = `${scheme}://${status.IP}`;
+        if (port !== 80 && port !== 443) {
+          linkTo = `${linkTo}:${port}`;
+        }
+        return (
+          <div key={index}>
+            <ExternalIPLink to={linkTo} text={status.IP} />
+          </div>
+        );
+      }
+      return <div key={index}>{status.IP}</div>;
+    });
+  }
+
+  return '-';
+}
 
 // calculate the scheme based on the ports of the service
 // favour https over http.
@@ -37,100 +137,3 @@ function getSchemeAndPort(svc: Service): [string, number] {
 
   return [scheme, servicePort];
 }
-
-export const externalIP: Column<Service> = {
-  Header: 'External IP',
-  id: 'externalIP',
-  accessor: (row) => {
-    if (row.Type === 'ExternalName') {
-      return row.ExternalName;
-    }
-
-    if (row.ExternalIPs?.length) {
-      return row.ExternalIPs?.slice(0);
-    }
-
-    return row.IngressStatus?.slice(0);
-  },
-  Cell: ({ row }: CellProps<Service>) => {
-    if (row.original.Type === 'ExternalName') {
-      if (row.original.ExternalName) {
-        const linkto = `http://${row.original.ExternalName}`;
-        return <ExternalIPLink to={linkto} text={row.original.ExternalName} />;
-      }
-      return '-';
-    }
-
-    const [scheme, port] = getSchemeAndPort(row.original);
-    if (row.original.ExternalIPs?.length) {
-      return row.original.ExternalIPs?.map((ip, index) => {
-        // some ips come through blank
-        if (ip.length === 0) {
-          return '-';
-        }
-
-        if (scheme) {
-          let linkto = `${scheme}://${ip}`;
-          if (port !== 80 && port !== 443) {
-            linkto = `${linkto}:${port}`;
-          }
-          return (
-            <div key={index}>
-              <ExternalIPLink to={linkto} text={ip} />
-            </div>
-          );
-        }
-        return <div key={index}>{ip}</div>;
-      });
-    }
-
-    const status = row.original.IngressStatus;
-    if (status) {
-      return status?.map((status, index) => {
-        // some ips come through blank
-        if (status.IP.length === 0) {
-          return '-';
-        }
-
-        if (scheme) {
-          let linkto = `${scheme}://${status.IP}`;
-          if (port !== 80 && port !== 443) {
-            linkto = `${linkto}:${port}`;
-          }
-          return (
-            <div key={index}>
-              <ExternalIPLink to={linkto} text={status.IP} />
-            </div>
-          );
-        }
-        return <div key={index}>{status.IP}</div>;
-      });
-    }
-
-    return '-';
-  },
-  disableFilters: true,
-  canHide: true,
-  sortType: (rowA, rowB) => {
-    const a = rowA.original.IngressStatus;
-    const b = rowB.original.IngressStatus;
-    const aExternal = rowA.original.ExternalIPs;
-    const bExternal = rowB.original.ExternalIPs;
-
-    const ipA = a?.[0].IP || aExternal?.[0] || rowA.original.ExternalName;
-    const ipB = b?.[0].IP || bExternal?.[0] || rowA.original.ExternalName;
-
-    if (!ipA) return 1;
-    if (!ipB) return -1;
-
-    // use a nat sort order for ip addresses
-    return ipA.localeCompare(
-      ipB,
-      navigator.languages[0] || navigator.language,
-      {
-        numeric: true,
-        ignorePunctuation: true,
-      }
-    );
-  },
-};

app/react/kubernetes/ServicesView/ServicesDatatable/columns/helper.ts

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

app/react/kubernetes/ServicesView/ServicesDatatable/columns/index.tsx

@@ -8,16 +8,14 @@ import { targetPorts } from './targetPorts';
 import { application } from './application';
 import { created } from './created';
 
-export function useColumns() {
-  return [
-    name,
-    application,
-    namespace,
-    type,
-    ports,
-    targetPorts,
-    clusterIP,
-    externalIP,
-    created,
-  ];
-}
+export const columns = [
+  name,
+  application,
+  namespace,
+  type,
+  ports,
+  targetPorts,
+  clusterIP,
+  externalIP,
+  created,
+];

app/react/kubernetes/ServicesView/ServicesDatatable/columns/name.tsx

@@ -1,15 +1,13 @@
-import { CellProps, Column } from 'react-table';
-
 import { Authorized } from '@/react/hooks/useUser';
 import KubernetesNamespaceHelper from '@/kubernetes/helpers/namespaceHelper';
 
-import { Service } from '../../types';
+import { columnHelper } from './helper';
 
-export const name: Column<Service> = {
-  Header: 'Name',
-  id: 'Name',
-  accessor: (row) => row.Name,
-  Cell: ({ row }: CellProps<Service>) => {
+export const name = columnHelper.accessor('Name', {
+  header: 'Name',
+  id: 'name',
+  cell: ({ row, getValue }) => {
+    const name = getValue();
     const isSystem = KubernetesNamespaceHelper.isSystemNamespace(
       row.original.Namespace
     );
@@ -19,11 +17,8 @@ export const name: Column<Service> = {
       !row.original.Labels['io.portainer.kubernetes.application.owner'];
 
     return (
-      <Authorized
-        authorizations="K8sServiceW"
-        childrenUnauthorized={row.original.Name}
-      >
-        {row.original.Name}
+      <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
+        {name}
 
         {isSystem && (
           <span className="label label-info image-tag label-margins">
@@ -39,7 +34,4 @@ export const name: Column<Service> = {
       </Authorized>
     );
   },
-
-  disableFilters: true,
-  canHide: true,
-};
+});

app/react/kubernetes/ServicesView/ServicesDatatable/columns/namespace.tsx

@@ -1,4 +1,4 @@
-import { CellProps, Column, Row } from 'react-table';
+import { Row } from '@tanstack/react-table';
 
 import { filterHOC } from '@/react/components/datatables/Filter';
 
@@ -6,28 +6,30 @@ import { Link } from '@@/Link';
 
 import { Service } from '../../types';
 
-export const namespace: Column<Service> = {
-  Header: 'Namespace',
+import { columnHelper } from './helper';
+
+export const namespace = columnHelper.accessor('Namespace', {
+  header: 'Namespace',
   id: 'namespace',
-  accessor: 'Namespace',
-  Cell: ({ row }: CellProps<Service>) => (
-    <Link
-      to="kubernetes.resourcePools.resourcePool"
-      params={{
-        id: row.original.Namespace,
-      }}
-      title={row.original.Namespace}
-    >
-      {row.original.Namespace}
-    </Link>
-  ),
-  canHide: true,
-  disableFilters: false,
-  Filter: filterHOC('Filter by namespace'),
-  filter: (rows: Row<Service>[], _filterValue, filters) => {
-    if (filters.length === 0) {
-      return rows;
-    }
-    return rows.filter((r) => filters.includes(r.original.Namespace));
+  cell: ({ getValue }) => {
+    const namespace = getValue();
+
+    return (
+      <Link
+        to="kubernetes.resourcePools.resourcePool"
+        params={{
+          id: namespace,
+        }}
+        title={namespace}
+      >
+        {namespace}
+      </Link>
+    );
   },
-};
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+  filterFn: (row: Row<Service>, columnId: string, filterValue: string[]) =>
+    filterValue.length === 0 || filterValue.includes(row.original.Namespace),
+});

app/react/kubernetes/ServicesView/ServicesDatatable/columns/ports.tsx

@@ -1,76 +1,68 @@
-import { CellProps, Column } from 'react-table';
-
 import { Tooltip } from '@@/Tip/Tooltip';
 
-import { Service } from '../../types';
+import { columnHelper } from './helper';
 
-export const ports: Column<Service> = {
-  Header: () => (
-    <>
-      Ports
-      <Tooltip message="The format of Ports is port[:nodePort]/protocol. Protocol is either TCP, UDP or SCTP." />
-    </>
-  ),
-
-  id: 'ports',
-  accessor: (row) => {
-    const ports = row.Ports;
-    return ports.map(
-      (port) => `${port.Port}:${port.NodePort}/${port.Protocol}`
-    );
-  },
-  Cell: ({ row }: CellProps<Service>) => {
-    if (!row.original.Ports.length) {
-      return '-';
-    }
-
-    return (
+export const ports = columnHelper.accessor(
+  (row) =>
+    row.Ports.map((port) => `${port.Port}:${port.NodePort}/${port.Protocol}`),
+  {
+    header: () => (
       <>
-        {row.original.Ports.map((port, index) => {
-          if (port.NodePort !== 0) {
+        Ports
+        <Tooltip message="The format of Ports is port[:nodePort]/protocol. Protocol is either TCP, UDP or SCTP." />
+      </>
+    ),
+    id: 'ports',
+    cell: ({ row }) => {
+      if (!row.original.Ports.length) {
+        return '-';
+      }
+
+      return (
+        <>
+          {row.original.Ports.map((port, index) => {
+            if (port.NodePort !== 0) {
+              return (
+                <div key={index}>
+                  {port.Port}:{port.NodePort}/{port.Protocol}
+                </div>
+              );
+            }
+
             return (
               <div key={index}>
-                {port.Port}:{port.NodePort}/{port.Protocol}
+                {port.Port}/{port.Protocol}
               </div>
             );
-          }
+          })}
+        </>
+      );
+    },
+    sortingFn: (rowA, rowB) => {
+      const a = rowA.original.Ports;
+      const b = rowB.original.Ports;
 
-          return (
-            <div key={index}>
-              {port.Port}/{port.Protocol}
-            </div>
-          );
-        })}
-      </>
-    );
-  },
-  disableFilters: true,
-  canHide: true,
+      if (!a.length && !b.length) return 0;
 
-  sortType: (rowA, rowB) => {
-    const a = rowA.original.Ports;
-    const b = rowB.original.Ports;
+      if (!a.length) return 1;
+      if (!b.length) return -1;
 
-    if (!a.length && !b.length) return 0;
+      // sort order based on first port
+      const portA = a[0].Port;
+      const portB = b[0].Port;
 
-    if (!a.length) return 1;
-    if (!b.length) return -1;
+      if (portA === portB) {
+        // longer list of ports is considered "greater"
+        if (a.length < b.length) return -1;
+        if (a.length > b.length) return 1;
+        return 0;
+      }
 
-    // sort order based on first port
-    const portA = a[0].Port;
-    const portB = b[0].Port;
+      // now do a regular number sort
+      if (portA < portB) return -1;
+      if (portA > portB) return 1;
 
-    if (portA === portB) {
-      // longer list of ports is considered "greater"
-      if (a.length < b.length) return -1;
-      if (a.length > b.length) return 1;
       return 0;
-    }
-
-    // now do a regular number sort
-    if (portA < portB) return -1;
-    if (portA > portB) return 1;
-
-    return 0;
-  },
-};
+    },
+  }
+);

app/react/kubernetes/ServicesView/ServicesDatatable/columns/targetPorts.tsx

@@ -1,53 +1,46 @@
-import { CellProps, Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Service } from '../../types';
+export const targetPorts = columnHelper.accessor(
+  (row) => row.Ports.map((port) => `${port.TargetPort}`),
+  {
+    header: 'Target Ports',
+    id: 'targetPorts',
+    cell: ({ getValue }) => {
+      const ports = getValue();
 
-export const targetPorts: Column<Service> = {
-  Header: 'Target Ports',
-  id: 'targetPorts',
-  accessor: (row) => {
-    const ports = row.Ports;
-    if (!ports.length) {
-      return '-';
-    }
-    return ports.map((port) => `${port.TargetPort}`);
-  },
-  Cell: ({ row }: CellProps<Service>) => {
-    const ports = row.original.Ports;
-    if (!ports.length) {
-      return '-';
-    }
-    return ports.map((port, index) => <div key={index}>{port.TargetPort}</div>);
-  },
-  disableFilters: true,
-  canHide: true,
-
-  sortType: (rowA, rowB) => {
-    const a = rowA.original.Ports;
-    const b = rowB.original.Ports;
-
-    if (!a.length && !b.length) return 0;
-    if (!a.length) return 1;
-    if (!b.length) return -1;
-
-    const portA = a[0].TargetPort;
-    const portB = b[0].TargetPort;
-
-    if (portA === portB) {
-      if (a.length < b.length) return -1;
-      if (a.length > b.length) return 1;
-
-      return 0;
-    }
-
-    // natural sort of the port
-    return portA.localeCompare(
-      portB,
-      navigator.languages[0] || navigator.language,
-      {
-        numeric: true,
-        ignorePunctuation: true,
+      if (!ports.length) {
+        return '-';
       }
-    );
-  },
-};
+
+      return ports.map((port, index) => <div key={index}>{port}</div>);
+    },
+    sortingFn: (rowA, rowB) => {
+      const a = rowA.original.Ports;
+      const b = rowB.original.Ports;
+
+      if (!a.length && !b.length) return 0;
+      if (!a.length) return 1;
+      if (!b.length) return -1;
+
+      const portA = a[0].TargetPort;
+      const portB = b[0].TargetPort;
+
+      if (portA === portB) {
+        if (a.length < b.length) return -1;
+        if (a.length > b.length) return 1;
+
+        return 0;
+      }
+
+      // natural sort of the port
+      return portA.localeCompare(
+        portB,
+        navigator.languages[0] || navigator.language,
+        {
+          numeric: true,
+          ignorePunctuation: true,
+        }
+      );
+    },
+  }
+);

app/react/kubernetes/ServicesView/ServicesDatatable/columns/type.tsx

@@ -1,22 +1,18 @@
-import { CellProps, Column, Row } from 'react-table';
+import { Row } from '@tanstack/react-table';
 
 import { filterHOC } from '@@/datatables/Filter';
 
 import { Service } from '../../types';
 
-export const type: Column<Service> = {
-  Header: 'Type',
-  id: 'type',
-  accessor: (row) => row.Type,
-  Cell: ({ row }: CellProps<Service>) => <div>{row.original.Type}</div>,
-  canHide: true,
+import { columnHelper } from './helper';
 
-  disableFilters: false,
-  Filter: filterHOC('Filter by type'),
-  filter: (rows: Row<Service>[], _filterValue, filters) => {
-    if (filters.length === 0) {
-      return rows;
-    }
-    return rows.filter((r) => filters.includes(r.original.Type));
+export const type = columnHelper.accessor('Type', {
+  header: 'Type',
+  id: 'type',
+  meta: {
+    filter: filterHOC('Filter by type'),
   },
-};
+  enableColumnFilter: true,
+  filterFn: (row: Row<Service>, columnId: string, filterValue: string[]) =>
+    filterValue.length === 0 || filterValue.includes(row.original.Type),
+});

app/react/kubernetes/ServicesView/ServicesDatatable/datatable-store.ts

@@ -6,7 +6,7 @@ import {
 } from '../../datatables/DefaultDatatableSettings';
 
 export function createStore(storageKey: string) {
-  return createPersistedStore<TableSettings>(storageKey, 'Name', (set) => ({
+  return createPersistedStore<TableSettings>(storageKey, 'name', (set) => ({
     ...refreshableSettings(set),
     ...systemResourcesSettings(set),
   }));