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

app/react/azure/container-instances/ListView/ContainersDatatable.tsx

@@ -1,5 +1,4 @@
 import { Box, Plus, Trash2 } from 'lucide-react';
-import { useStore } from 'zustand';
 
 import { ContainerGroup } from '@/react/azure/types';
 import { Authorized } from '@/react/hooks/useUser';
@@ -9,7 +8,7 @@ import { Datatable } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
 import { createPersistedStore } from '@@/datatables/types';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { columns } from './columns';
 
@@ -22,19 +21,13 @@ export interface Props {
 }
 
 export function ContainersDatatable({ dataset, onRemoveClick }: Props) {
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(tableKey);
+  const tableState = useTableState(settingsStore, tableKey);
 
   return (
     <Datatable
       dataset={dataset}
       columns={columns}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
+      settingsManager={tableState}
       title="Containers"
       titleIcon={Box}
       getRowId={(container) => container.id}

app/react/azure/container-instances/ListView/columns/helper.ts

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

app/react/azure/container-instances/ListView/columns/location.ts

@@ -1,13 +1,5 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { ContainerGroup } from '@/react/azure/types';
-
-export const location: Column<ContainerGroup> = {
-  Header: 'Location',
-  accessor: (container) => container.location,
-  id: 'location',
-  disableFilters: true,
-  Filter: () => null,
-  canHide: true,
-  sortType: 'string',
-};
+export const location = columnHelper.accessor('location', {
+  header: 'Location',
+});

app/react/azure/container-instances/ListView/columns/name.tsx

@@ -1,24 +1,22 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { ContainerGroup } from '@/react/azure/types';
 
 import { Link } from '@@/Link';
 
-export const name: Column<ContainerGroup> = {
-  Header: 'Name',
-  accessor: (container) => container.name,
-  id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: true,
-  sortType: 'string',
-};
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('name', {
+  header: 'Name',
+  cell: NameCell,
+});
 
 export function NameCell({
-  value: name,
+  getValue,
   row: { original: container },
-}: CellProps<ContainerGroup, string>) {
+}: CellContext<ContainerGroup, string>) {
+  const name = getValue();
+
   return (
     <Link
       to="azure.containerinstances.container"

app/react/azure/container-instances/ListView/columns/ownership.tsx

@@ -1,30 +1,30 @@
-import { Column } from 'react-table';
 import clsx from 'clsx';
+import { CellContext } from '@tanstack/react-table';
 
 import { ownershipIcon } from '@/portainer/filters/filters';
 import { ResourceControlOwnership } from '@/react/portainer/access-control/types';
 import { ContainerGroup } from '@/react/azure/types';
 import { determineOwnership } from '@/react/portainer/access-control/models/ResourceControlViewModel';
 
-export const ownership: Column<ContainerGroup> = {
-  Header: 'Ownership',
-  id: 'ownership',
-  accessor: (row) =>
+import { columnHelper } from './helper';
+
+export const ownership = columnHelper.accessor(
+  (row) =>
     row.Portainer && row.Portainer.ResourceControl
       ? determineOwnership(row.Portainer.ResourceControl)
       : ResourceControlOwnership.ADMINISTRATORS,
-  Cell: OwnershipCell,
-  disableFilters: true,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
+  {
+    header: 'Ownership',
+    cell: OwnershipCell,
+    id: 'ownership',
+  }
+);
 
-interface Props {
-  value: 'public' | 'private' | 'restricted' | 'administrators';
-}
+function OwnershipCell({
+  getValue,
+}: CellContext<ContainerGroup, ResourceControlOwnership>) {
+  const value = getValue();
 
-function OwnershipCell({ value }: Props) {
   return (
     <>
       <i

app/react/azure/container-instances/ListView/columns/ports.tsx

@@ -1,25 +1,25 @@
-import { CellProps, Column } from 'react-table';
 import { ExternalLink } from 'lucide-react';
+import { CellContext } from '@tanstack/react-table';
 
 import { ContainerGroup } from '@/react/azure/types';
 import { getPorts } from '@/react/azure/utils';
 
 import { Icon } from '@@/Icon';
 
-export const ports: Column<ContainerGroup> = {
-  Header: 'Published Ports',
-  accessor: (container) => getPorts(container),
+import { columnHelper } from './helper';
+
+export const ports = columnHelper.accessor(getPorts, {
+  header: 'Published Ports',
+  cell: PortsCell,
   id: 'ports',
-  disableFilters: true,
-  Filter: () => null,
-  canHide: true,
-  Cell: PortsCell,
-};
+});
 
 function PortsCell({
-  value: ports,
+  getValue,
   row: { original: container },
-}: CellProps<ContainerGroup, ReturnType<typeof getPorts>>) {
+}: CellContext<ContainerGroup, ReturnType<typeof getPorts>>) {
+  const ports = getValue();
+
   const ip = container.properties.ipAddress
     ? container.properties.ipAddress.ip
     : '';