From 757461d58bfb4577464a9e55ea9251f3430b7b74 Mon Sep 17 00:00:00 2001
From: Chaim Lev-Ari <chiptus@users.noreply.github.com>
Date: Tue, 2 May 2023 13:42:16 +0700
Subject: [PATCH] chore(deps): upgrade react-table to v8 [EE-4837] (#8245)

---
 app/react-table-config.d.ts                   | 150 +-----
 .../ListView/ContainersDatatable.tsx          |  13 +-
 .../ListView/columns/helper.ts                |   5 +
 .../ListView/columns/location.ts              |  16 +-
 .../ListView/columns/name.tsx                 |  24 +-
 .../ListView/columns/ownership.tsx            |  30 +-
 .../ListView/columns/ports.tsx                |  22 +-
 .../components/DetailsTable/DetailsRow.tsx    |   2 +-
 .../components/DetailsTable/DetailsTable.tsx  |   2 +-
 .../datatables/ColumnVisibilityMenu.tsx       |  12 +-
 app/react/components/datatables/Datatable.tsx | 237 +++++----
 .../datatables/DatatableContent.tsx           |  46 +-
 .../datatables/ExpandableDatatable.tsx        |  14 +-
 .../datatables/ExpandableDatatableRow.tsx     |  24 +-
 .../datatables/ExpandingCell.module.css       |   9 -
 .../components/datatables/ExpandingCell.tsx   |  32 --
 app/react/components/datatables/Filter.tsx    |  57 ++-
 app/react/components/datatables/NameCell.tsx  |  42 +-
 .../components/datatables/NestedDatatable.tsx |  68 ++-
 .../components/datatables/NestedTable.css     |   4 +
 app/react/components/datatables/Table.tsx     |  20 +-
 .../components/datatables/TableContent.tsx    |  16 +-
 .../components/datatables/TableHeaderCell.tsx |  21 +-
 .../components/datatables/TableHeaderRow.tsx  |  78 +--
 app/react/components/datatables/TableRow.tsx  |  38 +-
 .../datatables/emptyReactTablePlugin.ts       |   3 -
 .../components/datatables/expand-column.tsx   |  60 +--
 .../components/datatables/filter-types.ts     |  15 +-
 .../components/datatables/select-column.tsx   |  67 +++
 .../datatables/useGoToHighlightedRow.ts       |   2 +-
 .../components/datatables/useRowSelect.ts     | 481 ------------------
 .../components/datatables/useTableState.ts    |  29 ++
 .../createOwnershipColumn.tsx                 |  38 ++
 .../ContainersDatatable.tsx                   |  50 +-
 .../ContainersDatatable/columns/created.tsx   |  17 +-
 .../ContainersDatatable/columns/gpus.tsx      |  17 +-
 .../ContainersDatatable/columns/helper.ts     |   5 +
 .../ContainersDatatable/columns/host.tsx      |  15 +-
 .../ContainersDatatable/columns/image.tsx     |  24 +-
 .../ContainersDatatable/columns/index.tsx     |   8 +-
 .../ContainersDatatable/columns/ip.tsx        |  14 +-
 .../ContainersDatatable/columns/name.tsx      |  23 +-
 .../ContainersDatatable/columns/ownership.tsx |  34 --
 .../ContainersDatatable/columns/ports.tsx     |  23 +-
 .../columns/quick-actions.tsx                 |  19 +-
 .../ContainersDatatable/columns/stack.tsx     |  15 +-
 .../ContainersDatatable/columns/state.tsx     |  31 +-
 .../ContainersDatatable/datatable-store.ts    |   2 +-
 .../images/ItemView/DockerfileDetails.tsx     |   4 +-
 .../ItemView/NetworkContainersTable.tsx       |  90 ++--
 .../networks/ItemView/NetworkDetailsTable.tsx | 136 +++--
 .../networks/ItemView/NetworkOptionsTable.tsx |  18 +-
 .../ItemView/StackContainersDatatable.tsx     | 111 ++--
 .../WaitingRoomView/Datatable/Datatable.tsx   |  15 +-
 .../WaitingRoomView/Datatable/columns.ts      |  93 +---
 .../ServicesDatatable/ServicesDatatable.tsx   |  42 +-
 ...{externalIPLink.tsx => ExternalIPLink.tsx} |   0
 .../ServicesDatatable/columns/application.tsx |  57 ++-
 .../ServicesDatatable/columns/clusterIP.tsx   |  19 +-
 .../ServicesDatatable/columns/created.tsx     |  21 +-
 .../ServicesDatatable/columns/externalIP.tsx  | 201 ++++----
 .../ServicesDatatable/columns/helper.ts       |   5 +
 .../ServicesDatatable/columns/index.tsx       |  24 +-
 .../ServicesDatatable/columns/name.tsx        |  26 +-
 .../ServicesDatatable/columns/namespace.tsx   |  50 +-
 .../ServicesDatatable/columns/ports.tsx       | 114 ++---
 .../ServicesDatatable/columns/targetPorts.tsx |  93 ++--
 .../ServicesDatatable/columns/type.tsx        |  26 +-
 .../ServicesDatatable/datatable-store.ts      |   2 +-
 app/react/kubernetes/ServicesView/service.ts  |   4 +-
 .../IngressClassDatatable.tsx                 |  19 +-
 .../columns/availability.tsx                  |  32 +-
 .../IngressClassDatatable/columns/helper.ts   |   5 +
 .../IngressClassDatatable/columns/index.ts    |   6 +-
 .../IngressClassDatatable/columns/name.tsx    |  28 +-
 .../IngressClassDatatable/columns/type.tsx    |  20 +-
 .../IngressDatatable/IngressDatatable.tsx     |  13 +-
 .../IngressDatatable/columns/className.tsx    |  13 +-
 .../IngressDatatable/columns/created.tsx      |  22 +-
 .../IngressDatatable/columns/helper.ts        |   5 +
 .../columns/{index.tsx => index.ts}           |   0
 .../IngressDatatable/columns/ingressRules.tsx |  67 +--
 .../IngressDatatable/columns/name.tsx         |  36 +-
 .../IngressDatatable/columns/namespace.tsx    |  51 +-
 .../IngressDatatable/columns/type.tsx         |  13 +-
 .../EventsDatatable/EventsDatatable.tsx       |  20 +-
 .../EventsDatatable/columns/date.tsx          |  18 +-
 .../EventsDatatable/columns/helper.ts         |   5 +
 .../EventsDatatable/columns/index.tsx         |   6 +-
 .../EventsDatatable/columns/message.tsx       |  13 +-
 .../EventsDatatable/columns/type.tsx          |  13 +-
 .../JobsView/JobsDatatable/JobsDatatable.tsx  |  24 +-
 .../TasksDatatable/TasksDatatable.tsx         |   6 +-
 .../TasksDatatable/columns/actions.tsx        |  25 +-
 .../TasksDatatable/columns/allocationID.tsx   |  17 +-
 .../TasksDatatable/columns/helper.ts          |   5 +
 .../TasksDatatable/columns/index.tsx          |  16 +-
 .../TasksDatatable/columns/started.tsx        |  12 +-
 .../TasksDatatable/columns/taskGroup.tsx      |  17 +-
 .../TasksDatatable/columns/taskName.tsx       |  13 +-
 .../TasksDatatable/columns/taskStatus.tsx     |  31 +-
 .../JobsDatatable/columns/actions.tsx         |  29 +-
 .../JobsDatatable/columns/created.tsx         |  21 +-
 .../JobsView/JobsDatatable/columns/helper.ts  |   5 +
 .../JobsView/JobsDatatable/columns/index.tsx  |   8 +-
 .../JobsView/JobsDatatable/columns/name.tsx   |  26 +-
 .../JobsDatatable/columns/namespace.tsx       |  17 +-
 .../JobsView/JobsDatatable/columns/status.tsx |  19 +-
 .../JobsView/JobsDatatable/datatable-store.ts |  10 +-
 .../update-schedules/ListView/ListView.tsx    |  13 +-
 .../ListView/columns/created.tsx              |  19 +-
 .../ListView/columns/groups.tsx               |  22 +-
 .../ListView/columns/helper.ts                |   5 +
 .../ListView/columns/index.ts                 |   7 +-
 .../ListView/columns/name.tsx                 |  27 -
 .../ListView/columns/schedule-status.tsx      |  23 +-
 .../ListView/columns/scheduled-time.tsx       |  14 +-
 .../ListView/columns/type.tsx                 |  21 +-
 .../notifications/NotificationsView.tsx       |  12 +-
 .../notifications/columns/details.tsx         |  21 +-
 .../portainer/notifications/columns/helper.ts |   5 +
 .../portainer/notifications/columns/time.tsx  |  18 +-
 .../portainer/notifications/columns/title.tsx |  13 +-
 .../portainer/notifications/columns/type.tsx  |  18 +-
 .../FDOProfilesDatatable.tsx                  |  17 +-
 .../FDOProfilesDatatable/columns/created.tsx  |  20 +-
 .../FDOProfilesDatatable/columns/helper.ts    |   5 +
 .../FDOProfilesDatatable/columns/index.tsx    |  12 +-
 .../FDOProfilesDatatable/columns/name.tsx     |  30 --
 .../TeamAssociationSelector.tsx               |   6 +-
 .../TeamMembersList/TeamMembersList.tsx       | 181 +------
 .../TeamMembersList/columns/helper.ts         |   5 +
 .../TeamMembersList/columns/index.ts          |   4 +
 .../{ => columns}/name-column.tsx             |  26 +-
 .../{ => columns}/team-role-column.tsx        |  28 +-
 .../UsersList/UsersList.tsx                   | 179 +------
 .../UsersList/name-column.tsx                 |  19 +-
 .../TeamsDatatable/TeamsDatatable.tsx         |  23 +-
 package.json                                  |   4 +-
 yarn.lock                                     |  49 +-
 140 files changed, 1805 insertions(+), 2872 deletions(-)
 create mode 100644 app/react/azure/container-instances/ListView/columns/helper.ts
 delete mode 100644 app/react/components/datatables/ExpandingCell.module.css
 delete mode 100644 app/react/components/datatables/ExpandingCell.tsx
 delete mode 100644 app/react/components/datatables/emptyReactTablePlugin.ts
 create mode 100644 app/react/components/datatables/select-column.tsx
 delete mode 100644 app/react/components/datatables/useRowSelect.ts
 create mode 100644 app/react/components/datatables/useTableState.ts
 create mode 100644 app/react/docker/components/datatable-helpers/createOwnershipColumn.tsx
 create mode 100644 app/react/docker/containers/ListView/ContainersDatatable/columns/helper.ts
 delete mode 100644 app/react/docker/containers/ListView/ContainersDatatable/columns/ownership.tsx
 rename app/react/kubernetes/ServicesView/ServicesDatatable/columns/{externalIPLink.tsx => ExternalIPLink.tsx} (100%)
 create mode 100644 app/react/kubernetes/ServicesView/ServicesDatatable/columns/helper.ts
 create mode 100644 app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/helper.ts
 create mode 100644 app/react/kubernetes/ingresses/IngressDatatable/columns/helper.ts
 rename app/react/kubernetes/ingresses/IngressDatatable/columns/{index.tsx => index.ts} (100%)
 create mode 100644 app/react/nomad/jobs/EventsView/EventsDatatable/columns/helper.ts
 create mode 100644 app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/helper.ts
 create mode 100644 app/react/nomad/jobs/JobsView/JobsDatatable/columns/helper.ts
 create mode 100644 app/react/portainer/environments/update-schedules/ListView/columns/helper.ts
 delete mode 100644 app/react/portainer/environments/update-schedules/ListView/columns/name.tsx
 create mode 100644 app/react/portainer/notifications/columns/helper.ts
 create mode 100644 app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/helper.ts
 delete mode 100644 app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/name.tsx
 create mode 100644 app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/helper.ts
 create mode 100644 app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/index.ts
 rename app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/{ => columns}/name-column.tsx (72%)
 rename app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/{ => columns}/team-role-column.tsx (85%)

diff --git a/app/react-table-config.d.ts b/app/react-table-config.d.ts
index f1a7d6381..a37055397 100644
--- a/app/react-table-config.d.ts
+++ b/app/react-table-config.d.ts
@@ -1,149 +1,9 @@
-import {
-  UseColumnOrderInstanceProps,
-  UseColumnOrderState,
-  UseExpandedHooks,
-  UseExpandedInstanceProps,
-  UseExpandedOptions,
-  UseExpandedRowProps,
-  UseExpandedState,
-  UseFiltersColumnOptions,
-  UseFiltersColumnProps,
-  UseFiltersInstanceProps,
-  UseFiltersOptions,
-  UseFiltersState,
-  UseGlobalFiltersColumnOptions,
-  UseGlobalFiltersInstanceProps,
-  UseGlobalFiltersOptions,
-  UseGlobalFiltersState,
-  UseGroupByCellProps,
-  UseGroupByColumnOptions,
-  UseGroupByColumnProps,
-  UseGroupByHooks,
-  UseGroupByInstanceProps,
-  UseGroupByOptions,
-  UseGroupByRowProps,
-  UseGroupByState,
-  UsePaginationInstanceProps,
-  UsePaginationOptions,
-  UsePaginationState,
-  UseResizeColumnsColumnOptions,
-  UseResizeColumnsColumnProps,
-  UseResizeColumnsOptions,
-  UseResizeColumnsState,
-  UseRowSelectHooks,
-  UseRowSelectInstanceProps,
-  UseRowSelectOptions,
-  UseRowSelectRowProps,
-  UseRowSelectState,
-  UseRowStateCellProps,
-  UseRowStateInstanceProps,
-  UseRowStateOptions,
-  UseRowStateRowProps,
-  UseRowStateState,
-  UseSortByColumnOptions,
-  UseSortByColumnProps,
-  UseSortByHooks,
-  UseSortByInstanceProps,
-  UseSortByOptions,
-  UseSortByState,
-} from 'react-table';
-import { UseSelectColumnTableOptions } from '@lineup-lite/hooks';
+import '@tanstack/react-table';
 
-declare module 'react-table' {
-  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
-
-  export interface TableOptions<D extends Record<string, unknown>>
-    extends UseExpandedOptions<D>,
-      UseFiltersOptions<D>,
-      UseGlobalFiltersOptions<D>,
-      UseGroupByOptions<D>,
-      UsePaginationOptions<D>,
-      UseResizeColumnsOptions<D>,
-      UseRowSelectOptions<D>,
-      UseRowStateOptions<D>,
-      UseSortByOptions<D>,
-      UseSelectColumnTableOptions<D>,
-      // note that having Record here allows you to add anything to the options, this matches the spirit of the
-      // underlying js library, but might be cleaner if it's replaced by a more specific type that matches your
-      // feature set, this is a safe default.
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      Record<string, any> {}
-
-  export interface Hooks<
-    D extends Record<string, unknown> = Record<string, unknown>
-  > extends UseExpandedHooks<D>,
-      UseGroupByHooks<D>,
-      UseRowSelectHooks<D>,
-      UseSortByHooks<D> {}
-
-  export interface TableInstance<
-    D extends Record<string, unknown> = Record<string, unknown>
-  > extends UseColumnOrderInstanceProps<D>,
-      UseExpandedInstanceProps<D>,
-      UseFiltersInstanceProps<D>,
-      UseGlobalFiltersInstanceProps<D>,
-      UseGroupByInstanceProps<D>,
-      UsePaginationInstanceProps<D>,
-      UseRowSelectInstanceProps<D>,
-      UseRowStateInstanceProps<D>,
-      UseSortByInstanceProps<D> {}
-
-  export interface TableState<
-    D extends Record<string, unknown> = Record<string, unknown>
-  > extends UseColumnOrderState<D>,
-      UseExpandedState<D>,
-      UseFiltersState<D>,
-      UseGlobalFiltersState<D>,
-      UseGroupByState<D>,
-      UsePaginationState<D>,
-      UseResizeColumnsState<D>,
-      UseRowSelectState<D>,
-      UseRowStateState<D>,
-      UseSortByState<D> {}
-
-  export interface ColumnInterface<
-    D extends Record<string, unknown> = Record<string, unknown>
-  > extends UseFiltersColumnOptions<D>,
-      UseGlobalFiltersColumnOptions<D>,
-      UseGroupByColumnOptions<D>,
-      UseResizeColumnsColumnOptions<D>,
-      UseSortByColumnOptions<D> {
+declare module '@tanstack/table-core' {
+  interface ColumnMeta<TData extends RowData, TValue> {
     className?: string;
-    canHide?: boolean;
-  }
-
-  export interface ColumnInstance<
-    D extends Record<string, unknown> = Record<string, unknown>
-  > extends UseFiltersColumnProps<D>,
-      UseGroupByColumnProps<D>,
-      UseResizeColumnsColumnProps<D>,
-      UseSortByColumnProps<D> {
-    className?: string;
-  }
-
-  export interface Cell<
-    D extends Record<string, unknown> = Record<string, unknown>,
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    V = any
-  > extends UseTableCellProps<D, V>,
-      UseGroupByCellProps<D>,
-      UseRowStateCellProps<D> {
-    className?: string;
-  }
-
-  export interface Row<
-    D extends Record<string, unknown> = Record<string, unknown>
-  > extends UseExpandedRowProps<D>,
-      UseGroupByRowProps<D>,
-      UseRowSelectRowProps<D>,
-      UseRowStateRowProps<D> {}
-
-  export function makePropGetter(
-    hooks: Array<PropGetter>,
-    ...meta: Record<string, unknown>[]
-  ): PropGetter;
-
-  export interface TableToggleRowsSelectedProps {
-    disabled: boolean;
+    filter?: Filter<TData, TValue>;
+    width?: number | 'auto' | string;
   }
 }
diff --git a/app/react/azure/container-instances/ListView/ContainersDatatable.tsx b/app/react/azure/container-instances/ListView/ContainersDatatable.tsx
index 23a9b25c4..3d7f4e872 100644
--- a/app/react/azure/container-instances/ListView/ContainersDatatable.tsx
+++ b/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}
diff --git a/app/react/azure/container-instances/ListView/columns/helper.ts b/app/react/azure/container-instances/ListView/columns/helper.ts
new file mode 100644
index 000000000..0090f0767
--- /dev/null
+++ b/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>();
diff --git a/app/react/azure/container-instances/ListView/columns/location.ts b/app/react/azure/container-instances/ListView/columns/location.ts
index 8079661da..ddeffe5b4 100644
--- a/app/react/azure/container-instances/ListView/columns/location.ts
+++ b/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',
+});
diff --git a/app/react/azure/container-instances/ListView/columns/name.tsx b/app/react/azure/container-instances/ListView/columns/name.tsx
index a49e83c09..249caa98d 100644
--- a/app/react/azure/container-instances/ListView/columns/name.tsx
+++ b/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"
diff --git a/app/react/azure/container-instances/ListView/columns/ownership.tsx b/app/react/azure/container-instances/ListView/columns/ownership.tsx
index 55ac9b271..0f0d88101 100644
--- a/app/react/azure/container-instances/ListView/columns/ownership.tsx
+++ b/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
diff --git a/app/react/azure/container-instances/ListView/columns/ports.tsx b/app/react/azure/container-instances/ListView/columns/ports.tsx
index 580189c01..24bb8deb7 100644
--- a/app/react/azure/container-instances/ListView/columns/ports.tsx
+++ b/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
     : '';
diff --git a/app/react/components/DetailsTable/DetailsRow.tsx b/app/react/components/DetailsTable/DetailsRow.tsx
index 6e9968482..32331bae2 100644
--- a/app/react/components/DetailsTable/DetailsRow.tsx
+++ b/app/react/components/DetailsTable/DetailsRow.tsx
@@ -19,7 +19,7 @@ export function DetailsRow({
       <td className={clsx(colClassName, 'min-w-[150px] !break-normal')}>
         {label}
       </td>
-      {children && (
+      {!!children && (
         <td className={colClassName} data-cy={`detailsTable-${label}Value`}>
           {children}
         </td>
diff --git a/app/react/components/DetailsTable/DetailsTable.tsx b/app/react/components/DetailsTable/DetailsTable.tsx
index 12e34aca3..ee7967da6 100644
--- a/app/react/components/DetailsTable/DetailsTable.tsx
+++ b/app/react/components/DetailsTable/DetailsTable.tsx
@@ -21,7 +21,7 @@ export function DetailsTable({
           </tr>
         </thead>
       )}
-      <tbody>{children}</tbody>
+      {children && <tbody>{children}</tbody>}
     </table>
   );
 }
diff --git a/app/react/components/datatables/ColumnVisibilityMenu.tsx b/app/react/components/datatables/ColumnVisibilityMenu.tsx
index 9bdcc99a3..7feba3520 100644
--- a/app/react/components/datatables/ColumnVisibilityMenu.tsx
+++ b/app/react/components/datatables/ColumnVisibilityMenu.tsx
@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import { Menu, MenuButton, MenuList } from '@reach/menu-button';
-import { ColumnInstance } from 'react-table';
 import { Columns } from 'lucide-react';
+import { Column } from '@tanstack/react-table';
 
 import { Checkbox } from '@@/form-components/Checkbox';
 
 interface Props<D extends object> {
-  columns: ColumnInstance<D>[];
+  columns: Column<D>[];
   onChange: (value: string[]) => void;
   value: string[];
 }
@@ -40,8 +40,12 @@ export function ColumnVisibilityMenu<D extends object>({
                 {columns.map((column) => (
                   <div key={column.id}>
                     <Checkbox
-                      checked={column.isVisible}
-                      label={column.Header as string}
+                      checked={column.getIsVisible()}
+                      label={
+                        typeof column.columnDef.header === 'string'
+                          ? column.columnDef.header
+                          : ''
+                      }
                       id={`visibility_${column.id}`}
                       onChange={(e) =>
                         handleChangeColumnVisibility(
diff --git a/app/react/components/datatables/Datatable.tsx b/app/react/components/datatables/Datatable.tsx
index d40ba06ed..80fa33207 100644
--- a/app/react/components/datatables/Datatable.tsx
+++ b/app/react/components/datatables/Datatable.tsx
@@ -1,36 +1,40 @@
 import {
-  useTable,
-  useFilters,
-  useGlobalFilter,
-  useSortBy,
-  usePagination,
-  Column,
-  Row,
-  TableInstance,
+  Table as TableInstance,
   TableState,
-  TableRowProps,
-  useExpanded,
-} from 'react-table';
-import { ReactNode } from 'react';
-import { useRowSelectColumn } from '@lineup-lite/hooks';
+  useReactTable,
+  Row,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getFilteredRowModel,
+  getSortedRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFacetedMinMaxValues,
+  getExpandedRowModel,
+  TableOptions,
+} from '@tanstack/react-table';
+import { ReactNode, useMemo } from 'react';
 import clsx from 'clsx';
+import _ from 'lodash';
 
 import { IconProps } from '@@/Icon';
 
-import { Table } from './Table';
-import { multiple } from './filter-types';
-import { useRowSelect } from './useRowSelect';
-import { BasicTableSettings } from './types';
 import { DatatableHeader } from './DatatableHeader';
 import { DatatableFooter } from './DatatableFooter';
-import { DatatableContent } from './DatatableContent';
 import { defaultGetRowId } from './defaultGetRowId';
-import { emptyPlugin } from './emptyReactTablePlugin';
+import { Table } from './Table';
 import { useGoToHighlightedRow } from './useGoToHighlightedRow';
+import { BasicTableSettings } from './types';
+import { DatatableContent } from './DatatableContent';
+import { createSelectColumn } from './select-column';
+import { TableRow } from './TableRow';
 
-export interface Props<D extends Record<string, unknown>> {
+export interface Props<
+  D extends Record<string, unknown>,
+  TSettings extends BasicTableSettings = BasicTableSettings
+> {
   dataset: D[];
-  columns: readonly Column<D>[];
+  columns: TableOptions<D>['columns'];
   renderTableSettings?(instance: TableInstance<D>): ReactNode;
   renderTableActions?(selectedRows: D[]): ReactNode;
   disableSelect?: boolean;
@@ -39,29 +43,20 @@ export interface Props<D extends Record<string, unknown>> {
   emptyContentLabel?: string;
   title?: string;
   titleIcon?: IconProps['icon'];
-  initialTableState?: Partial<TableState<D>>;
+  initialTableState?: Partial<TableState>;
   isLoading?: boolean;
   totalCount?: number;
   description?: ReactNode;
   pageCount?: number;
-  initialSortBy?: BasicTableSettings['sortBy'];
-  initialPageSize?: BasicTableSettings['pageSize'];
   highlightedItemId?: string;
-
-  searchValue: string;
-  onSearchChange(search: string): void;
-  onSortByChange(colId: string, desc: boolean): void;
-  onPageSizeChange(pageSize: number): void;
-
-  // send state up
   onPageChange?(page: number): void;
 
-  renderRow?(
-    row: Row<D>,
-    rowProps: TableRowProps,
-    highlightedItemId?: string
-  ): ReactNode;
-  expandable?: boolean;
+  settingsManager: TSettings & {
+    search: string;
+    setSearch: (value: string) => void;
+  };
+  renderRow?(row: Row<D>, highlightedItemId?: string): ReactNode;
+  getRowCanExpand?(row: Row<D>): boolean;
   noWidget?: boolean;
 }
 
@@ -81,78 +76,83 @@ export function Datatable<D extends Record<string, unknown>>({
   totalCount = dataset.length,
   description,
   pageCount,
-
-  initialSortBy,
-  initialPageSize = 10,
-  onPageChange = () => {},
-
-  onPageSizeChange,
-  onSortByChange,
-  searchValue,
-  onSearchChange,
-
+  onPageChange = () => null,
+  settingsManager: settings,
   renderRow = defaultRenderRow,
-  expandable = false,
   highlightedItemId,
   noWidget,
+  getRowCanExpand,
 }: Props<D>) {
   const isServerSidePagination = typeof pageCount !== 'undefined';
-
-  const tableInstance = useTable<D>(
-    {
-      defaultCanFilter: false,
-      columns,
-      data: dataset,
-      filterTypes: { multiple },
-      initialState: {
-        pageSize: initialPageSize,
-        sortBy: initialSortBy ? [initialSortBy] : [],
-        globalFilter: searchValue,
-        ...initialTableState,
-      },
-      isRowSelectable,
-      autoResetExpanded: false,
-      autoResetSelectedRows: false,
-      getRowId,
-      ...(isServerSidePagination ? { manualPagination: true, pageCount } : {}),
-    },
-    useFilters,
-    useGlobalFilter,
-    useSortBy,
-    expandable ? useExpanded : emptyPlugin,
-    usePagination,
-    useRowSelect,
-    !disableSelect ? useRowSelectColumn : emptyPlugin
+  const enableRowSelection = getIsSelectionEnabled(
+    disableSelect,
+    isRowSelectable
   );
 
+  const allColumns = useMemo(
+    () => _.compact([!disableSelect && createSelectColumn<D>(), ...columns]),
+    [disableSelect, columns]
+  );
+
+  const tableInstance = useReactTable<D>({
+    columns: allColumns,
+    data: dataset,
+    initialState: {
+      pagination: {
+        pageSize: settings.pageSize,
+      },
+      sorting: settings.sortBy ? [settings.sortBy] : [],
+      globalFilter: settings.search,
+
+      ...initialTableState,
+    },
+    defaultColumn: {
+      enableColumnFilter: false,
+      enableHiding: true,
+    },
+    enableRowSelection,
+    autoResetExpanded: false,
+    globalFilterFn,
+    getRowId,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getFacetedMinMaxValues: getFacetedMinMaxValues(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowCanExpand,
+    ...(isServerSidePagination ? { manualPagination: true, pageCount } : {}),
+  });
+
+  const tableState = tableInstance.getState();
+
   useGoToHighlightedRow(
     isServerSidePagination,
-    tableInstance.state.pageSize,
-    tableInstance.rows,
+    tableState.pagination.pageSize,
+    tableInstance.getCoreRowModel().rows,
     handlePageChange,
     highlightedItemId
   );
 
-  const selectedItems = tableInstance.selectedFlatRows.map(
-    (row) => row.original
-  );
+  const selectedRowModel = tableInstance.getSelectedRowModel();
+  const selectedItems = selectedRowModel.rows.map((row) => row.original);
 
   return (
     <Table.Container noWidget={noWidget}>
       <DatatableHeader
         onSearchChange={handleSearchBarChange}
-        searchValue={searchValue}
+        searchValue={settings.search}
         title={title}
         titleIcon={titleIcon}
+        description={description}
         renderTableActions={() => renderTableActions(selectedItems)}
         renderTableSettings={() => renderTableSettings(tableInstance)}
-        description={description}
       />
       <DatatableContent<D>
         tableInstance={tableInstance}
-        renderRow={(row, rowProps) =>
-          renderRow(row, rowProps, highlightedItemId)
-        }
+        renderRow={(row) => renderRow(row, highlightedItemId)}
         emptyContentLabel={emptyContentLabel}
         isLoading={isLoading}
         onSortChange={handleSortChange}
@@ -161,8 +161,8 @@ export function Datatable<D extends Record<string, unknown>>({
       <DatatableFooter
         onPageChange={handlePageChange}
         onPageSizeChange={handlePageSizeChange}
-        page={tableInstance.state.pageIndex}
-        pageSize={tableInstance.state.pageSize}
+        page={tableState.pagination.pageIndex}
+        pageSize={tableState.pagination.pageSize}
         totalCount={totalCount}
         totalSelected={selectedItems.length}
       />
@@ -171,38 +171,81 @@ export function Datatable<D extends Record<string, unknown>>({
 
   function handleSearchBarChange(value: string) {
     tableInstance.setGlobalFilter(value);
-    onSearchChange(value);
+    settings.setSearch(value);
   }
 
   function handlePageChange(page: number) {
-    tableInstance.gotoPage(page);
+    tableInstance.setPageIndex(page);
     onPageChange(page);
   }
 
   function handleSortChange(colId: string, desc: boolean) {
-    onSortByChange(colId, desc);
+    settings.setSortBy(colId, desc);
   }
 
   function handlePageSizeChange(pageSize: number) {
     tableInstance.setPageSize(pageSize);
-    onPageSizeChange(pageSize);
+    settings.setPageSize(pageSize);
   }
 }
 
 function defaultRenderRow<D extends Record<string, unknown>>(
   row: Row<D>,
-  rowProps: TableRowProps,
   highlightedItemId?: string
 ) {
   return (
-    <Table.Row<D>
-      key={rowProps.key}
-      cells={row.cells}
-      className={clsx(rowProps.className, {
+    <TableRow<D>
+      cells={row.getVisibleCells()}
+      className={clsx({
         active: highlightedItemId === row.id,
       })}
-      role={rowProps.role}
-      style={rowProps.style}
     />
   );
 }
+
+function getIsSelectionEnabled<D extends Record<string, unknown>>(
+  disabledSelect?: boolean,
+  isRowSelectable?: Props<D>['isRowSelectable']
+) {
+  if (disabledSelect) {
+    return false;
+  }
+
+  if (isRowSelectable) {
+    return isRowSelectable;
+  }
+
+  return true;
+}
+
+function globalFilterFn<D>(
+  row: Row<D>,
+  columnId: string,
+  filterValue: null | string
+): boolean {
+  const value = row.getValue(columnId);
+
+  if (filterValue === null || filterValue === '') {
+    return true;
+  }
+
+  if (value == null) {
+    return false;
+  }
+
+  const filterValueLower = filterValue.toLowerCase();
+
+  if (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  ) {
+    return value.toString().toLowerCase().includes(filterValueLower);
+  }
+
+  if (Array.isArray(value)) {
+    return value.some((item) => item.toLowerCase().includes(filterValueLower));
+  }
+
+  return false;
+}
diff --git a/app/react/components/datatables/DatatableContent.tsx b/app/react/components/datatables/DatatableContent.tsx
index 2f645454c..c3d034f37 100644
--- a/app/react/components/datatables/DatatableContent.tsx
+++ b/app/react/components/datatables/DatatableContent.tsx
@@ -1,10 +1,10 @@
-import { Row, TableInstance, TableRowProps } from 'react-table';
+import { Row, Table as TableInstance } from '@tanstack/react-table';
 
 import { Table } from './Table';
 
 interface Props<D extends Record<string, unknown>> {
   tableInstance: TableInstance<D>;
-  renderRow(row: Row<D>, rowProps: TableRowProps): React.ReactNode;
+  renderRow(row: Row<D>): React.ReactNode;
   onSortChange?(colId: string, desc: boolean): void;
   isLoading?: boolean;
   emptyContentLabel?: string;
@@ -17,42 +17,24 @@ export function DatatableContent<D extends Record<string, unknown>>({
   isLoading,
   emptyContentLabel,
 }: Props<D>) {
-  const { getTableProps, getTableBodyProps, headerGroups, page, prepareRow } =
-    tableInstance;
+  const headerGroups = tableInstance.getHeaderGroups();
+  const pageRowModel = tableInstance.getPaginationRowModel();
 
-  const tableProps = getTableProps();
-  const tbodyProps = getTableBodyProps();
   return (
-    <Table
-      className={tableProps.className}
-      role={tableProps.role}
-      style={tableProps.style}
-    >
+    <Table>
       <thead>
-        {headerGroups.map((headerGroup) => {
-          const { key, className, role, style } =
-            headerGroup.getHeaderGroupProps();
-          return (
-            <Table.HeaderRow<D>
-              key={key}
-              className={className}
-              role={role}
-              style={style}
-              headers={headerGroup.headers}
-              onSortChange={onSortChange}
-            />
-          );
-        })}
+        {headerGroups.map((headerGroup) => (
+          <Table.HeaderRow<D>
+            key={headerGroup.id}
+            headers={headerGroup.headers}
+            onSortChange={onSortChange}
+          />
+        ))}
       </thead>
-      <tbody
-        className={tbodyProps.className}
-        role={tbodyProps.role}
-        style={tbodyProps.style}
-      >
+      <tbody>
         <Table.Content<D>
-          rows={page}
+          rows={pageRowModel.rows}
           isLoading={isLoading}
-          prepareRow={prepareRow}
           emptyContent={emptyContentLabel}
           renderRow={renderRow}
         />
diff --git a/app/react/components/datatables/ExpandableDatatable.tsx b/app/react/components/datatables/ExpandableDatatable.tsx
index 3dcf7634c..7473237c2 100644
--- a/app/react/components/datatables/ExpandableDatatable.tsx
+++ b/app/react/components/datatables/ExpandableDatatable.tsx
@@ -1,4 +1,4 @@
-import { Row } from 'react-table';
+import { Row } from '@tanstack/react-table';
 import { ReactNode } from 'react';
 
 import { ExpandableDatatableTableRow } from './ExpandableDatatableRow';
@@ -7,25 +7,25 @@ import { Datatable, Props as DatatableProps } from './Datatable';
 interface Props<D extends Record<string, unknown>>
   extends Omit<DatatableProps<D>, 'renderRow' | 'expandable'> {
   renderSubRow(row: Row<D>): ReactNode;
+  expandOnRowClick?: boolean;
 }
 
 export function ExpandableDatatable<D extends Record<string, unknown>>({
   renderSubRow,
+  getRowCanExpand = () => true,
+  expandOnRowClick,
   ...props
 }: Props<D>) {
   return (
     <Datatable<D>
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
-      expandable
-      renderRow={(row, { key, className, role, style }) => (
+      getRowCanExpand={getRowCanExpand}
+      renderRow={(row) => (
         <ExpandableDatatableTableRow<D>
-          key={key}
           row={row}
-          className={className}
-          role={role}
-          style={style}
           renderSubRow={renderSubRow}
+          expandOnClick={expandOnRowClick}
         />
       )}
     />
diff --git a/app/react/components/datatables/ExpandableDatatableRow.tsx b/app/react/components/datatables/ExpandableDatatableRow.tsx
index 7a945075d..a624e0d4b 100644
--- a/app/react/components/datatables/ExpandableDatatableRow.tsx
+++ b/app/react/components/datatables/ExpandableDatatableRow.tsx
@@ -1,37 +1,33 @@
-import { CSSProperties, ReactNode } from 'react';
-import { Row } from 'react-table';
+import { ReactNode } from 'react';
+import { Row } from '@tanstack/react-table';
 
 import { TableRow } from './TableRow';
 
 interface Props<D extends Record<string, unknown>> {
   row: Row<D>;
-  className?: string;
-  role?: string;
-  style?: CSSProperties;
   disableSelect?: boolean;
   renderSubRow(row: Row<D>): ReactNode;
+  expandOnClick?: boolean;
 }
 
 export function ExpandableDatatableTableRow<D extends Record<string, unknown>>({
   row,
-  className,
-  role,
-  style,
   disableSelect,
   renderSubRow,
+  expandOnClick,
 }: Props<D>) {
+  const cells = row.getVisibleCells();
+
   return (
     <>
       <TableRow<D>
-        cells={row.cells}
-        className={className}
-        role={role}
-        style={style}
+        cells={cells}
+        onClick={expandOnClick ? () => row.toggleExpanded() : undefined}
       />
-      {row.isExpanded && (
+      {row.getIsExpanded() && (
         <tr>
           {!disableSelect && <td />}
-          <td colSpan={disableSelect ? row.cells.length : row.cells.length - 1}>
+          <td colSpan={disableSelect ? cells.length : cells.length - 1}>
             {renderSubRow(row)}
           </td>
         </tr>
diff --git a/app/react/components/datatables/ExpandingCell.module.css b/app/react/components/datatables/ExpandingCell.module.css
deleted file mode 100644
index 5283f7c65..000000000
--- a/app/react/components/datatables/ExpandingCell.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.expand-button {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-}
diff --git a/app/react/components/datatables/ExpandingCell.tsx b/app/react/components/datatables/ExpandingCell.tsx
deleted file mode 100644
index 8275bdd39..000000000
--- a/app/react/components/datatables/ExpandingCell.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { Row } from 'react-table';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-
-import { Icon } from '@@/Icon';
-
-import styles from './ExpandingCell.module.css';
-
-interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
-  row: Row<D>;
-  showExpandArrow: boolean;
-}
-
-export function ExpandingCell<
-  D extends Record<string, unknown> = Record<string, unknown>
->({ row, showExpandArrow, children }: PropsWithChildren<Props<D>>) {
-  return (
-    <>
-      {showExpandArrow && (
-        <button type="button" className={styles.expandButton}>
-          <Icon
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...row.getToggleRowExpandedProps()}
-            icon={row.isExpanded ? ChevronDown : ChevronRight}
-            className="mr-1"
-          />
-        </button>
-      )}
-      {children}
-    </>
-  );
-}
diff --git a/app/react/components/datatables/Filter.tsx b/app/react/components/datatables/Filter.tsx
index 56b992748..f2d4f1280 100644
--- a/app/react/components/datatables/Filter.tsx
+++ b/app/react/components/datatables/Filter.tsx
@@ -1,13 +1,11 @@
 import clsx from 'clsx';
 import { useMemo } from 'react';
 import { Menu, MenuButton, MenuPopover } from '@reach/menu-button';
-import { ColumnInstance } from 'react-table';
+import { Column } from '@tanstack/react-table';
 import { Check, Filter } from 'lucide-react';
 
 import { Icon } from '@@/Icon';
 
-export const DefaultFilter = filterHOC('Filter by state');
-
 interface MultipleSelectionFilterProps {
   options: string[];
   value: string[];
@@ -28,12 +26,12 @@ export function MultipleSelectionFilter({
     <div>
       <Menu>
         <MenuButton
-          className={clsx('table-filter flex items-center', {
-            'filter-active': enabled,
-          })}
+          className={clsx('table-filter', { 'filter-active': enabled })}
         >
-          Filter
-          <Icon icon={enabled ? Check : Filter} className="!ml-1" />
+          <div className="flex items-center gap-1">
+            Filter
+            <Icon icon={enabled ? Check : Filter} />
+          </div>
         </MenuButton>
         <MenuPopover className="dropdown-menu">
           <div className="tableMenu">
@@ -70,27 +68,54 @@ export function MultipleSelectionFilter({
   }
 }
 
-export function filterHOC(menuTitle: string) {
+export function filterHOC<TData extends Record<string, unknown>>(
+  menuTitle: string
+) {
   return function Filter({
-    column: { filterValue, setFilter, preFilteredRows, id },
+    column: { getFilterValue, setFilterValue, getFacetedRowModel, id },
   }: {
-    column: ColumnInstance;
+    column: Column<TData>;
   }) {
+    const { flatRows } = getFacetedRowModel();
+
     const options = useMemo(() => {
       const options = new Set<string>();
-      preFilteredRows.forEach((row) => {
-        options.add(row.values[id]);
+      flatRows.forEach(({ getValue }) => {
+        const value = getValue<string>(id);
+
+        options.add(value);
       });
       return Array.from(options);
-    }, [id, preFilteredRows]);
+    }, [flatRows, id]);
+
+    const value = getFilterValue();
+
+    const valueAsArray = getValueAsArrayOfStrings(value);
+
     return (
       <MultipleSelectionFilter
         options={options}
         filterKey={id}
-        value={filterValue}
-        onChange={setFilter}
+        value={valueAsArray}
+        onChange={setFilterValue}
         menuTitle={menuTitle}
       />
     );
   };
 }
+
+function getValueAsArrayOfStrings(value: unknown): string[] {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  if (!value || (typeof value !== 'string' && typeof value !== 'number')) {
+    return [];
+  }
+
+  if (typeof value === 'number') {
+    return [value.toString()];
+  }
+
+  return [value];
+}
diff --git a/app/react/components/datatables/NameCell.tsx b/app/react/components/datatables/NameCell.tsx
index 576a74026..9d5db635e 100644
--- a/app/react/components/datatables/NameCell.tsx
+++ b/app/react/components/datatables/NameCell.tsx
@@ -1,30 +1,36 @@
-import { CellProps, Column } from 'react-table';
+import { ColumnDef, CellContext } from '@tanstack/react-table';
 
 import { Link } from '@@/Link';
 
 export function buildNameColumn<T extends Record<string, unknown>>(
-  nameKey: string,
+  nameKey: keyof T,
   idKey: string,
   path: string
-) {
-  const name: Column<T> = {
-    Header: 'Name',
-    accessor: (row) => row[nameKey],
+): ColumnDef<T> {
+  const cell = createCell<T>();
+
+  return {
+    header: 'Name',
+    accessorKey: nameKey,
     id: 'name',
-    Cell: NameCell,
-    disableFilters: true,
-    Filter: () => null,
-    canHide: false,
-    sortType: 'string',
+    cell,
+    enableSorting: true,
+    sortingFn: 'text',
   };
 
-  return name;
+  function createCell<T extends Record<string, unknown>>() {
+    return function NameCell({ renderValue, row }: CellContext<T, unknown>) {
+      const name = renderValue() || '';
 
-  function NameCell({ value: name, row }: CellProps<T, string>) {
-    return (
-      <Link to={path} params={{ id: row.original[idKey] }} title={name}>
-        {name}
-      </Link>
-    );
+      if (typeof name !== 'string') {
+        return null;
+      }
+
+      return (
+        <Link to={path} params={{ id: row.original[idKey] }} title={name}>
+          {name}
+        </Link>
+      );
+    };
   }
 }
diff --git a/app/react/components/datatables/NestedDatatable.tsx b/app/react/components/datatables/NestedDatatable.tsx
index d7fa50039..dff600a68 100644
--- a/app/react/components/datatables/NestedDatatable.tsx
+++ b/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>
diff --git a/app/react/components/datatables/NestedTable.css b/app/react/components/datatables/NestedTable.css
index 91d8dd28a..3c6d03276 100644
--- a/app/react/components/datatables/NestedTable.css
+++ b/app/react/components/datatables/NestedTable.css
@@ -1,3 +1,7 @@
+.inner-datatable .widget {
+  border: 0 !important;
+}
+
 .inner-datatable {
   @apply rounded-md border border-solid border-gray-5 th-dark:border-gray-9;
   overflow: hidden;
diff --git a/app/react/components/datatables/Table.tsx b/app/react/components/datatables/Table.tsx
index 171f8a8f8..4429f62b3 100644
--- a/app/react/components/datatables/Table.tsx
+++ b/app/react/components/datatables/Table.tsx
@@ -1,24 +1,22 @@
 import clsx from 'clsx';
 import { PropsWithChildren } from 'react';
-import { TableProps } from 'react-table';
 
 import { TableContainer } from './TableContainer';
 import { TableActions } from './TableActions';
+import { TableFooter } from './TableFooter';
 import { TableTitleActions } from './TableTitleActions';
-import { TableContent } from './TableContent';
-import { TableHeaderCell } from './TableHeaderCell';
 import { TableSettingsMenu } from './TableSettingsMenu';
 import { TableTitle } from './TableTitle';
+import { TableContent } from './TableContent';
+import { TableHeaderCell } from './TableHeaderCell';
 import { TableHeaderRow } from './TableHeaderRow';
 import { TableRow } from './TableRow';
-import { TableFooter } from './TableFooter';
 
-function MainComponent({
-  children,
-  className,
-  role,
-  style,
-}: PropsWithChildren<TableProps>) {
+interface Props {
+  className?: string;
+}
+
+function MainComponent({ children, className }: PropsWithChildren<Props>) {
   return (
     <div className="table-responsive">
       <table
@@ -26,8 +24,6 @@ function MainComponent({
           'table-hover table-filters nowrap-cells table',
           className
         )}
-        role={role}
-        style={style}
       >
         {children}
       </table>
diff --git a/app/react/components/datatables/TableContent.tsx b/app/react/components/datatables/TableContent.tsx
index 5ae126bc2..80f692dc5 100644
--- a/app/react/components/datatables/TableContent.tsx
+++ b/app/react/components/datatables/TableContent.tsx
@@ -1,12 +1,11 @@
-import { PropsWithChildren } from 'react';
-import { Row, TableRowProps } from 'react-table';
+import { Fragment, PropsWithChildren } from 'react';
+import { Row } from '@tanstack/react-table';
 
 interface Props<T extends Record<string, unknown> = Record<string, unknown>> {
   isLoading?: boolean;
   rows: Row<T>[];
   emptyContent?: string;
-  prepareRow(row: Row<T>): void;
-  renderRow(row: Row<T>, rowProps: TableRowProps): React.ReactNode;
+  renderRow(row: Row<T>): React.ReactNode;
 }
 
 export function TableContent<
@@ -15,7 +14,6 @@ export function TableContent<
   isLoading = false,
   rows,
   emptyContent = 'No items available',
-  prepareRow,
   renderRow,
 }: Props<T>) {
   if (isLoading) {
@@ -28,11 +26,9 @@ export function TableContent<
 
   return (
     <>
-      {rows.map((row) => {
-        prepareRow(row);
-        const { key, className, role, style } = row.getRowProps();
-        return renderRow(row, { key, className, role, style });
-      })}
+      {rows.map((row) => (
+        <Fragment key={row.id}>{renderRow(row)}</Fragment>
+      ))}
     </>
   );
 }
diff --git a/app/react/components/datatables/TableHeaderCell.tsx b/app/react/components/datatables/TableHeaderCell.tsx
index 2039dd748..e563b6eea 100644
--- a/app/react/components/datatables/TableHeaderCell.tsx
+++ b/app/react/components/datatables/TableHeaderCell.tsx
@@ -1,33 +1,33 @@
 import clsx from 'clsx';
-import { PropsWithChildren, ReactNode } from 'react';
-import { TableHeaderProps } from 'react-table';
+import { CSSProperties, PropsWithChildren, ReactNode } from 'react';
 
-import { TableHeaderSortIcons } from './TableHeaderSortIcons';
 import styles from './TableHeaderCell.module.css';
+import { TableHeaderSortIcons } from './TableHeaderSortIcons';
 
 interface Props {
-  canFilter: boolean;
   canSort: boolean;
-  headerProps: TableHeaderProps;
   isSorted: boolean;
   isSortedDesc?: boolean;
   onSortClick: (desc: boolean) => void;
   render: () => ReactNode;
-  renderFilter: () => ReactNode;
+  renderFilter?: () => ReactNode;
+  className?: string;
+  style?: CSSProperties;
 }
 
 export function TableHeaderCell({
-  headerProps: { className, role, style },
   canSort,
   render,
   onSortClick,
   isSorted,
   isSortedDesc = true,
-  canFilter,
+
   renderFilter,
+  className,
+  style,
 }: Props) {
   return (
-    <th role={role} style={style} className={className}>
+    <th style={style} className={className}>
       <div className="flex h-full flex-row flex-nowrap items-center gap-1">
         <SortWrapper
           canSort={canSort}
@@ -37,7 +37,7 @@ export function TableHeaderCell({
         >
           {render()}
         </SortWrapper>
-        {canFilter ? renderFilter() : null}
+        {renderFilter ? renderFilter() : null}
       </div>
     </th>
   );
@@ -76,7 +76,6 @@ function SortWrapper({
         <TableHeaderSortIcons
           sorted={isSorted}
           descending={isSorted && !!isSortedDesc}
-          className="ml-1"
         />
       </div>
     </button>
diff --git a/app/react/components/datatables/TableHeaderRow.tsx b/app/react/components/datatables/TableHeaderRow.tsx
index 499735307..b3fdb3b42 100644
--- a/app/react/components/datatables/TableHeaderRow.tsx
+++ b/app/react/components/datatables/TableHeaderRow.tsx
@@ -1,48 +1,58 @@
-import { HeaderGroup, TableHeaderProps } from 'react-table';
+import { Header, flexRender } from '@tanstack/react-table';
 
+import { filterHOC } from './Filter';
 import { TableHeaderCell } from './TableHeaderCell';
 
 interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
-  headers: HeaderGroup<D>[];
+  headers: Header<D, unknown>[];
   onSortChange?(colId: string, desc: boolean): void;
 }
 
 export function TableHeaderRow<
   D extends Record<string, unknown> = Record<string, unknown>
->({
-  headers,
-  onSortChange,
-  className,
-  role,
-  style,
-}: Props<D> & TableHeaderProps) {
+>({ headers, onSortChange }: Props<D>) {
   return (
-    <tr className={className} role={role} style={style}>
-      {headers.map((column) => (
-        <TableHeaderCell
-          headerProps={{
-            ...column.getHeaderProps({
-              className: column.className,
-              style: {
-                width: column.disableResizing ? column.width : '',
-              },
-            }),
-          }}
-          key={column.id}
-          canSort={column.canSort}
-          onSortClick={(desc) => {
-            column.toggleSortBy(desc);
-            if (onSortChange) {
-              onSortChange(column.id, desc);
+    <tr>
+      {headers.map((header) => {
+        const sortDirection = header.column.getIsSorted();
+        const {
+          meta: { className, width } = { className: '', width: undefined },
+        } = header.column.columnDef;
+
+        return (
+          <TableHeaderCell
+            className={className}
+            style={{
+              width,
+            }}
+            key={header.id}
+            canSort={header.column.getCanSort()}
+            onSortClick={(desc) => {
+              header.column.toggleSorting(desc);
+              if (onSortChange) {
+                onSortChange(header.id, desc);
+              }
+            }}
+            isSorted={!!sortDirection}
+            isSortedDesc={sortDirection ? sortDirection === 'desc' : false}
+            render={() =>
+              flexRender(header.column.columnDef.header, header.getContext())
             }
-          }}
-          isSorted={column.isSorted}
-          isSortedDesc={column.isSortedDesc}
-          render={() => column.render('Header')}
-          canFilter={!column.disableFilters}
-          renderFilter={() => column.render('Filter')}
-        />
-      ))}
+            renderFilter={
+              header.column.getCanFilter()
+                ? () =>
+                    flexRender(
+                      header.column.columnDef.meta?.filter ||
+                        filterHOC('Filter'),
+                      {
+                        column: header.column,
+                      }
+                    )
+                : undefined
+            }
+          />
+        );
+      })}
     </tr>
   );
 }
diff --git a/app/react/components/datatables/TableRow.tsx b/app/react/components/datatables/TableRow.tsx
index c687bfcc3..2b3bda61e 100644
--- a/app/react/components/datatables/TableRow.tsx
+++ b/app/react/components/datatables/TableRow.tsx
@@ -1,31 +1,25 @@
-import { Cell, TableRowProps } from 'react-table';
+import { Cell, flexRender } from '@tanstack/react-table';
+import clsx from 'clsx';
 
-interface Props<D extends Record<string, unknown> = Record<string, unknown>>
-  extends Omit<TableRowProps, 'key'> {
-  cells: Cell<D>[];
+interface Props<D extends Record<string, unknown> = Record<string, unknown>> {
+  cells: Cell<D, unknown>[];
+  className?: string;
+  onClick?: () => void;
 }
 
 export function TableRow<
   D extends Record<string, unknown> = Record<string, unknown>
->({ cells, className, role, style }: Props<D>) {
+>({ cells, className, onClick }: Props<D>) {
   return (
-    <tr className={className} role={role} style={style}>
-      {cells.map((cell) => {
-        const cellProps = cell.getCellProps({
-          className: cell.className,
-        });
-
-        return (
-          <td
-            className={cellProps.className}
-            role={cellProps.role}
-            style={cellProps.style}
-            key={cellProps.key}
-          >
-            {cell.render('Cell')}
-          </td>
-        );
-      })}
+    <tr
+      className={clsx(className, { 'cursor-pointer': !!onClick })}
+      onClick={onClick}
+    >
+      {cells.map((cell) => (
+        <td key={cell.id}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </td>
+      ))}
     </tr>
   );
 }
diff --git a/app/react/components/datatables/emptyReactTablePlugin.ts b/app/react/components/datatables/emptyReactTablePlugin.ts
deleted file mode 100644
index 377ecc7a9..000000000
--- a/app/react/components/datatables/emptyReactTablePlugin.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function emptyPlugin() {}
-
-emptyPlugin.pluginName = 'emptyPlugin';
diff --git a/app/react/components/datatables/expand-column.tsx b/app/react/components/datatables/expand-column.tsx
index 514c2cc3a..b293b4dae 100644
--- a/app/react/components/datatables/expand-column.tsx
+++ b/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,
+    },
   };
 }
diff --git a/app/react/components/datatables/filter-types.ts b/app/react/components/datatables/filter-types.ts
index a38545eab..6ab102d4d 100644
--- a/app/react/components/datatables/filter-types.ts
+++ b/app/react/components/datatables/filter-types.ts
@@ -1,14 +1,13 @@
-import { Row } from 'react-table';
+import { Row } from '@tanstack/react-table';
 
 export function multiple<
   D extends Record<string, unknown> = Record<string, unknown>
->(rows: Row<D>[], columnIds: string[], filterValue: string[] = []) {
-  if (filterValue.length === 0 || columnIds.length === 0) {
-    return rows;
+>({ getValue }: Row<D>, columnId: string, filterValue: string[]): boolean {
+  if (filterValue.length === 0) {
+    return true;
   }
 
-  return rows.filter((row) => {
-    const value = row.values[columnIds[0]];
-    return filterValue.includes(value);
-  });
+  const value = getValue(columnId) as string;
+
+  return filterValue.includes(value);
 }
diff --git a/app/react/components/datatables/select-column.tsx b/app/react/components/datatables/select-column.tsx
new file mode 100644
index 000000000..a036736c6
--- /dev/null
+++ b/app/react/components/datatables/select-column.tsx
@@ -0,0 +1,67 @@
+import { ColumnDef, Row } from '@tanstack/react-table';
+
+import { Checkbox } from '@@/form-components/Checkbox';
+
+export function createSelectColumn<T>(): ColumnDef<T> {
+  let lastSelectedId = '';
+
+  return {
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        id="select-all"
+        checked={table.getIsAllRowsSelected()}
+        indeterminate={table.getIsSomeRowsSelected()}
+        onChange={table.getToggleAllRowsSelectedHandler()}
+      />
+    ),
+    cell: ({ row, table }) => (
+      <Checkbox
+        id={`select-row-${row.id}`}
+        checked={row.getIsSelected()}
+        indeterminate={row.getIsSomeSelected()}
+        onChange={row.getToggleSelectedHandler()}
+        onClick={(e) => {
+          if (e.shiftKey) {
+            const { rows, rowsById } = table.getRowModel();
+            const rowsToToggle = getRowRange(rows, row.id, lastSelectedId);
+            const isLastSelected = rowsById[lastSelectedId].getIsSelected();
+            rowsToToggle.forEach((row) => row.toggleSelected(isLastSelected));
+          }
+
+          lastSelectedId = row.id;
+        }}
+      />
+    ),
+    meta: {
+      width: 50,
+    },
+  };
+}
+
+function getRowRange<T>(rows: Array<Row<T>>, idA: string, idB: string) {
+  const range: Array<Row<T>> = [];
+  let foundStart = false;
+  let foundEnd = false;
+  for (let index = 0; index < rows.length; index += 1) {
+    const row = rows[index];
+    if (row.id === idA || row.id === idB) {
+      if (foundStart) {
+        foundEnd = true;
+      }
+      if (!foundStart) {
+        foundStart = true;
+      }
+    }
+
+    if (foundStart) {
+      range.push(row);
+    }
+
+    if (foundEnd) {
+      break;
+    }
+  }
+
+  return range;
+}
diff --git a/app/react/components/datatables/useGoToHighlightedRow.ts b/app/react/components/datatables/useGoToHighlightedRow.ts
index 81ce3776a..0c582866d 100644
--- a/app/react/components/datatables/useGoToHighlightedRow.ts
+++ b/app/react/components/datatables/useGoToHighlightedRow.ts
@@ -13,7 +13,7 @@ export function useGoToHighlightedRow<T extends { id: string }>(
     handlePageChangeRef.current = goToPage;
   });
 
-  const highlightedItemIdRef = useRef(highlightedItemId);
+  const highlightedItemIdRef = useRef<string>();
 
   useEffect(() => {
     if (
diff --git a/app/react/components/datatables/useRowSelect.ts b/app/react/components/datatables/useRowSelect.ts
deleted file mode 100644
index c5c19c8b8..000000000
--- a/app/react/components/datatables/useRowSelect.ts
+++ /dev/null
@@ -1,481 +0,0 @@
-/* eslint no-param-reassign: ["error", { "props": false }] */
-import { ChangeEvent, useCallback, useMemo } from 'react';
-import {
-  actions,
-  makePropGetter,
-  ensurePluginOrder,
-  useGetLatest,
-  useMountedLayoutEffect,
-  Hooks,
-  TableInstance,
-  TableState,
-  ActionType,
-  ReducerTableState,
-  IdType,
-  Row,
-  PropGetter,
-  TableToggleRowsSelectedProps,
-  TableToggleAllRowsSelectedProps,
-} from 'react-table';
-
-type DefaultType = Record<string, unknown>;
-
-interface UseRowSelectTableInstance<D extends DefaultType = DefaultType>
-  extends TableInstance<D> {
-  isAllRowSelected: boolean;
-  selectSubRows: boolean;
-  getSubRows(row: Row<D>): Row<D>[];
-  isRowSelectable?(row: Row<D>): boolean;
-}
-
-const pluginName = 'useRowSelect';
-
-// Actions
-actions.resetSelectedRows = 'resetSelectedRows';
-actions.toggleAllRowsSelected = 'toggleAllRowsSelected';
-actions.toggleRowSelected = 'toggleRowSelected';
-actions.toggleAllPageRowsSelected = 'toggleAllPageRowsSelected';
-
-export function useRowSelect<D extends DefaultType>(hooks: Hooks<D>) {
-  hooks.getToggleRowSelectedProps = [
-    defaultGetToggleRowSelectedProps as PropGetter<
-      D,
-      TableToggleRowsSelectedProps
-    >,
-  ];
-  hooks.getToggleAllRowsSelectedProps = [
-    defaultGetToggleAllRowsSelectedProps as PropGetter<
-      D,
-      TableToggleAllRowsSelectedProps
-    >,
-  ];
-  hooks.getToggleAllPageRowsSelectedProps = [
-    defaultGetToggleAllPageRowsSelectedProps as PropGetter<
-      D,
-      TableToggleAllRowsSelectedProps
-    >,
-  ];
-  hooks.stateReducers.push(
-    reducer as (
-      newState: TableState<D>,
-      action: ActionType,
-      previousState?: TableState<D>,
-      instance?: TableInstance<D>
-    ) => ReducerTableState<D> | undefined
-  );
-  hooks.useInstance.push(useInstance as (instance: TableInstance<D>) => void);
-  hooks.prepareRow.push(prepareRow);
-}
-
-useRowSelect.pluginName = pluginName;
-
-function defaultGetToggleRowSelectedProps<D extends DefaultType>(
-  props: D,
-  { instance, row }: { instance: UseRowSelectTableInstance<D>; row: Row<D> }
-) {
-  const {
-    manualRowSelectedKey = 'isSelected',
-    isRowSelectable = defaultIsRowSelectable,
-  } = instance;
-  let checked = false;
-
-  if (row.original && row.original[manualRowSelectedKey]) {
-    checked = true;
-  } else {
-    checked = row.isSelected;
-  }
-
-  return [
-    props,
-    {
-      onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        row.toggleRowSelected(e.target.checked);
-      },
-      style: {
-        cursor: 'pointer',
-      },
-      checked,
-      title: 'Toggle Row Selected',
-      indeterminate: row.isSomeSelected,
-      disabled: !isRowSelectable(row),
-    },
-  ];
-}
-
-function defaultGetToggleAllRowsSelectedProps<D extends DefaultType>(
-  props: D,
-  { instance }: { instance: UseRowSelectTableInstance<D> }
-) {
-  return [
-    props,
-    {
-      onChange: (e: ChangeEvent<HTMLInputElement>) => {
-        instance.toggleAllRowsSelected(e.target.checked);
-      },
-      style: {
-        cursor: 'pointer',
-      },
-      checked: instance.isAllRowsSelected,
-      title: 'Toggle All Rows Selected',
-      indeterminate: Boolean(
-        !instance.isAllRowsSelected &&
-          Object.keys(instance.state.selectedRowIds).length
-      ),
-    },
-  ];
-}
-
-function defaultGetToggleAllPageRowsSelectedProps<D extends DefaultType>(
-  props: D,
-  { instance }: { instance: UseRowSelectTableInstance<D> }
-) {
-  return [
-    props,
-    {
-      onChange(e: ChangeEvent<HTMLInputElement>) {
-        instance.toggleAllPageRowsSelected(e.target.checked);
-      },
-      style: {
-        cursor: 'pointer',
-      },
-      checked: instance.isAllPageRowsSelected,
-      title: 'Toggle All Current Page Rows Selected',
-      indeterminate: Boolean(
-        !instance.isAllPageRowsSelected &&
-          instance.page.some(({ id }) => instance.state.selectedRowIds[id])
-      ),
-    },
-  ];
-}
-
-function reducer<D extends Record<string, unknown>>(
-  state: TableState<D>,
-  action: ActionType,
-  _previousState?: TableState<D>,
-  instance?: UseRowSelectTableInstance<D>
-) {
-  if (action.type === actions.init) {
-    return {
-      ...state,
-      selectedRowIds: <Record<IdType<D>, boolean>>{},
-    };
-  }
-
-  if (action.type === actions.resetSelectedRows) {
-    return {
-      ...state,
-      selectedRowIds: instance?.initialState.selectedRowIds || {},
-    };
-  }
-
-  if (action.type === actions.toggleAllRowsSelected) {
-    const { value: setSelected } = action;
-
-    if (!instance) {
-      return state;
-    }
-
-    const {
-      isAllRowsSelected,
-      rowsById,
-      nonGroupedRowsById = rowsById,
-      isRowSelectable = defaultIsRowSelectable,
-    } = instance;
-
-    const selectAll =
-      typeof setSelected !== 'undefined' ? setSelected : !isAllRowsSelected;
-
-    // Only remove/add the rows that are visible on the screen
-    //  Leave all the other rows that are selected alone.
-    const selectedRowIds = { ...state.selectedRowIds };
-
-    Object.keys(nonGroupedRowsById).forEach((rowId: IdType<D>) => {
-      if (selectAll) {
-        const row = rowsById[rowId];
-        if (isRowSelectable(row)) {
-          selectedRowIds[rowId] = true;
-        }
-      } else {
-        delete selectedRowIds[rowId];
-      }
-    });
-
-    return {
-      ...state,
-      selectedRowIds,
-    };
-  }
-
-  if (action.type === actions.toggleRowSelected) {
-    if (!instance) {
-      return state;
-    }
-
-    const { id, value: setSelected } = action;
-    const {
-      rowsById,
-      selectSubRows = true,
-      getSubRows,
-      isRowSelectable = defaultIsRowSelectable,
-    } = instance;
-
-    const isSelected = state.selectedRowIds[id];
-    const shouldExist =
-      typeof setSelected !== 'undefined' ? setSelected : !isSelected;
-
-    if (isSelected === shouldExist) {
-      return state;
-    }
-
-    const newSelectedRowIds = { ...state.selectedRowIds };
-
-    // eslint-disable-next-line no-inner-declarations
-    function handleRowById(id: IdType<D>) {
-      const row = rowsById[id];
-
-      if (!isRowSelectable(row)) {
-        return;
-      }
-
-      if (!row.isGrouped) {
-        if (shouldExist) {
-          newSelectedRowIds[id] = true;
-        } else {
-          delete newSelectedRowIds[id];
-        }
-      }
-
-      if (selectSubRows && getSubRows(row)) {
-        getSubRows(row).forEach((row) => handleRowById(row.id));
-      }
-    }
-
-    handleRowById(id);
-
-    return {
-      ...state,
-      selectedRowIds: newSelectedRowIds,
-    };
-  }
-
-  if (action.type === actions.toggleAllPageRowsSelected) {
-    if (!instance) {
-      return state;
-    }
-
-    const { value: setSelected } = action;
-    const {
-      page,
-      rowsById,
-      selectSubRows = true,
-      isAllPageRowsSelected,
-      getSubRows,
-    } = instance;
-
-    const selectAll =
-      typeof setSelected !== 'undefined' ? setSelected : !isAllPageRowsSelected;
-
-    const newSelectedRowIds = { ...state.selectedRowIds };
-
-    // eslint-disable-next-line no-inner-declarations
-    function handleRowById(id: IdType<D>) {
-      const row = rowsById[id];
-
-      if (!row.isGrouped) {
-        if (selectAll) {
-          newSelectedRowIds[id] = true;
-        } else {
-          delete newSelectedRowIds[id];
-        }
-      }
-
-      if (selectSubRows && getSubRows(row)) {
-        getSubRows(row).forEach((row) => handleRowById(row.id));
-      }
-    }
-
-    page.forEach((row) => handleRowById(row.id));
-
-    return {
-      ...state,
-      selectedRowIds: newSelectedRowIds,
-    };
-  }
-  return state;
-}
-
-function useInstance<D extends Record<string, unknown>>(
-  instance: UseRowSelectTableInstance<D>
-) {
-  const {
-    data,
-    rows,
-    getHooks,
-    plugins,
-    rowsById,
-    nonGroupedRowsById = rowsById,
-    autoResetSelectedRows = true,
-    state: { selectedRowIds },
-    selectSubRows = true,
-    dispatch,
-    page,
-    getSubRows,
-    isRowSelectable = defaultIsRowSelectable,
-  } = instance;
-
-  ensurePluginOrder(
-    plugins,
-    ['useFilters', 'useGroupBy', 'useSortBy', 'useExpanded', 'usePagination'],
-    'useRowSelect'
-  );
-
-  const selectedFlatRows = useMemo(() => {
-    const selectedFlatRows = <Array<Row<D>>>[];
-
-    rows.forEach((row) => {
-      const isSelected = selectSubRows
-        ? getRowIsSelected(row, selectedRowIds, getSubRows)
-        : !!selectedRowIds[row.id];
-      row.isSelected = !!isSelected;
-      row.isSomeSelected = isSelected === null;
-
-      if (isSelected) {
-        selectedFlatRows.push(row);
-      }
-    });
-
-    return selectedFlatRows;
-  }, [rows, selectSubRows, selectedRowIds, getSubRows]);
-
-  let isAllRowsSelected = Boolean(
-    Object.keys(nonGroupedRowsById).length && Object.keys(selectedRowIds).length
-  );
-
-  let isAllPageRowsSelected = isAllRowsSelected;
-
-  if (isAllRowsSelected) {
-    if (
-      Object.keys(nonGroupedRowsById).some((id) => {
-        const row = rowsById[id];
-
-        return !selectedRowIds[id] && isRowSelectable(row);
-      })
-    ) {
-      isAllRowsSelected = false;
-    }
-  }
-
-  if (!isAllRowsSelected) {
-    if (
-      page &&
-      page.length &&
-      page.some(({ id }) => {
-        const row = rowsById[id];
-
-        return !selectedRowIds[id] && isRowSelectable(row);
-      })
-    ) {
-      isAllPageRowsSelected = false;
-    }
-  }
-
-  const getAutoResetSelectedRows = useGetLatest(autoResetSelectedRows);
-
-  useMountedLayoutEffect(() => {
-    if (getAutoResetSelectedRows()) {
-      dispatch({ type: actions.resetSelectedRows });
-    }
-  }, [dispatch, data]);
-
-  const toggleAllRowsSelected = useCallback(
-    (value) => dispatch({ type: actions.toggleAllRowsSelected, value }),
-    [dispatch]
-  );
-
-  const toggleAllPageRowsSelected = useCallback(
-    (value) => dispatch({ type: actions.toggleAllPageRowsSelected, value }),
-    [dispatch]
-  );
-
-  const toggleRowSelected = useCallback(
-    (id, value) => dispatch({ type: actions.toggleRowSelected, id, value }),
-    [dispatch]
-  );
-
-  const getInstance = useGetLatest(instance);
-
-  const getToggleAllRowsSelectedProps = makePropGetter(
-    getHooks().getToggleAllRowsSelectedProps,
-    { instance: getInstance() }
-  );
-
-  const getToggleAllPageRowsSelectedProps = makePropGetter(
-    getHooks().getToggleAllPageRowsSelectedProps,
-    { instance: getInstance() }
-  );
-
-  Object.assign(instance, {
-    selectedFlatRows,
-    isAllRowsSelected,
-    isAllPageRowsSelected,
-    toggleRowSelected,
-    toggleAllRowsSelected,
-    getToggleAllRowsSelectedProps,
-    getToggleAllPageRowsSelectedProps,
-    toggleAllPageRowsSelected,
-  });
-}
-
-function prepareRow<D extends Record<string, unknown>>(
-  row: Row<D>,
-  { instance }: { instance: TableInstance<D> }
-) {
-  row.toggleRowSelected = (set) => instance.toggleRowSelected(row.id, set);
-
-  row.getToggleRowSelectedProps = makePropGetter(
-    instance.getHooks().getToggleRowSelectedProps,
-    { instance, row }
-  );
-}
-
-function getRowIsSelected<D extends Record<string, unknown>>(
-  row: Row<D>,
-  selectedRowIds: Record<IdType<D>, boolean>,
-  getSubRows: (row: Row<D>) => Array<Row<D>>
-) {
-  if (selectedRowIds[row.id]) {
-    return true;
-  }
-
-  const subRows = getSubRows(row);
-
-  if (subRows && subRows.length) {
-    let allChildrenSelected = true;
-    let someSelected = false;
-
-    subRows.forEach((subRow) => {
-      // Bail out early if we know both of these
-      if (someSelected && !allChildrenSelected) {
-        return;
-      }
-
-      if (getRowIsSelected(subRow, selectedRowIds, getSubRows)) {
-        someSelected = true;
-      } else {
-        allChildrenSelected = false;
-      }
-    });
-
-    if (allChildrenSelected) {
-      return true;
-    }
-
-    return someSelected ? null : false;
-  }
-
-  return false;
-}
-
-function defaultIsRowSelectable<D extends DefaultType>(row: Row<D>) {
-  return !row.original.disabled;
-}
diff --git a/app/react/components/datatables/useTableState.ts b/app/react/components/datatables/useTableState.ts
new file mode 100644
index 000000000..ffa903280
--- /dev/null
+++ b/app/react/components/datatables/useTableState.ts
@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { useStore } from 'zustand';
+
+import { useSearchBarState } from './SearchBar';
+import { BasicTableSettings, createPersistedStore } from './types';
+
+/** this class is just a dummy class to get return type of createPersistedStore
+ * can be fixed after upgrade to ts 4.7+
+ * https://stackoverflow.com/a/64919133
+ */
+class Wrapper<T extends BasicTableSettings> {
+  // eslint-disable-next-line class-methods-use-this
+  wrapped() {
+    return createPersistedStore<T>('', '');
+  }
+}
+
+export function useTableState<
+  TSettings extends BasicTableSettings = BasicTableSettings
+>(store: ReturnType<Wrapper<TSettings>['wrapped']>, storageKey: string) {
+  const settings = useStore(store);
+
+  const [search, setSearch] = useSearchBarState(storageKey);
+
+  return useMemo(
+    () => ({ ...settings, setSearch, search }),
+    [settings, search, setSearch]
+  );
+}
diff --git a/app/react/docker/components/datatable-helpers/createOwnershipColumn.tsx b/app/react/docker/components/datatable-helpers/createOwnershipColumn.tsx
new file mode 100644
index 000000000..811fcd201
--- /dev/null
+++ b/app/react/docker/components/datatable-helpers/createOwnershipColumn.tsx
@@ -0,0 +1,38 @@
+import { CellContext, ColumnDef } from '@tanstack/react-table';
+
+import { ownershipIcon } from '@/portainer/filters/filters';
+import { ResourceControlOwnership } from '@/react/portainer/access-control/types';
+
+import { Icon } from '@@/Icon';
+
+export interface IResource {
+  ResourceControl?: {
+    Ownership: ResourceControlOwnership;
+  };
+}
+
+export function createOwnershipColumn<D extends IResource>(): ColumnDef<
+  D,
+  ResourceControlOwnership
+> {
+  return {
+    accessorFn: (row) =>
+      row.ResourceControl?.Ownership || ResourceControlOwnership.ADMINISTRATORS,
+    header: 'Ownership',
+    id: 'ownership',
+    cell: OwnershipCell,
+  };
+
+  function OwnershipCell({
+    getValue,
+  }: CellContext<D, ResourceControlOwnership>) {
+    const value = getValue();
+
+    return (
+      <span className="flex items-center gap-2">
+        <Icon icon={ownershipIcon(value)} className="space-right" />
+        {value}
+      </span>
+    );
+  }
+}
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
index aeec6adaa..5fdf7cdad 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/ContainersDatatable.tsx
@@ -1,19 +1,17 @@
-import _ from 'lodash';
-import { useStore } from 'zustand';
 import { Box } from 'lucide-react';
 
 import { Environment } from '@/react/portainer/environments/types';
 import type { DockerContainer } from '@/react/docker/containers/types';
 import { useShowGPUsColumn } from '@/react/docker/containers/utils';
 
-import { TableSettingsMenu, Datatable } from '@@/datatables';
+import { Table, Datatable } from '@@/datatables';
 import {
   buildAction,
   QuickActionsSettings,
 } from '@@/datatables/QuickActionsSettings';
 import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { TableSettingsProvider } from '@@/datatables/useTableSettings';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { useContainers } from '../../queries/containers';
 
@@ -43,20 +41,15 @@ export function ContainersDatatable({
   isHostColumnVisible,
   environment,
 }: Props) {
-  const settings = useStore(settingsStore);
   const isGPUsColumnVisible = useShowGPUsColumn(environment.Id);
   const columns = useColumns(isHostColumnVisible, isGPUsColumnVisible);
-  const hidableColumns = _.compact(
-    columns.filter((col) => col.canHide).map((col) => col.id)
-  );
-
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   const containersQuery = useContainers(
     environment.Id,
     true,
     undefined,
-    settings.autoRefreshRate * 1000
+    tableState.autoRefreshRate * 1000
   );
 
   return (
@@ -65,12 +58,7 @@ export function ContainersDatatable({
         <Datatable
           titleIcon={Box}
           title="Containers"
-          initialPageSize={settings.pageSize}
-          onPageSizeChange={settings.setPageSize}
-          initialSortBy={settings.sortBy}
-          onSortByChange={settings.setSortBy}
-          searchValue={search}
-          onSearchChange={setSearch}
+          settingsManager={tableState}
           columns={columns}
           renderTableActions={(selectedRows) => (
             <ContainersDatatableActions
@@ -81,30 +69,38 @@ export function ContainersDatatable({
           )}
           isLoading={containersQuery.isLoading}
           isRowSelectable={(row) => !row.original.IsPortainer}
-          initialTableState={{ hiddenColumns: settings.hiddenColumns }}
+          initialTableState={{
+            columnVisibility: Object.fromEntries(
+              tableState.hiddenColumns.map((col) => [col, false])
+            ),
+          }}
           renderTableSettings={(tableInstance) => {
-            const columnsToHide = tableInstance.allColumns.filter(
-              (colInstance) => hidableColumns?.includes(colInstance.id)
-            );
+            const columnsToHide = tableInstance
+              .getAllColumns()
+              .filter((col) => col.getCanHide());
 
             return (
               <>
                 <ColumnVisibilityMenu<DockerContainer>
                   columns={columnsToHide}
                   onChange={(hiddenColumns) => {
-                    settings.setHiddenColumns(hiddenColumns);
-                    tableInstance.setHiddenColumns(hiddenColumns);
+                    tableState.setHiddenColumns(hiddenColumns);
+                    tableInstance.setColumnVisibility(
+                      Object.fromEntries(
+                        hiddenColumns.map((col) => [col, false])
+                      )
+                    );
                   }}
-                  value={settings.hiddenColumns}
+                  value={tableState.hiddenColumns}
                 />
-                <TableSettingsMenu
+                <Table.SettingsMenu
                   quickActions={<QuickActionsSettings actions={actions} />}
                 >
                   <ContainersDatatableSettings
                     isRefreshVisible
-                    settings={settings}
+                    settings={tableState}
                   />
-                </TableSettingsMenu>
+                </Table.SettingsMenu>
               </>
             );
           }}
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/created.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/created.tsx
index efe6a75d1..b226f5404 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/created.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/created.tsx
@@ -1,14 +1,9 @@
-import { Column } from 'react-table';
-
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
-import type { DockerContainer } from '@/react/docker/containers/types';
 
-export const created: Column<DockerContainer> = {
-  Header: 'Created',
-  accessor: 'Created',
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor('Created', {
+  header: 'Created',
   id: 'created',
-  Cell: ({ value }) => isoDateFromTimestamp(value),
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+  cell: ({ getValue }) => isoDateFromTimestamp(getValue()),
+});
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/gpus.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/gpus.tsx
index f03172541..c77bc41a0 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/gpus.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/gpus.tsx
@@ -1,21 +1,20 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useContainerGpus } from '@/react/docker/containers/queries/gpus';
 
-export const gpus: Column<DockerContainer> = {
-  Header: 'GPUs',
+import { columnHelper } from './helper';
+
+export const gpus = columnHelper.display({
+  header: 'GPUs',
   id: 'gpus',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-  Cell: GpusCell,
-};
+  cell: GpusCell,
+});
 
 function GpusCell({
   row: { original: container },
-}: CellProps<DockerContainer>) {
+}: CellContext<DockerContainer, unknown>) {
   const containerId = container.Id;
   const environmentId = useEnvironmentId();
   const gpusQuery = useContainerGpus(environmentId, containerId);
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/helper.ts b/app/react/docker/containers/ListView/ContainersDatatable/columns/helper.ts
new file mode 100644
index 000000000..710a06852
--- /dev/null
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { DockerContainer } from '../../../types';
+
+export const columnHelper = createColumnHelper<DockerContainer>();
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/host.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/host.tsx
index 1baa034eb..c47c633eb 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/host.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/host.tsx
@@ -1,13 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
-
-export const host: Column<DockerContainer> = {
-  Header: 'Host',
-  accessor: (row) => row.NodeName || '-',
+export const host = columnHelper.accessor((row) => row.NodeName || '-', {
+  header: 'Host',
   id: 'host',
-  disableFilters: true,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
+});
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx
index 95aa0db33..98c6d26ab 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/image.tsx
@@ -1,24 +1,18 @@
-import { Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 import { useSref } from '@uirouter/react';
 
 import type { DockerContainer } from '@/react/docker/containers/types';
 
-export const image: Column<DockerContainer> = {
-  Header: 'Image',
-  accessor: 'Image',
+import { columnHelper } from './helper';
+
+export const image = columnHelper.accessor('Image', {
+  header: 'Image',
   id: 'image',
-  disableFilters: true,
-  Cell: ImageCell,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
+  cell: ImageCell,
+});
 
-interface Props {
-  value: string;
-}
-
-function ImageCell({ value: imageName }: Props) {
+function ImageCell({ getValue }: CellContext<DockerContainer, string>) {
+  const imageName = getValue();
   const linkProps = useSref('docker.images.image', { id: imageName });
   const shortImageName = trimSHASum(imageName);
 
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/index.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/index.tsx
index d1a0ba854..45e4e730a 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/index.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/index.tsx
@@ -1,12 +1,14 @@
 import _ from 'lodash';
 import { useMemo } from 'react';
 
+import { createOwnershipColumn } from '@/react/docker/components/datatable-helpers/createOwnershipColumn';
+import { DockerContainer } from '@/react/docker/containers/types';
+
 import { created } from './created';
 import { host } from './host';
 import { image } from './image';
 import { ip } from './ip';
 import { name } from './name';
-import { ownership } from './ownership';
 import { ports } from './ports';
 import { quickActions } from './quick-actions';
 import { stack } from './stack';
@@ -15,7 +17,7 @@ import { gpus } from './gpus';
 
 export function useColumns(
   isHostColumnVisible: boolean,
-  isGPUsColumnVisible?: boolean
+  isGPUsColumnVisible: boolean | undefined
 ) {
   return useMemo(
     () =>
@@ -30,7 +32,7 @@ export function useColumns(
         isHostColumnVisible && host,
         isGPUsColumnVisible && gpus,
         ports,
-        ownership,
+        createOwnershipColumn<DockerContainer>(),
       ]),
     [isHostColumnVisible, isGPUsColumnVisible]
   );
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/ip.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/ip.tsx
index 93bbb9ec5..728bd4430 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/ip.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/ip.tsx
@@ -1,12 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
-
-export const ip: Column<DockerContainer> = {
-  Header: 'IP Address',
-  accessor: (row) => row.IP || '-',
+export const ip = columnHelper.accessor((row) => row.IP || '-', {
+  header: 'IP Address',
   id: 'ip',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+});
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx
index 0b6a373a2..f0ff50bba 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/name.tsx
@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 import _ from 'lodash';
 import { useSref } from '@uirouter/react';
 
@@ -8,21 +8,20 @@ import { useTableSettings } from '@@/datatables/useTableSettings';
 
 import { TableSettings } from '../types';
 
-export const name: Column<DockerContainer> = {
-  Header: 'Name',
-  accessor: (row) => row.Names[0],
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor((row) => row.Names[0], {
+  header: 'Name',
   id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: true,
-  sortType: 'string',
-};
+  cell: NameCell,
+});
 
 export function NameCell({
-  value: name,
+  getValue,
   row: { original: container },
-}: CellProps<DockerContainer>) {
+}: CellContext<DockerContainer, string>) {
+  const name = getValue();
+
   const linkProps = useSref('.container', {
     id: container.Id,
     nodeName: container.NodeName,
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/ownership.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/ownership.tsx
deleted file mode 100644
index 92ba27688..000000000
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/ownership.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Column } from 'react-table';
-import clsx from 'clsx';
-
-import { ownershipIcon } from '@/portainer/filters/filters';
-import type { DockerContainer } from '@/react/docker/containers/types';
-import { ResourceControlOwnership } from '@/react/portainer/access-control/types';
-
-export const ownership: Column<DockerContainer> = {
-  Header: 'Ownership',
-  id: 'ownership',
-  accessor: (row) =>
-    row.ResourceControl?.Ownership || ResourceControlOwnership.ADMINISTRATORS,
-  Cell: OwnershipCell,
-  disableFilters: true,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
-
-interface Props {
-  value: 'public' | 'private' | 'restricted' | 'administrators';
-}
-
-function OwnershipCell({ value }: Props) {
-  return (
-    <>
-      <i
-        className={clsx(ownershipIcon(value), 'space-right')}
-        aria-hidden="true"
-      />
-      {value || ResourceControlOwnership.ADMINISTRATORS}
-    </>
-  );
-}
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx
index 117686721..71f7b21a3 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/ports.tsx
@@ -1,6 +1,6 @@
-import { Column } from 'react-table';
 import _ from 'lodash';
 import { ExternalLink } from 'lucide-react';
+import { CellContext } from '@tanstack/react-table';
 
 import type { DockerContainer, Port } from '@/react/docker/containers/types';
 
@@ -8,22 +8,17 @@ import { Icon } from '@@/Icon';
 
 import { useRowContext } from '../RowContext';
 
-export const ports: Column<DockerContainer> = {
-  Header: 'Published Ports',
-  accessor: 'Ports',
+import { columnHelper } from './helper';
+
+export const ports = columnHelper.accessor('Ports', {
+  header: 'Published Ports',
   id: 'ports',
-  Cell: PortsCell,
-  disableSortBy: true,
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+  cell: PortsCell,
+});
 
-interface Props {
-  value: Port[];
-}
+function PortsCell({ getValue }: CellContext<DockerContainer, Port[]>) {
+  const ports = getValue();
 
-function PortsCell({ value: ports }: Props) {
   const { environment } = useRowContext();
 
   if (ports.length === 0) {
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/quick-actions.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/quick-actions.tsx
index 47bdb9f60..795d9c1ea 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/quick-actions.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/quick-actions.tsx
@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { useAuthorizations } from '@/react/hooks/useUser';
 import { ContainerQuickActions } from '@/react/docker/containers/components/ContainerQuickActions';
@@ -8,20 +8,17 @@ import { useTableSettings } from '@@/datatables/useTableSettings';
 
 import { TableSettings } from '../types';
 
-export const quickActions: Column<DockerContainer> = {
-  Header: 'Quick Actions',
+import { columnHelper } from './helper';
+
+export const quickActions = columnHelper.display({
+  header: 'Quick Actions',
   id: 'actions',
-  Cell: QuickActionsCell,
-  disableFilters: true,
-  disableSortBy: true,
-  canHide: true,
-  sortType: 'string',
-  Filter: () => null,
-};
+  cell: QuickActionsCell,
+});
 
 function QuickActionsCell({
   row: { original: container },
-}: CellProps<DockerContainer>) {
+}: CellContext<DockerContainer, unknown>) {
   const settings = useTableSettings<TableSettings>();
 
   const { hiddenQuickActions = [] } = settings;
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/stack.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/stack.tsx
index b4e1b5238..bd327e548 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/stack.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/stack.tsx
@@ -1,13 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import type { DockerContainer } from '@/react/docker/containers/types';
-
-export const stack: Column<DockerContainer> = {
-  Header: 'Stack',
-  accessor: (row) => row.StackName || '-',
+export const stack = columnHelper.accessor((row) => row.StackName || '-', {
+  header: 'Stack',
   id: 'stack',
-  sortType: 'string',
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+});
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/columns/state.tsx b/app/react/docker/containers/ListView/ContainersDatatable/columns/state.tsx
index 07a9ba059..c2de8dbd5 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/columns/state.tsx
+++ b/app/react/docker/containers/ListView/ContainersDatatable/columns/state.tsx
@@ -1,27 +1,32 @@
-import { CellProps, Column } from 'react-table';
 import clsx from 'clsx';
+import { CellContext } from '@tanstack/react-table';
 
 import {
   type DockerContainer,
   ContainerStatus,
 } from '@/react/docker/containers/types';
 
-import { DefaultFilter } from '@@/datatables/Filter';
+import { filterHOC } from '@@/datatables/Filter';
+import { multiple } from '@@/datatables/filter-types';
 
-export const state: Column<DockerContainer> = {
-  Header: 'State',
-  accessor: 'Status',
+import { columnHelper } from './helper';
+
+export const state = columnHelper.accessor('Status', {
+  header: 'State',
   id: 'state',
-  Cell: StatusCell,
-  sortType: 'string',
-  filter: 'multiple',
-  Filter: DefaultFilter,
-  canHide: true,
-};
+  cell: StatusCell,
+  enableColumnFilter: true,
+  filterFn: multiple,
+  meta: {
+    filter: filterHOC('Filter by state'),
+  },
+});
 
 function StatusCell({
-  value: status,
-}: CellProps<DockerContainer, ContainerStatus>) {
+  getValue,
+}: CellContext<DockerContainer, ContainerStatus>) {
+  const status = getValue();
+
   const hasHealthCheck = [
     ContainerStatus.Starting,
     ContainerStatus.Healthy,
diff --git a/app/react/docker/containers/ListView/ContainersDatatable/datatable-store.ts b/app/react/docker/containers/ListView/ContainersDatatable/datatable-store.ts
index 92b133261..1a45ca67e 100644
--- a/app/react/docker/containers/ListView/ContainersDatatable/datatable-store.ts
+++ b/app/react/docker/containers/ListView/ContainersDatatable/datatable-store.ts
@@ -9,7 +9,7 @@ import { QuickAction, TableSettings } from './types';
 export const TRUNCATE_LENGTH = 32;
 
 export function createStore(storageKey: string) {
-  return createPersistedStore<TableSettings>(storageKey, 'Name', (set) => ({
+  return createPersistedStore<TableSettings>(storageKey, 'name', (set) => ({
     ...hiddenColumnsSettings(set),
     ...refreshableSettings(set),
     truncateContainerName: TRUNCATE_LENGTH,
diff --git a/app/react/docker/images/ItemView/DockerfileDetails.tsx b/app/react/docker/images/ItemView/DockerfileDetails.tsx
index 4cd201735..a6df5db54 100644
--- a/app/react/docker/images/ItemView/DockerfileDetails.tsx
+++ b/app/react/docker/images/ItemView/DockerfileDetails.tsx
@@ -7,7 +7,7 @@ import { TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';
 
 interface DockerImage {
-  Command: Array<string>;
+  Command: null | Array<string>;
   Entrypoint: Array<string>;
   ExposedPorts: Array<number>;
   Volumes: Array<string>;
@@ -24,7 +24,7 @@ export function DockerfileDetails({ image }: Props) {
       <TableTitle label="Dockerfile details" icon={List} />
       <DetailsTable>
         <DetailsTable.Row label="CMD">
-          <code>{joinCommand(image.Command)}</code>
+          <code>{image.Command ? joinCommand(image.Command) : '-'}</code>
         </DetailsTable.Row>
 
         {image.Entrypoint && (
diff --git a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx
index 652a33c1e..481acf43d 100644
--- a/app/react/docker/networks/ItemView/NetworkContainersTable.tsx
+++ b/app/react/docker/networks/ItemView/NetworkContainersTable.tsx
@@ -4,7 +4,7 @@ import { Authorized } from '@/react/hooks/useUser';
 import { EnvironmentId } from '@/react/portainer/environments/types';
 import { Icon } from '@/react/components/Icon';
 
-import { Table, TableContainer, TableTitle } from '@@/datatables';
+import { TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
@@ -42,53 +42,51 @@ export function NetworkContainersTable({
   return (
     <TableContainer>
       <TableTitle label="Containers in network" icon={Server} />
-      <Table className="nopadding">
-        <DetailsTable
-          headers={tableHeaders}
-          dataCy="networkDetails-networkContainers"
-        >
-          {networkContainers.map((container) => (
-            <tr key={container.Id}>
-              <td>
-                <Link
-                  to="docker.containers.container"
-                  params={{
-                    id: container.Id,
-                    nodeName,
+      <DetailsTable
+        headers={tableHeaders}
+        dataCy="networkDetails-networkContainers"
+      >
+        {networkContainers.map((container) => (
+          <tr key={container.Id}>
+            <td>
+              <Link
+                to="docker.containers.container"
+                params={{
+                  id: container.Id,
+                  nodeName,
+                }}
+                title={container.Name}
+              >
+                {container.Name}
+              </Link>
+            </td>
+            <td>{container.IPv4Address || '-'}</td>
+            <td>{container.IPv6Address || '-'}</td>
+            <td>{container.MacAddress || '-'}</td>
+            <td>
+              <Authorized authorizations="DockerNetworkDisconnect">
+                <Button
+                  data-cy={`networkDetails-disconnect${container.Name}`}
+                  size="xsmall"
+                  color="dangerlight"
+                  onClick={() => {
+                    if (container.Id) {
+                      disconnectContainer.mutate({
+                        containerId: container.Id,
+                        environmentId,
+                        networkId,
+                      });
+                    }
                   }}
-                  title={container.Name}
                 >
-                  {container.Name}
-                </Link>
-              </td>
-              <td>{container.IPv4Address || '-'}</td>
-              <td>{container.IPv6Address || '-'}</td>
-              <td>{container.MacAddress || '-'}</td>
-              <td>
-                <Authorized authorizations="DockerNetworkDisconnect">
-                  <Button
-                    data-cy={`networkDetails-disconnect${container.Name}`}
-                    size="xsmall"
-                    color="dangerlight"
-                    onClick={() => {
-                      if (container.Id) {
-                        disconnectContainer.mutate({
-                          containerId: container.Id,
-                          environmentId,
-                          networkId,
-                        });
-                      }
-                    }}
-                  >
-                    <Icon icon={Trash2} class-name="icon-secondary icon-md" />
-                    Leave Network
-                  </Button>
-                </Authorized>
-              </td>
-            </tr>
-          ))}
-        </DetailsTable>
-      </Table>
+                  <Icon icon={Trash2} class-name="icon-secondary icon-md" />
+                  Leave Network
+                </Button>
+              </Authorized>
+            </td>
+          </tr>
+        ))}
+      </DetailsTable>
     </TableContainer>
   );
 }
diff --git a/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx b/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
index 3078d69e5..00503e28c 100644
--- a/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
+++ b/app/react/docker/networks/ItemView/NetworkDetailsTable.tsx
@@ -4,7 +4,7 @@ import { Share2, Trash2 } from 'lucide-react';
 import DockerNetworkHelper from '@/docker/helpers/networkHelper';
 import { Authorized } from '@/react/hooks/useUser';
 
-import { Table, TableContainer, TableTitle } from '@@/datatables';
+import { TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';
 import { Button } from '@@/buttons';
 import { Icon } from '@@/Icon';
@@ -32,76 +32,74 @@ export function NetworkDetailsTable({
   return (
     <TableContainer>
       <TableTitle label="Network details" icon={Share2} />
-      <Table className="nopadding">
-        <DetailsTable dataCy="networkDetails-detailsTable">
-          {/* networkRowContent */}
-          <DetailsTable.Row label="Name">{network.Name}</DetailsTable.Row>
-          <DetailsTable.Row label="Id">
-            {network.Id}
-            {allowRemoveNetwork && (
-              <Authorized authorizations="DockerNetworkDelete">
-                <Button
-                  data-cy="networkDetails-deleteNetwork"
-                  size="xsmall"
-                  color="danger"
-                  onClick={() => onRemoveNetworkClicked()}
-                >
-                  <Icon
-                    icon={Trash2}
-                    className="space-right"
-                    aria-hidden="true"
-                  />
-                  Delete this network
-                </Button>
-              </Authorized>
-            )}
-          </DetailsTable.Row>
-          <DetailsTable.Row label="Driver">{network.Driver}</DetailsTable.Row>
-          <DetailsTable.Row label="Scope">{network.Scope}</DetailsTable.Row>
-          <DetailsTable.Row label="Attachable">
-            {String(network.Attachable)}
-          </DetailsTable.Row>
-          <DetailsTable.Row label="Internal">
-            {String(network.Internal)}
-          </DetailsTable.Row>
+      <DetailsTable dataCy="networkDetails-detailsTable">
+        {/* networkRowContent */}
+        <DetailsTable.Row label="Name">{network.Name}</DetailsTable.Row>
+        <DetailsTable.Row label="Id">
+          {network.Id}
+          {allowRemoveNetwork && (
+            <Authorized authorizations="DockerNetworkDelete">
+              <Button
+                data-cy="networkDetails-deleteNetwork"
+                size="xsmall"
+                color="danger"
+                onClick={() => onRemoveNetworkClicked()}
+              >
+                <Icon
+                  icon={Trash2}
+                  className="space-right"
+                  aria-hidden="true"
+                />
+                Delete this network
+              </Button>
+            </Authorized>
+          )}
+        </DetailsTable.Row>
+        <DetailsTable.Row label="Driver">{network.Driver}</DetailsTable.Row>
+        <DetailsTable.Row label="Scope">{network.Scope}</DetailsTable.Row>
+        <DetailsTable.Row label="Attachable">
+          {String(network.Attachable)}
+        </DetailsTable.Row>
+        <DetailsTable.Row label="Internal">
+          {String(network.Internal)}
+        </DetailsTable.Row>
 
-          {/* IPV4 ConfigRowContent */}
-          {ipv4Configs.map((config) => (
-            <Fragment key={config.Subnet}>
-              <DetailsTable.Row
-                label={`IPV4 Subnet${getConfigDetails(config.Subnet)}`}
-              >
-                {`IPV4 Gateway${getConfigDetails(config.Gateway)}`}
-              </DetailsTable.Row>
-              <DetailsTable.Row
-                label={`IPV4 IP Range${getConfigDetails(config.IPRange)}`}
-              >
-                {`IPV4 Excluded IPs${getAuxiliaryAddresses(
-                  config.AuxiliaryAddresses
-                )}`}
-              </DetailsTable.Row>
-            </Fragment>
-          ))}
+        {/* IPV4 ConfigRowContent */}
+        {ipv4Configs.map((config) => (
+          <Fragment key={config.Subnet}>
+            <DetailsTable.Row
+              label={`IPV4 Subnet${getConfigDetails(config.Subnet)}`}
+            >
+              {`IPV4 Gateway${getConfigDetails(config.Gateway)}`}
+            </DetailsTable.Row>
+            <DetailsTable.Row
+              label={`IPV4 IP Range${getConfigDetails(config.IPRange)}`}
+            >
+              {`IPV4 Excluded IPs${getAuxiliaryAddresses(
+                config.AuxiliaryAddresses
+              )}`}
+            </DetailsTable.Row>
+          </Fragment>
+        ))}
 
-          {/* IPV6 ConfigRowContent */}
-          {ipv6Configs.map((config) => (
-            <Fragment key={config.Subnet}>
-              <DetailsTable.Row
-                label={`IPV6 Subnet${getConfigDetails(config.Subnet)}`}
-              >
-                {`IPV6 Gateway${getConfigDetails(config.Gateway)}`}
-              </DetailsTable.Row>
-              <DetailsTable.Row
-                label={`IPV6 IP Range${getConfigDetails(config.IPRange)}`}
-              >
-                {`IPV6 Excluded IPs${getAuxiliaryAddresses(
-                  config.AuxiliaryAddresses
-                )}`}
-              </DetailsTable.Row>
-            </Fragment>
-          ))}
-        </DetailsTable>
-      </Table>
+        {/* IPV6 ConfigRowContent */}
+        {ipv6Configs.map((config) => (
+          <Fragment key={config.Subnet}>
+            <DetailsTable.Row
+              label={`IPV6 Subnet${getConfigDetails(config.Subnet)}`}
+            >
+              {`IPV6 Gateway${getConfigDetails(config.Gateway)}`}
+            </DetailsTable.Row>
+            <DetailsTable.Row
+              label={`IPV6 IP Range${getConfigDetails(config.IPRange)}`}
+            >
+              {`IPV6 Excluded IPs${getAuxiliaryAddresses(
+                config.AuxiliaryAddresses
+              )}`}
+            </DetailsTable.Row>
+          </Fragment>
+        ))}
+      </DetailsTable>
     </TableContainer>
   );
 
diff --git a/app/react/docker/networks/ItemView/NetworkOptionsTable.tsx b/app/react/docker/networks/ItemView/NetworkOptionsTable.tsx
index 0feafffa6..de4f70a86 100644
--- a/app/react/docker/networks/ItemView/NetworkOptionsTable.tsx
+++ b/app/react/docker/networks/ItemView/NetworkOptionsTable.tsx
@@ -1,6 +1,6 @@
 import { Share2 } from 'lucide-react';
 
-import { Table, TableContainer, TableTitle } from '@@/datatables';
+import { TableContainer, TableTitle } from '@@/datatables';
 import { DetailsTable } from '@@/DetailsTable';
 
 import { NetworkOptions } from '../types';
@@ -19,15 +19,13 @@ export function NetworkOptionsTable({ options }: Props) {
   return (
     <TableContainer>
       <TableTitle label="Network options" icon={Share2} />
-      <Table className="nopadding">
-        <DetailsTable dataCy="networkDetails-networkOptionsTable">
-          {networkEntries.map(([key, value]) => (
-            <DetailsTable.Row key={key} label={key}>
-              {value}
-            </DetailsTable.Row>
-          ))}
-        </DetailsTable>
-      </Table>
+      <DetailsTable dataCy="networkDetails-networkOptionsTable">
+        {networkEntries.map(([key, value]) => (
+          <DetailsTable.Row key={key} label={key}>
+            {value}
+          </DetailsTable.Row>
+        ))}
+      </DetailsTable>
     </TableContainer>
   );
 }
diff --git a/app/react/docker/stacks/ItemView/StackContainersDatatable.tsx b/app/react/docker/stacks/ItemView/StackContainersDatatable.tsx
index 782ebf867..e8ef361f7 100644
--- a/app/react/docker/stacks/ItemView/StackContainersDatatable.tsx
+++ b/app/react/docker/stacks/ItemView/StackContainersDatatable.tsx
@@ -1,5 +1,3 @@
-import _ from 'lodash';
-import { useStore } from 'zustand';
 import { Box } from 'lucide-react';
 
 import { DockerContainer } from '@/react/docker/containers/types';
@@ -10,17 +8,16 @@ import { ContainersDatatableActions } from '@/react/docker/containers/ListView/C
 import { ContainersDatatableSettings } from '@/react/docker/containers/ListView/ContainersDatatable/ContainersDatatableSettings';
 import { useShowGPUsColumn } from '@/react/docker/containers/utils';
 
-import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { Datatable, Table } from '@@/datatables';
 import {
   buildAction,
   QuickActionsSettings,
 } from '@@/datatables/QuickActionsSettings';
 import { ColumnVisibilityMenu } from '@@/datatables/ColumnVisibilityMenu';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { TableSettingsProvider } from '@@/datatables/useTableSettings';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { useContainers } from '../../containers/queries/containers';
-import { RowProvider } from '../../containers/ListView/ContainersDatatable/RowContext';
 
 const storageKey = 'stack-containers';
 const settingsStore = createStore(storageKey);
@@ -39,74 +36,68 @@ export interface Props {
 }
 
 export function StackContainersDatatable({ environment, stackName }: Props) {
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   const isGPUsColumnVisible = useShowGPUsColumn(environment.Id);
   const columns = useColumns(false, isGPUsColumnVisible);
 
-  const hidableColumns = _.compact(
-    columns.filter((col) => col.canHide).map((col) => col.id)
-  );
-
   const containersQuery = useContainers(
     environment.Id,
     true,
     {
       label: [`com.docker.compose.project=${stackName}`],
     },
-    settings.autoRefreshRate * 1000
+    tableState.autoRefreshRate * 1000
   );
 
   return (
-    <RowProvider context={{ environment }}>
-      <TableSettingsProvider settings={settingsStore}>
-        <Datatable
-          title="Containers"
-          titleIcon={Box}
-          initialPageSize={settings.pageSize}
-          onPageSizeChange={settings.setPageSize}
-          initialSortBy={settings.sortBy}
-          onSortByChange={settings.setSortBy}
-          searchValue={search}
-          onSearchChange={setSearch}
-          columns={columns}
-          renderTableActions={(selectedRows) => (
-            <ContainersDatatableActions
-              selectedItems={selectedRows}
-              isAddActionVisible={false}
-              endpointId={environment.Id}
-            />
-          )}
-          initialTableState={{ hiddenColumns: settings.hiddenColumns }}
-          renderTableSettings={(tableInstance) => {
-            const columnsToHide = tableInstance.allColumns.filter(
-              (colInstance) => hidableColumns?.includes(colInstance.id)
-            );
+    <TableSettingsProvider settings={settingsStore}>
+      <Datatable
+        title="Containers"
+        titleIcon={Box}
+        settingsManager={tableState}
+        columns={columns}
+        renderTableActions={(selectedRows) => (
+          <ContainersDatatableActions
+            selectedItems={selectedRows}
+            isAddActionVisible={false}
+            endpointId={environment.Id}
+          />
+        )}
+        initialTableState={{
+          columnVisibility: Object.fromEntries(
+            tableState.hiddenColumns.map((col) => [col, false])
+          ),
+        }}
+        renderTableSettings={(tableInstance) => {
+          const columnsToHide = tableInstance
+            .getAllColumns()
+            .filter((col) => col.getCanHide());
 
-            return (
-              <>
-                <ColumnVisibilityMenu<DockerContainer>
-                  columns={columnsToHide}
-                  onChange={(hiddenColumns) => {
-                    settings.setHiddenColumns(hiddenColumns);
-                    tableInstance.setHiddenColumns(hiddenColumns);
-                  }}
-                  value={settings.hiddenColumns}
-                />
-                <TableSettingsMenu
-                  quickActions={<QuickActionsSettings actions={actions} />}
-                >
-                  <ContainersDatatableSettings settings={settings} />
-                </TableSettingsMenu>
-              </>
-            );
-          }}
-          dataset={containersQuery.data || []}
-          isLoading={containersQuery.isLoading}
-          emptyContentLabel="No containers found"
-        />
-      </TableSettingsProvider>
-    </RowProvider>
+          return (
+            <>
+              <ColumnVisibilityMenu<DockerContainer>
+                columns={columnsToHide}
+                onChange={(hiddenColumns) => {
+                  tableState.setHiddenColumns(hiddenColumns);
+                  tableInstance.setColumnVisibility(
+                    Object.fromEntries(hiddenColumns.map((col) => [col, false]))
+                  );
+                }}
+                value={tableState.hiddenColumns}
+              />
+              <Table.SettingsMenu
+                quickActions={<QuickActionsSettings actions={actions} />}
+              >
+                <ContainersDatatableSettings settings={tableState} />
+              </Table.SettingsMenu>
+            </>
+          );
+        }}
+        dataset={containersQuery.data || []}
+        isLoading={containersQuery.isLoading}
+        emptyContentLabel="No containers found"
+      />
+    </TableSettingsProvider>
   );
 }
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx b/app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx
index 323ee5be0..05e59fe83 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/Datatable.tsx
@@ -1,4 +1,3 @@
-import { useStore } from 'zustand';
 import { Trash2 } from 'lucide-react';
 
 import { Environment } from '@/react/portainer/environments/types';
@@ -9,7 +8,7 @@ import { Datatable as GenericDatatable } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { TextTip } from '@@/Tip/TextTip';
 import { createPersistedStore } from '@@/datatables/types';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { useTableState } from '@@/datatables/useTableState';
 import { confirm } from '@@/modals/confirm';
 import { buildConfirmButton } from '@@/modals/utils';
 import { ModalType } from '@@/modals';
@@ -28,20 +27,14 @@ export function Datatable() {
   const associateMutation = useAssociateDeviceMutation();
   const removeMutation = useDeleteEnvironmentsMutation();
   const licenseOverused = useLicenseOverused();
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
   const { data: environments, totalCount, isLoading } = useEnvironments();
 
   return (
     <GenericDatatable
+      settingsManager={tableState}
       columns={columns}
       dataset={environments}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
       title="Edge Devices Waiting Room"
       emptyContentLabel="No Edge Devices found"
       renderTableActions={(selectedRows) => (
@@ -57,7 +50,7 @@ export function Datatable() {
 
           <Button
             onClick={() => handleAssociateDevice(selectedRows)}
-            disabled={selectedRows.length === 0}
+            disabled={selectedRows.length === 0 || licenseOverused}
           >
             Associate Device
           </Button>
diff --git a/app/react/edge/edge-devices/WaitingRoomView/Datatable/columns.ts b/app/react/edge/edge-devices/WaitingRoomView/Datatable/columns.ts
index f2cf21f4d..953e9248c 100644
--- a/app/react/edge/edge-devices/WaitingRoomView/Datatable/columns.ts
+++ b/app/react/edge/edge-devices/WaitingRoomView/Datatable/columns.ts
@@ -1,76 +1,37 @@
 import moment from 'moment';
-import { CellProps, Column } from 'react-table';
+import { createColumnHelper } from '@tanstack/react-table';
 
 import { WaitingRoomEnvironment } from '../types';
 
-export const columns: readonly Column<WaitingRoomEnvironment>[] = [
-  {
-    Header: 'Name',
-    accessor: (row) => row.Name,
+const columnHelper = createColumnHelper<WaitingRoomEnvironment>();
+
+export const columns = [
+  columnHelper.accessor('Name', {
+    header: 'Name',
     id: 'name',
-    disableFilters: true,
-    Filter: () => null,
-    canHide: false,
-    sortType: 'string',
-  },
-  {
-    Header: 'Edge ID',
-    accessor: (row) => row.EdgeID,
+  }),
+  columnHelper.accessor('EdgeID', {
+    header: 'Edge ID',
     id: 'edge-id',
-    disableFilters: true,
-    Filter: () => null,
-    canHide: false,
-    sortType: 'string',
-  },
-  {
-    Header: 'Edge Groups',
-    accessor: (row) => row.EdgeGroups || [],
-    Cell: ({ value }: CellProps<WaitingRoomEnvironment, string[]>) =>
-      value.join(', ') || '-',
+  }),
+  columnHelper.accessor((row) => row.EdgeGroups.join(', ') || '-', {
+    header: 'Edge Groups',
     id: 'edge-groups',
-    disableFilters: true,
-    Filter: () => null,
-    canHide: false,
-    sortType: 'string',
-  },
-  {
-    Header: 'Group',
-    accessor: (row) => row.Group || '-',
+  }),
+  columnHelper.accessor((row) => row.Group || '-', {
+    header: 'Group',
     id: 'group',
-    disableFilters: true,
-    Filter: () => null,
-    canHide: false,
-    sortType: 'string',
-  },
-  {
-    Header: 'Tags',
-    accessor: (row) => row.Tags || [],
-    Cell: ({ value }: CellProps<WaitingRoomEnvironment, string[]>) =>
-      value.join(', ') || '-',
+  }),
+  columnHelper.accessor((row) => row.Tags.join(', ') || '-', {
+    header: 'Tags',
     id: 'tags',
-    disableFilters: true,
-    Filter: () => null,
-    canHide: false,
-    sortType: 'string',
-  },
-  {
-    Header: 'Last Check-in',
-    accessor: 'LastCheckInDate',
-    Cell: LastCheckinDateCell,
+  }),
+  columnHelper.accessor((row) => row.LastCheckInDate, {
+    header: 'Last Check-in',
     id: 'last-check-in',
-    disableFilters: true,
-    Filter: () => null,
-    canHide: false,
-    sortType: 'string',
-  },
-] as const;
-
-function LastCheckinDateCell({
-  value,
-}: CellProps<WaitingRoomEnvironment, number>) {
-  if (!value) {
-    return '-';
-  }
-
-  return moment(value * 1000).fromNow();
-}
+    cell: ({ getValue }) => {
+      const value = getValue();
+      return value ? moment(value * 1000).fromNow() : '-';
+    },
+  }),
+];
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/ServicesDatatable.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/ServicesDatatable.tsx
index 74dbb09f3..b11cc10de 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/ServicesDatatable.tsx
+++ b/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}
     />
   );
 }
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/externalIPLink.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/ExternalIPLink.tsx
similarity index 100%
rename from app/react/kubernetes/ServicesView/ServicesDatatable/columns/externalIPLink.tsx
rename to app/react/kubernetes/ServicesView/ServicesDatatable/columns/ExternalIPLink.tsx
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/application.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/application.tsx
index 01b7c660c..5c97a6771 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/application.tsx
+++ b/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>
+  ) : (
+    '-'
+  );
+}
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/clusterIP.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/clusterIP.tsx
index e042ade4c..6b84e7d00 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/clusterIP.tsx
+++ b/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> = {
       }
     );
   },
-};
+});
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/created.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/created.tsx
index dad42ff2a..c28627c13 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/created.tsx
+++ b/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,
-};
+});
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/externalIP.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/externalIP.tsx
index feb46128e..84c6e9a93 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/externalIP.tsx
+++ b/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,
-      }
-    );
-  },
-};
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/helper.ts b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/helper.ts
new file mode 100644
index 000000000..e614b54c0
--- /dev/null
+++ b/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>();
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/index.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/index.tsx
index 7c310cd56..e061b3e70 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/index.tsx
+++ b/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,
+];
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/name.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/name.tsx
index 134d3ac47..c06c99e6a 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/name.tsx
+++ b/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,
-};
+});
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/namespace.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/namespace.tsx
index a07aa2d9e..ef8dfa625 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/namespace.tsx
+++ b/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),
+});
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/ports.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/ports.tsx
index 03fbf4de2..d36061ff1 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/ports.tsx
+++ b/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;
-  },
-};
+    },
+  }
+);
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/targetPorts.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/targetPorts.tsx
index f33b63c66..e0d30fa14 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/targetPorts.tsx
+++ b/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,
+        }
+      );
+    },
+  }
+);
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/type.tsx b/app/react/kubernetes/ServicesView/ServicesDatatable/columns/type.tsx
index ff7411eed..819538536 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/columns/type.tsx
+++ b/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),
+});
diff --git a/app/react/kubernetes/ServicesView/ServicesDatatable/datatable-store.ts b/app/react/kubernetes/ServicesView/ServicesDatatable/datatable-store.ts
index 9586395e0..77716b10f 100644
--- a/app/react/kubernetes/ServicesView/ServicesDatatable/datatable-store.ts
+++ b/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),
   }));
diff --git a/app/react/kubernetes/ServicesView/service.ts b/app/react/kubernetes/ServicesView/service.ts
index 20f11d62a..bc07a21d7 100644
--- a/app/react/kubernetes/ServicesView/service.ts
+++ b/app/react/kubernetes/ServicesView/service.ts
@@ -7,6 +7,8 @@ import { EnvironmentId } from '@/react/portainer/environments/types';
 
 import { getNamespaces } from '../namespaces/service';
 
+import { Service } from './types';
+
 export const queryKeys = {
   list: (environmentId: EnvironmentId) =>
     ['environments', environmentId, 'kubernetes', 'services'] as const,
@@ -18,7 +20,7 @@ async function getServices(
   lookupApps: boolean
 ) {
   try {
-    const { data: services } = await axios.get(
+    const { data: services } = await axios.get<Array<Service>>(
       `kubernetes/${environmentId}/namespaces/${namespace}/services`,
       {
         params: {
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
index c3691fe7c..5ff5c6750 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
+++ b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/IngressClassDatatable.tsx
@@ -1,19 +1,18 @@
 import { useEffect, useState } from 'react';
-import { AlertTriangle, Database } from 'lucide-react';
-import { useStore } from 'zustand';
+import { Database, AlertTriangle } from 'lucide-react';
 
 import { confirm } from '@@/modals/confirm';
 import { ModalType } from '@@/modals';
 import { Datatable } from '@@/datatables';
 import { Button, ButtonGroup } from '@@/buttons';
 import { Icon } from '@@/Icon';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { createPersistedStore } from '@@/datatables/types';
 import { buildConfirmButton } from '@@/modals/utils';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { IngressControllerClassMap } from '../types';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 
 const storageKey = 'ingressClasses';
 const settingsStore = createPersistedStore(storageKey);
@@ -39,12 +38,11 @@ export function IngressClassDatatable({
   noIngressControllerLabel,
   view,
 }: Props) {
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
+
   const [ingControllerFormValues, setIngControllerFormValues] = useState(
     ingressControllers || []
   );
-  const columns = useColumns();
 
   useEffect(() => {
     if (allowNoneIngressClass === undefined) {
@@ -81,6 +79,7 @@ export function IngressClassDatatable({
   return (
     <div className="-mx-[15px]">
       <Datatable
+        settingsManager={tableState}
         dataset={ingControllerFormValues || []}
         columns={columns}
         isLoading={isLoading}
@@ -90,12 +89,6 @@ export function IngressClassDatatable({
         getRowId={(row) => `${row.Name}-${row.ClassName}-${row.Type}`}
         renderTableActions={(selectedRows) => renderTableActions(selectedRows)}
         description={renderIngressClassDescription()}
-        initialPageSize={settings.pageSize}
-        onPageSizeChange={settings.setPageSize}
-        initialSortBy={settings.sortBy}
-        onSortByChange={settings.setSortBy}
-        searchValue={search}
-        onSearchChange={setSearch}
       />
     </div>
   );
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/availability.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/availability.tsx
index 23f4b97dd..0c78b901a 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/availability.tsx
+++ b/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>
   );
 }
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/helper.ts b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/helper.ts
new file mode 100644
index 000000000..9014d0eaa
--- /dev/null
+++ b/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>();
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/index.ts b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/index.ts
index 66600f49f..91e91c3b4 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/index.ts
+++ b/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];
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx
index 73fd82793..be22a5362 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/name.tsx
+++ b/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>
   );
diff --git a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/type.tsx b/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/type.tsx
index ddd1351bd..0bf2109d6 100644
--- a/app/react/kubernetes/cluster/ingressClass/IngressClassDatatable/columns/type.tsx
+++ b/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,
-};
+});
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx b/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
index f09b7e261..004164021 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx
@@ -1,6 +1,5 @@
 import { Plus, Trash2 } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
-import { useStore } from 'zustand';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
@@ -12,7 +11,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 { DeleteIngressesRequest, Ingress } from '../types';
 import { useDeleteIngresses, useIngresses } from '../queries';
@@ -39,13 +38,13 @@ export function IngressDatatable() {
   );
 
   const deleteIngressesMutation = useDeleteIngresses();
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   const router = useRouter();
 
   return (
     <Datatable
+      settingsManager={tableState}
       dataset={ingressesQuery.data || []}
       columns={columns}
       isLoading={ingressesQuery.isLoading}
@@ -55,12 +54,6 @@ export function IngressDatatable() {
       getRowId={(row) => row.Name + row.Type + row.Namespace}
       renderTableActions={tableActions}
       disableSelect={useCheckboxes()}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
     />
   );
 
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/className.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/className.tsx
index 6d635aaa4..30546b2fa 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/className.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/className.tsx
@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Ingress } from '../../types';
-
-export const className: Column<Ingress> = {
-  Header: 'Class Name',
-  accessor: 'ClassName',
+export const className = columnHelper.accessor('ClassName', {
+  header: 'Class Name',
   id: 'className',
-  disableFilters: true,
-  canHide: true,
-};
+});
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/created.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/created.tsx
index 362056a81..144855256 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/created.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/created.tsx
@@ -1,23 +1,19 @@
-import { CellProps, Column } from 'react-table';
-
 import { formatDate } from '@/portainer/filters/filters';
 
-import { Ingress } from '../../types';
+import { columnHelper } from './helper';
 
-export const created: Column<Ingress> = {
-  Header: 'Created',
-  id: 'created',
-  accessor: (row) => row.CreationDate,
-  Cell: ({ row }: CellProps<Ingress>) => {
+export const created = columnHelper.accessor('CreationDate', {
+  header: 'Created',
+  cell: ({ row, getValue }) => {
+    const date = formatDate(getValue());
     const owner =
       row.original.Labels?.['io.portainer.kubernetes.ingress.owner'];
 
     if (owner) {
-      return `${formatDate(row.original.CreationDate)} by ${owner}`;
+      return `${date} by ${owner}`;
     }
 
-    return formatDate(row.original.CreationDate);
+    return date;
   },
-  disableFilters: true,
-  canHide: true,
-};
+  id: 'created',
+});
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/helper.ts b/app/react/kubernetes/ingresses/IngressDatatable/columns/helper.ts
new file mode 100644
index 000000000..a496dfa69
--- /dev/null
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Ingress } from '../../types';
+
+export const columnHelper = createColumnHelper<Ingress>();
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/index.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/index.ts
similarity index 100%
rename from app/react/kubernetes/ingresses/IngressDatatable/columns/index.tsx
rename to app/react/kubernetes/ingresses/IngressDatatable/columns/index.ts
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx
index 9739f11b4..cedcaa338 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx
@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 import { AlertTriangle, ArrowRight } from 'lucide-react';
 
 import { Icon } from '@@/Icon';
@@ -6,6 +6,41 @@ import { Badge } from '@@/Badge';
 
 import { Ingress, TLS, Path } from '../../types';
 
+import { columnHelper } from './helper';
+
+export const ingressRules = columnHelper.accessor('Paths', {
+  header: 'Rules and Paths',
+  id: 'ingressRules',
+  cell: Cell,
+});
+
+function Cell({ row, getValue }: CellContext<Ingress, Path[] | undefined>) {
+  const paths = getValue();
+
+  if (!paths) {
+    return <div />;
+  }
+
+  return paths.map((path) => {
+    const isHttp = isHTTP(row.original.TLS || [], path.Host);
+    return (
+      <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
+        <span className="flex flex-nowrap items-center gap-1 px-2">
+          {link(path.Host, path.Path, isHttp)}
+          <Icon icon={ArrowRight} />
+          {`${path.ServiceName}:${path.Port}`}
+          {!path.HasService && (
+            <Badge type="warn" className="ml-1 gap-1">
+              <Icon icon={AlertTriangle} />
+              Service doesn&apos;t exist
+            </Badge>
+          )}
+        </span>
+      </div>
+    );
+  });
+}
+
 function isHTTP(TLSs: TLS[], host: string) {
   return TLSs.filter((t) => t.Hosts.indexOf(host) !== -1).length === 0;
 }
@@ -24,33 +59,3 @@ function link(host: string, path: string, isHttp: boolean) {
     </a>
   );
 }
-
-export const ingressRules: Column<Ingress> = {
-  Header: 'Rules and Paths',
-  accessor: 'Paths',
-  Cell: ({ row }: CellProps<Ingress, Path[]>) => {
-    const results = row.original.Paths?.map((path: Path) => {
-      const isHttp = isHTTP(row.original.TLS || [], path.Host);
-      return (
-        <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
-          <span className="flex flex-nowrap items-center gap-1 px-2">
-            {link(path.Host, path.Path, isHttp)}
-            <Icon icon={ArrowRight} />
-            {`${path.ServiceName}:${path.Port}`}
-            {!path.HasService && (
-              <Badge type="warn" className="ml-1 gap-1">
-                <Icon icon={AlertTriangle} />
-                Service doesn&apos;t exist
-              </Badge>
-            )}
-          </span>
-        </div>
-      );
-    });
-    return results || <div />;
-  },
-  id: 'ingressRules',
-  disableFilters: true,
-  canHide: true,
-  disableSortBy: true,
-};
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
index 69dff5771..42b7d747f 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx
@@ -1,4 +1,4 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { Authorized } from '@/react/hooks/useUser';
 
@@ -6,28 +6,30 @@ import { Link } from '@@/Link';
 
 import { Ingress } from '../../types';
 
-export const name: Column<Ingress> = {
-  Header: 'Name',
-  accessor: 'Name',
-  Cell: ({ row }: CellProps<Ingress>) => (
-    <Authorized
-      authorizations="K8sIngressesW"
-      childrenUnauthorized={row.original.Name}
-    >
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('Name', {
+  header: 'Name',
+  cell: Cell,
+  id: 'name',
+});
+
+function Cell({ row, getValue }: CellContext<Ingress, string>) {
+  const name = getValue();
+
+  return (
+    <Authorized authorizations="K8sIngressesW" childrenUnauthorized={name}>
       <Link
         to="kubernetes.ingresses.edit"
         params={{
           uid: row.original.UID,
           namespace: row.original.Namespace,
-          name: row.original.Name,
+          name,
         }}
-        title={row.original.Name}
+        title={name}
       >
-        {row.original.Name}
+        {name}
       </Link>
     </Authorized>
-  ),
-  id: 'name',
-  disableFilters: true,
-  canHide: true,
-};
+  );
+}
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx
index 0aee8888f..4f7e32843 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/namespace.tsx
@@ -1,33 +1,40 @@
-import { CellProps, Column, Row } from 'react-table';
-
-import { filterHOC } from '@/react/components/datatables/Filter';
+import { CellContext, Row } from '@tanstack/react-table';
 
+import { filterHOC } from '@@/datatables/Filter';
 import { Link } from '@@/Link';
 
 import { Ingress } from '../../types';
 
-export const namespace: Column<Ingress> = {
-  Header: 'Namespace',
-  accessor: 'Namespace',
-  Cell: ({ row }: CellProps<Ingress>) => (
+import { columnHelper } from './helper';
+
+export const namespace = columnHelper.accessor('Namespace', {
+  header: 'Namespace',
+  id: 'namespace',
+  cell: Cell,
+  filterFn: (row: Row<Ingress>, columnId: string, filterValue: string[]) => {
+    if (filterValue.length === 0) {
+      return true;
+    }
+    return filterValue.includes(row.original.Namespace);
+  },
+
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+});
+
+function Cell({ getValue }: CellContext<Ingress, string>) {
+  const namespace = getValue();
+  return (
     <Link
       to="kubernetes.resourcePools.resourcePool"
       params={{
-        id: row.original.Namespace,
+        id: namespace,
       }}
-      title={row.original.Namespace}
+      title={namespace}
     >
-      {row.original.Namespace}
+      {namespace}
     </Link>
-  ),
-  id: 'namespace',
-  disableFilters: false,
-  canHide: true,
-  Filter: filterHOC('Filter by namespace'),
-  filter: (rows: Row<Ingress>[], filterValue, filters) => {
-    if (filters.length === 0) {
-      return rows;
-    }
-    return rows.filter((r) => filters.includes(r.original.Namespace));
-  },
-};
+  );
+}
diff --git a/app/react/kubernetes/ingresses/IngressDatatable/columns/type.tsx b/app/react/kubernetes/ingresses/IngressDatatable/columns/type.tsx
index 6996f2a6c..1a165071b 100644
--- a/app/react/kubernetes/ingresses/IngressDatatable/columns/type.tsx
+++ b/app/react/kubernetes/ingresses/IngressDatatable/columns/type.tsx
@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Ingress } from '../../types';
-
-export const type: Column<Ingress> = {
-  Header: 'Type',
-  accessor: 'Type',
+export const type = columnHelper.accessor('Type', {
+  header: 'Type',
   id: 'type',
-  disableFilters: true,
-  canHide: true,
-};
+});
diff --git a/app/react/nomad/jobs/EventsView/EventsDatatable/EventsDatatable.tsx b/app/react/nomad/jobs/EventsView/EventsDatatable/EventsDatatable.tsx
index 0800a65ec..14b39876b 100644
--- a/app/react/nomad/jobs/EventsView/EventsDatatable/EventsDatatable.tsx
+++ b/app/react/nomad/jobs/EventsView/EventsDatatable/EventsDatatable.tsx
@@ -1,39 +1,31 @@
 import { History } from 'lucide-react';
-import { useStore } from 'zustand';
 
 import { NomadEvent } from '@/react/nomad/types';
 
 import { Datatable } from '@@/datatables';
-import { useSearchBarState } from '@@/datatables/SearchBar';
 import { createPersistedStore } from '@@/datatables/types';
+import { useTableState } from '@@/datatables/useTableState';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 
 export interface EventsDatatableProps {
   data: NomadEvent[];
   isLoading: boolean;
 }
 
-const storageKey = 'events';
+const storageKey = 'nomad_events';
 
-const settingsStore = createPersistedStore(storageKey, 'Date');
+const settingsStore = createPersistedStore(storageKey, 'date');
 
 export function EventsDatatable({ data, isLoading }: EventsDatatableProps) {
-  const columns = useColumns();
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   return (
     <Datatable
       isLoading={isLoading}
+      settingsManager={tableState}
       columns={columns}
       dataset={data}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
       titleIcon={History}
       title="Events"
       totalCount={data.length}
diff --git a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/date.tsx b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/date.tsx
index 4d411dc40..440c8b6d5 100644
--- a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/date.tsx
+++ b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/date.tsx
@@ -1,12 +1,12 @@
-import { Column } from 'react-table';
-
-import { NomadEvent } from '@/react/nomad/types';
 import { isoDate } from '@/portainer/filters/filters';
 
-export const date: Column<NomadEvent> = {
-  Header: 'Date',
-  accessor: (row) => (row.Date ? isoDate(row.Date) : '-'),
+import { columnHelper } from './helper';
+
+export const date = columnHelper.accessor('Date', {
+  header: 'Date',
   id: 'date',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const date = getValue();
+    return date ? isoDate(date) : '-';
+  },
+});
diff --git a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/helper.ts b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/helper.ts
new file mode 100644
index 000000000..239da69fe
--- /dev/null
+++ b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { NomadEvent } from '@/react/nomad/types';
+
+export const columnHelper = createColumnHelper<NomadEvent>();
diff --git a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/index.tsx b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/index.tsx
index c6b25f787..001e6dfaa 100644
--- a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/index.tsx
+++ b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/index.tsx
@@ -1,9 +1,5 @@
-import { useMemo } from 'react';
-
 import { date } from './date';
 import { type } from './type';
 import { message } from './message';
 
-export function useColumns() {
-  return useMemo(() => [date, type, message], []);
-}
+export const columns = [date, type, message];
diff --git a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/message.tsx b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/message.tsx
index d85b49664..686856a93 100644
--- a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/message.tsx
+++ b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/message.tsx
@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { NomadEvent } from '@/react/nomad/types';
-
-export const message: Column<NomadEvent> = {
-  Header: 'Message',
-  accessor: 'Message',
+export const message = columnHelper.accessor('Message', {
+  header: 'Message',
   id: 'message',
-  disableFilters: true,
-  canHide: true,
-};
+});
diff --git a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/type.tsx b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/type.tsx
index c50d86ba3..1a165071b 100644
--- a/app/react/nomad/jobs/EventsView/EventsDatatable/columns/type.tsx
+++ b/app/react/nomad/jobs/EventsView/EventsDatatable/columns/type.tsx
@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { NomadEvent } from '@/react/nomad/types';
-
-export const type: Column<NomadEvent> = {
-  Header: 'Type',
-  accessor: 'Type',
+export const type = columnHelper.accessor('Type', {
+  header: 'Type',
   id: 'type',
-  disableFilters: true,
-  canHide: true,
-};
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx
index c1b0845b7..f5a69c99a 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/JobsDatatable.tsx
@@ -1,12 +1,11 @@
-import { useStore } from 'zustand';
 import { Clock } from 'lucide-react';
 
 import { Job } from '@/react/nomad/types';
 
 import { useRepeater } from '@@/datatables/useRepeater';
 import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
-import { TableSettingsMenu } from '@@/datatables';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { TableSettingsMenu } from '@@/datatables/TableSettingsMenu';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { TasksDatatable } from './TasksDatatable';
 import { columns } from './columns';
@@ -19,7 +18,7 @@ export interface JobsDatatableProps {
   isLoading?: boolean;
 }
 
-const storageKey = 'jobs';
+const storageKey = 'nomad_jobs';
 const settingsStore = createStore(storageKey);
 
 export function JobsDatatable({
@@ -27,20 +26,14 @@ export function JobsDatatable({
   refreshData,
   isLoading,
 }: JobsDatatableProps) {
-  const [search, setSearch] = useSearchBarState(storageKey);
-  const settings = useStore(settingsStore);
-  useRepeater(settings.autoRefreshRate, refreshData);
+  const tableState = useTableState(settingsStore, storageKey);
+  useRepeater(tableState.autoRefreshRate, refreshData);
 
   return (
-    <ExpandableDatatable<Job>
+    <ExpandableDatatable
       dataset={jobs}
       columns={columns}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
+      settingsManager={tableState}
       title="Nomad Jobs"
       titleIcon={Clock}
       disableSelect
@@ -49,9 +42,10 @@ export function JobsDatatable({
       isLoading={isLoading}
       renderTableSettings={() => (
         <TableSettingsMenu>
-          <JobsDatatableSettings settings={settings} />
+          <JobsDatatableSettings settings={tableState} />
         </TableSettingsMenu>
       )}
+      expandOnRowClick
     />
   );
 }
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/TasksDatatable.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/TasksDatatable.tsx
index d122217ba..da1f1210d 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/TasksDatatable.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/TasksDatatable.tsx
@@ -2,20 +2,18 @@ import { Task } from '@/react/nomad/types';
 
 import { NestedDatatable } from '@@/datatables/NestedDatatable';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 
 export interface Props {
   data: Task[];
 }
 
 export function TasksDatatable({ data }: Props) {
-  const columns = useColumns();
-
   return (
     <NestedDatatable
       columns={columns}
       dataset={data}
-      defaultSortBy="taskName"
+      initialSortBy={{ id: 'taskName', desc: false }}
     />
   );
 }
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx
index fbc0693a6..3ee8f96c5 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/actions.tsx
@@ -1,24 +1,23 @@
-import { CellProps, Column } from 'react-table';
 import { Clock, FileText } from 'lucide-react';
+import { CellContext } from '@tanstack/react-table';
 
 import { Task } from '@/react/nomad/types';
 
 import { Link } from '@@/Link';
 import { Icon } from '@@/Icon';
 
-export const actions: Column<Task> = {
-  Header: 'Task Actions',
-  id: 'actions',
-  disableFilters: true,
-  canHide: true,
-  disableResizing: true,
-  width: '5px',
-  sortType: 'string',
-  Filter: () => null,
-  Cell: ActionsCell,
-};
+import { columnHelper } from './helper';
 
-export function ActionsCell({ row }: CellProps<Task>) {
+export const actions = columnHelper.display({
+  header: 'Task Actions',
+  id: 'actions',
+  meta: {
+    width: '5px',
+  },
+  cell: ActionsCell,
+});
+
+export function ActionsCell({ row }: CellContext<Task, unknown>) {
   const params = {
     allocationID: row.original.AllocationID,
     taskName: row.original.TaskName,
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/allocationID.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/allocationID.tsx
index bbb939bd8..8267c58c1 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/allocationID.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/allocationID.tsx
@@ -1,11 +1,10 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Task } from '@/react/nomad/types';
-
-export const allocationID: Column<Task> = {
-  Header: 'Allocation ID',
-  accessor: (row) => row.AllocationID || '-',
+export const allocationID = columnHelper.accessor('AllocationID', {
+  header: 'Allocation ID',
   id: 'allocationID',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return value || '-';
+  },
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/helper.ts b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/helper.ts
new file mode 100644
index 000000000..9280074fd
--- /dev/null
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Task } from '@/react/nomad/types';
+
+export const columnHelper = createColumnHelper<Task>();
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/index.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/index.tsx
index 8f571bdf0..94b7852b1 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/index.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/index.tsx
@@ -1,5 +1,3 @@
-import { useMemo } from 'react';
-
 import { taskStatus } from './taskStatus';
 import { taskName } from './taskName';
 import { taskGroup } from './taskGroup';
@@ -7,9 +5,11 @@ import { allocationID } from './allocationID';
 import { started } from './started';
 import { actions } from './actions';
 
-export function useColumns() {
-  return useMemo(
-    () => [taskStatus, taskName, taskGroup, allocationID, actions, started],
-    []
-  );
-}
+export const columns = [
+  taskStatus,
+  taskName,
+  taskGroup,
+  allocationID,
+  actions,
+  started,
+];
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/started.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/started.tsx
index a39c9dda3..d5e06c4f7 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/started.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/started.tsx
@@ -1,19 +1,17 @@
 import moment from 'moment';
-import { Column } from 'react-table';
 
 import { Task } from '@/react/nomad/types';
 import { isoDate } from '@/portainer/filters/filters';
 
+import { columnHelper } from './helper';
+
 function accessor(row: Task) {
   const momentDate = moment(row.StartedAt);
   const isValid = momentDate.unix() > 0;
   return isValid ? isoDate(momentDate) : '-';
 }
 
-export const started: Column<Task> = {
-  accessor,
-  Header: 'Started',
+export const started = columnHelper.accessor(accessor, {
+  header: 'Started',
   id: 'startedName',
-  disableFilters: true,
-  canHide: true,
-};
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskGroup.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskGroup.tsx
index 80ded7472..875cd24b9 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskGroup.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskGroup.tsx
@@ -1,11 +1,10 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Task } from '@/react/nomad/types';
-
-export const taskGroup: Column<Task> = {
-  Header: 'Task Group',
-  accessor: (row) => row.TaskGroup || '-',
+export const taskGroup = columnHelper.accessor('TaskGroup', {
+  header: 'Task Group',
   id: 'taskGroup',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return value || '-';
+  },
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskName.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskName.tsx
index 7feead4b7..c3a324150 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskName.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskName.tsx
@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Task } from '@/react/nomad/types';
-
-export const taskName: Column<Task> = {
-  Header: 'Task Name',
-  accessor: (row) => row.TaskName || '-',
+export const taskName = columnHelper.accessor('TaskName', {
+  header: 'Task Name',
   id: 'taskName',
-  disableFilters: true,
-  canHide: true,
-};
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskStatus.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskStatus.tsx
index 7b83cafb8..cc322820a 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskStatus.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/TasksDatatable/columns/taskStatus.tsx
@@ -1,32 +1,35 @@
 import _ from 'lodash';
 import clsx from 'clsx';
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { Task } from '@/react/nomad/types';
 
-import { DefaultFilter } from '@@/datatables/Filter';
+import { filterHOC } from '@@/datatables/Filter';
 
-export const taskStatus: Column<Task> = {
-  Header: 'Task Status',
-  accessor: 'State',
+import { columnHelper } from './helper';
+
+export const taskStatus = columnHelper.accessor('State', {
+  header: 'Task Status',
   id: 'status',
-  Filter: DefaultFilter,
-  canHide: true,
-  sortType: 'string',
-  Cell: StateCell,
-};
+  meta: {
+    filter: filterHOC('Filter by state'),
+  },
+  cell: StateCell,
+  enableColumnFilter: true,
+});
 
-function StateCell({ value }: CellProps<Task, string>) {
+function StateCell({ getValue }: CellContext<Task, string>) {
+  const state = getValue();
   const className = getClassName();
 
-  return <span className={clsx('label', className)}>{value}</span>;
+  return <span className={clsx('label', className)}>{state}</span>;
 
   function getClassName() {
-    if (['dead'].includes(_.toLower(value))) {
+    if (['dead'].includes(_.toLower(state))) {
       return 'label-danger';
     }
 
-    if (['pending'].includes(_.toLower(value))) {
+    if (['pending'].includes(_.toLower(state))) {
       return 'label-warning';
     }
 
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/actions.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/actions.tsx
index 419dfd9f4..7ac0a63fb 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/actions.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/actions.tsx
@@ -1,25 +1,22 @@
-import { CellProps, Column } from 'react-table';
 import { Clock } from 'lucide-react';
 
-import { Job } from '@/react/nomad/types';
+import { Icon } from '@@/Icon';
 
-export const actions: Column<Job> = {
-  Header: 'Job Actions',
+import { columnHelper } from './helper';
+
+export const actions = columnHelper.display({
+  header: 'Job Actions',
   id: 'actions',
-  disableFilters: true,
-  canHide: true,
-  disableResizing: true,
-  width: '110px',
-  sortType: 'string',
-  Filter: () => null,
-  Cell: ActionsCell,
-};
+  meta: {
+    width: '110px',
+  },
+  cell: ActionsCell,
+});
 
-export function ActionsCell({ row }: CellProps<Job>) {
+export function ActionsCell() {
   return (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <div className="text-center" {...row.getToggleRowExpandedProps()}>
-      <Clock className="lucide" />
+    <div className="text-center">
+      <Icon icon={Clock} />
     </div>
   );
 }
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/created.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/created.tsx
index 68bdb199f..710760c86 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/created.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/created.tsx
@@ -1,13 +1,12 @@
-import { Column } from 'react-table';
-
-import { Job } from '@/react/nomad/types';
 import { isoDate } from '@/portainer/filters/filters';
 
-export const created: Column<Job> = {
-  Header: 'Created',
-  accessor: (row) =>
-    row.SubmitTime ? isoDate(parseInt(row.SubmitTime, 10)) : '-',
-  id: 'createdName',
-  disableFilters: true,
-  canHide: true,
-};
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor('SubmitTime', {
+  header: 'Created',
+  id: 'created',
+  cell: ({ getValue }) => {
+    const date = getValue();
+    return date ? isoDate(parseInt(date, 10)) : '-';
+  },
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/helper.ts b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/helper.ts
new file mode 100644
index 000000000..7baae53d7
--- /dev/null
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Job } from '@/react/nomad/types';
+
+export const columnHelper = createColumnHelper<Job>();
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/index.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/index.tsx
index 956018b3f..c3fdaa0ee 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/index.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/index.tsx
@@ -1,7 +1,13 @@
+import { Job } from '@/react/nomad/types';
+
+import { buildExpandColumn } from '@@/datatables/expand-column';
+
 import { name } from './name';
 import { status } from './status';
 import { created } from './created';
 import { actions } from './actions';
 import { namespace } from './namespace';
 
-export const columns = [name, status, namespace, actions, created];
+const expand = buildExpandColumn<Job>();
+
+export const columns = [expand, name, status, namespace, actions, created];
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/name.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/name.tsx
index fe22350dc..a25c77197 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/name.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/name.tsx
@@ -1,24 +1,6 @@
-import { CellProps, Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Job } from '@/react/nomad/types';
-
-import { ExpandingCell } from '@@/datatables/ExpandingCell';
-
-export const name: Column<Job> = {
-  Header: 'Name',
-  accessor: (row) => row.ID,
+export const name = columnHelper.accessor('ID', {
+  header: 'Name',
   id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  sortType: 'string',
-};
-
-export function NameCell({ value: name, row }: CellProps<Job>) {
-  return (
-    <ExpandingCell row={row} showExpandArrow>
-      {name}
-    </ExpandingCell>
-  );
-}
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/namespace.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/namespace.tsx
index 98f5ca4c4..1e832413b 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/namespace.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/namespace.tsx
@@ -1,11 +1,10 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Job } from '@/react/nomad/types';
-
-export const namespace: Column<Job> = {
-  Header: 'Namespace',
-  accessor: (row) => row.Namespace || '-',
+export const namespace = columnHelper.accessor('Namespace', {
+  header: 'Namespace',
   id: 'namespace',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return value || '-';
+  },
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/status.tsx b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/status.tsx
index 76a839a61..64c80e206 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/columns/status.tsx
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/columns/status.tsx
@@ -1,11 +1,10 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { Job } from '@/react/nomad/types';
-
-export const status: Column<Job> = {
-  Header: 'Job Status',
-  accessor: (row) => row.Status || '-',
-  id: 'statusName',
-  disableFilters: true,
-  canHide: true,
-};
+export const status = columnHelper.accessor('Status', {
+  header: 'Job Status',
+  id: 'status',
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return value || '-';
+  },
+});
diff --git a/app/react/nomad/jobs/JobsView/JobsDatatable/datatable-store.ts b/app/react/nomad/jobs/JobsView/JobsDatatable/datatable-store.ts
index 65d3de342..94fe39a8a 100644
--- a/app/react/nomad/jobs/JobsView/JobsDatatable/datatable-store.ts
+++ b/app/react/nomad/jobs/JobsView/JobsDatatable/datatable-store.ts
@@ -3,11 +3,7 @@ import { refreshableSettings, createPersistedStore } from '@@/datatables/types';
 import { TableSettings } from './types';
 
 export function createStore(storageKey: string) {
-  return createPersistedStore<TableSettings>(
-    storageKey,
-    'SubmitTime',
-    (set) => ({
-      ...refreshableSettings(set),
-    })
-  );
+  return createPersistedStore<TableSettings>(storageKey, 'created', (set) => ({
+    ...refreshableSettings(set),
+  }));
 }
diff --git a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx b/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
index c84d74f4f..79e955153 100644
--- a/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
+++ b/app/react/portainer/environments/update-schedules/ListView/ListView.tsx
@@ -1,5 +1,4 @@
 import { Clock, Trash2 } from 'lucide-react';
-import { useStore } from 'zustand';
 
 import { notifySuccess } from '@/portainer/services/notifications';
 import { withLimitToBE } from '@/react/hooks/useLimitToBE';
@@ -9,7 +8,7 @@ import { Datatable } from '@@/datatables';
 import { PageHeader } from '@@/PageHeader';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { useList } from '../queries/list';
 import { EdgeUpdateSchedule, StatusType } from '../types';
@@ -25,8 +24,7 @@ const settingsStore = createStore(storageKey);
 export default withLimitToBE(ListView);
 
 export function ListView() {
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   const listQuery = useList(true);
 
@@ -47,6 +45,7 @@ export function ListView() {
       <Datatable
         dataset={listQuery.data}
         columns={columns}
+        settingsManager={tableState}
         title="Update & rollback"
         titleIcon={Clock}
         emptyContentLabel="No schedules found"
@@ -55,12 +54,6 @@ export function ListView() {
         renderTableActions={(selectedRows) => (
           <TableActions selectedRows={selectedRows} />
         )}
-        initialPageSize={settings.pageSize}
-        onPageSizeChange={settings.setPageSize}
-        initialSortBy={settings.sortBy}
-        onSortByChange={settings.setSortBy}
-        searchValue={search}
-        onSearchChange={setSearch}
         isRowSelectable={(row) => row.original.status === StatusType.Pending}
       />
     </>
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/created.tsx b/app/react/portainer/environments/update-schedules/ListView/columns/created.tsx
index 562c368c4..cf102e09d 100644
--- a/app/react/portainer/environments/update-schedules/ListView/columns/created.tsx
+++ b/app/react/portainer/environments/update-schedules/ListView/columns/created.tsx
@@ -1,13 +1,12 @@
-import { Column } from 'react-table';
-
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
 
-import { EdgeUpdateListItemResponse } from '../../queries/list';
+import { columnHelper } from './helper';
 
-export const created: Column<EdgeUpdateListItemResponse> = {
-  Header: 'Created',
-  accessor: (row) => isoDateFromTimestamp(row.created),
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-};
+export const created = columnHelper.accessor('created', {
+  id: 'created',
+  header: 'Created',
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return isoDateFromTimestamp(value);
+  },
+});
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/groups.tsx b/app/react/portainer/environments/update-schedules/ListView/columns/groups.tsx
index bc86712cd..7d82bca16 100644
--- a/app/react/portainer/environments/update-schedules/ListView/columns/groups.tsx
+++ b/app/react/portainer/environments/update-schedules/ListView/columns/groups.tsx
@@ -1,24 +1,22 @@
-import { CellProps, Column } from 'react-table';
 import _ from 'lodash';
+import { CellContext } from '@tanstack/react-table';
 
 import { EdgeGroup } from '@/react/edge/edge-groups/types';
 import { useEdgeGroups } from '@/react/edge/edge-groups/queries/useEdgeGroups';
 
 import { EdgeUpdateListItemResponse } from '../../queries/list';
 
-export const groups: Column<EdgeUpdateListItemResponse> = {
-  Header: 'Groups',
-  accessor: 'edgeGroupIds',
-  Cell: GroupsCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  disableSortBy: true,
-};
+import { columnHelper } from './helper';
+
+export const groups = columnHelper.accessor('edgeGroupIds', {
+  header: 'Groups',
+  cell: GroupsCell,
+});
 
 export function GroupsCell({
-  value: groupsIds,
-}: CellProps<EdgeUpdateListItemResponse, Array<EdgeGroup['Id']>>) {
+  getValue,
+}: CellContext<EdgeUpdateListItemResponse, Array<EdgeGroup['Id']>>) {
+  const groupsIds = getValue();
   const groupsQuery = useEdgeGroups();
 
   const groups = _.compact(
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/helper.ts b/app/react/portainer/environments/update-schedules/ListView/columns/helper.ts
new file mode 100644
index 000000000..e4d5a7954
--- /dev/null
+++ b/app/react/portainer/environments/update-schedules/ListView/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { EdgeUpdateListItemResponse } from '../../queries/list';
+
+export const columnHelper = createColumnHelper<EdgeUpdateListItemResponse>();
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/index.ts b/app/react/portainer/environments/update-schedules/ListView/columns/index.ts
index 4eedb4102..ceffc063a 100644
--- a/app/react/portainer/environments/update-schedules/ListView/columns/index.ts
+++ b/app/react/portainer/environments/update-schedules/ListView/columns/index.ts
@@ -1,12 +1,15 @@
+import { buildNameColumn } from '@@/datatables/NameCell';
+
+import { EdgeUpdateListItemResponse } from '../../queries/list';
+
 import { created } from './created';
 import { groups } from './groups';
-import { name } from './name';
 import { scheduleStatus } from './schedule-status';
 import { scheduledTime } from './scheduled-time';
 import { scheduleType } from './type';
 
 export const columns = [
-  name,
+  buildNameColumn<EdgeUpdateListItemResponse>('name', 'id', '.item'),
   scheduledTime,
   groups,
   scheduleType,
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/name.tsx b/app/react/portainer/environments/update-schedules/ListView/columns/name.tsx
deleted file mode 100644
index 924d43e3b..000000000
--- a/app/react/portainer/environments/update-schedules/ListView/columns/name.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { CellProps, Column } from 'react-table';
-
-import { Link } from '@@/Link';
-
-import { EdgeUpdateListItemResponse } from '../../queries/list';
-
-export const name: Column<EdgeUpdateListItemResponse> = {
-  Header: 'Name',
-  accessor: 'name',
-  id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  sortType: 'string',
-};
-
-export function NameCell({
-  value: name,
-  row,
-}: CellProps<EdgeUpdateListItemResponse>) {
-  return (
-    <Link to=".item" params={{ id: row.original.id }}>
-      {name}
-    </Link>
-  );
-}
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx b/app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx
index 7256a27e9..a31034329 100644
--- a/app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx
+++ b/app/react/portainer/environments/update-schedules/ListView/columns/schedule-status.tsx
@@ -1,27 +1,26 @@
-import { CellProps, Column } from 'react-table';
+import { CellContext } from '@tanstack/react-table';
 
 import { EdgeUpdateListItemResponse } from '../../queries/list';
 import { StatusType } from '../../types';
 
-export const scheduleStatus: Column<EdgeUpdateListItemResponse> = {
-  Header: 'Status',
-  accessor: (row) => row.status,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  Cell: StatusCell,
-  disableSortBy: true,
-};
+import { columnHelper } from './helper';
+
+export const scheduleStatus = columnHelper.accessor('status', {
+  header: 'Status',
+  cell: StatusCell,
+});
 
 function StatusCell({
-  value: status,
+  getValue,
   row: {
     original: { statusMessage },
   },
-}: CellProps<
+}: CellContext<
   EdgeUpdateListItemResponse,
   EdgeUpdateListItemResponse['status']
 >) {
+  const status = getValue();
+
   switch (status) {
     case StatusType.Failed:
       return statusMessage;
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/scheduled-time.tsx b/app/react/portainer/environments/update-schedules/ListView/columns/scheduled-time.tsx
index 62e87835e..653d230c3 100644
--- a/app/react/portainer/environments/update-schedules/ListView/columns/scheduled-time.tsx
+++ b/app/react/portainer/environments/update-schedules/ListView/columns/scheduled-time.tsx
@@ -1,11 +1,5 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { EdgeUpdateListItemResponse } from '../../queries/list';
-
-export const scheduledTime: Column<EdgeUpdateListItemResponse> = {
-  Header: 'Scheduled Time & Date',
-  accessor: (row) => row.scheduledTime,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-};
+export const scheduledTime = columnHelper.accessor('scheduledTime', {
+  header: 'Scheduled Time & Date',
+});
diff --git a/app/react/portainer/environments/update-schedules/ListView/columns/type.tsx b/app/react/portainer/environments/update-schedules/ListView/columns/type.tsx
index 99e99a2da..d230d1b45 100644
--- a/app/react/portainer/environments/update-schedules/ListView/columns/type.tsx
+++ b/app/react/portainer/environments/update-schedules/ListView/columns/type.tsx
@@ -1,13 +1,12 @@
-import { Column } from 'react-table';
-
 import { ScheduleType } from '../../types';
-import { EdgeUpdateListItemResponse } from '../../queries/list';
 
-export const scheduleType: Column<EdgeUpdateListItemResponse> = {
-  Header: 'Type',
-  accessor: (row) => ScheduleType[row.type],
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  sortType: 'string',
-};
+import { columnHelper } from './helper';
+
+export const scheduleType = columnHelper.accessor('type', {
+  header: 'Type',
+  cell: ({ getValue }) => {
+    const value = getValue();
+
+    return ScheduleType[value];
+  },
+});
diff --git a/app/react/portainer/notifications/NotificationsView.tsx b/app/react/portainer/notifications/NotificationsView.tsx
index 12fd84598..f5b739696 100644
--- a/app/react/portainer/notifications/NotificationsView.tsx
+++ b/app/react/portainer/notifications/NotificationsView.tsx
@@ -12,7 +12,7 @@ import { PageHeader } from '@@/PageHeader';
 import { Datatable } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { createPersistedStore } from '@@/datatables/types';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { useTableState } from '@@/datatables/useTableState';
 
 import { notificationsStore } from './notifications-store';
 import { ToastNotification } from './types';
@@ -32,8 +32,7 @@ export function NotificationsView() {
     [];
 
   const breadcrumbs = 'Notifications';
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   const {
     params: { id: activeItemId },
@@ -47,17 +46,12 @@ export function NotificationsView() {
         title="Notifications"
         titleIcon={Bell}
         dataset={userNotifications}
+        settingsManager={tableState}
         emptyContentLabel="No notifications found"
         totalCount={userNotifications.length}
         renderTableActions={(selectedRows) => (
           <TableActions selectedRows={selectedRows} />
         )}
-        initialPageSize={settings.pageSize}
-        onPageSizeChange={settings.setPageSize}
-        initialSortBy={settings.sortBy}
-        onSortByChange={settings.setSortBy}
-        searchValue={search}
-        onSearchChange={setSearch}
         getRowId={(row) => row.id}
         highlightedItemId={activeItemId}
       />
diff --git a/app/react/portainer/notifications/columns/details.tsx b/app/react/portainer/notifications/columns/details.tsx
index f2d121590..740931c0c 100644
--- a/app/react/portainer/notifications/columns/details.tsx
+++ b/app/react/portainer/notifications/columns/details.tsx
@@ -1,14 +1,11 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { ToastNotification } from '../types';
-
-export const details: Column<ToastNotification> = {
-  Header: 'Details',
-  accessor: 'details',
+export const details = columnHelper.accessor('details', {
+  header: 'Details',
   id: 'details',
-  disableFilters: true,
-  canHide: true,
-  Cell: ({ value }: { value: string }) => (
-    <div className="whitespace-normal">{value}</div>
-  ),
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+
+    return <div className="whitespace-normal">{value}</div>;
+  },
+});
diff --git a/app/react/portainer/notifications/columns/helper.ts b/app/react/portainer/notifications/columns/helper.ts
new file mode 100644
index 000000000..0f1c62d97
--- /dev/null
+++ b/app/react/portainer/notifications/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { ToastNotification } from '../types';
+
+export const columnHelper = createColumnHelper<ToastNotification>();
diff --git a/app/react/portainer/notifications/columns/time.tsx b/app/react/portainer/notifications/columns/time.tsx
index 35a830667..4eecc5f60 100644
--- a/app/react/portainer/notifications/columns/time.tsx
+++ b/app/react/portainer/notifications/columns/time.tsx
@@ -1,13 +1,13 @@
-import { Column } from 'react-table';
-
 import { isoDate } from '@/portainer/filters/filters';
 
-import { ToastNotification } from '../types';
+import { columnHelper } from './helper';
 
-export const time: Column<ToastNotification> = {
-  Header: 'Time',
-  accessor: (row) => (row.timeStamp ? isoDate(row.timeStamp) : '-'),
+export const time = columnHelper.accessor('timeStamp', {
+  header: 'Time',
   id: 'time',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+
+    return value ? isoDate(value) : '-';
+  },
+});
diff --git a/app/react/portainer/notifications/columns/title.tsx b/app/react/portainer/notifications/columns/title.tsx
index 638b373c8..6e2fe018e 100644
--- a/app/react/portainer/notifications/columns/title.tsx
+++ b/app/react/portainer/notifications/columns/title.tsx
@@ -1,11 +1,6 @@
-import { Column } from 'react-table';
+import { columnHelper } from './helper';
 
-import { ToastNotification } from '../types';
-
-export const title: Column<ToastNotification> = {
-  Header: 'Title',
-  accessor: 'title',
+export const title = columnHelper.accessor('title', {
+  header: 'Title',
   id: 'title',
-  disableFilters: true,
-  canHide: true,
-};
+});
diff --git a/app/react/portainer/notifications/columns/type.tsx b/app/react/portainer/notifications/columns/type.tsx
index 07ab6104f..08cb7ef00 100644
--- a/app/react/portainer/notifications/columns/type.tsx
+++ b/app/react/portainer/notifications/columns/type.tsx
@@ -1,11 +1,13 @@
-import { Column } from 'react-table';
+import _ from 'lodash';
 
-import { ToastNotification } from '../types';
+import { columnHelper } from './helper';
 
-export const type: Column<ToastNotification> = {
-  Header: 'Type',
-  accessor: (row) => row.type.charAt(0).toUpperCase() + row.type.slice(1),
+export const type = columnHelper.accessor('type', {
+  header: 'Type',
   id: 'type',
-  disableFilters: true,
-  canHide: true,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+
+    return _.capitalize(value);
+  },
+});
diff --git a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
index 2d0e7fdab..bb1936225 100644
--- a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/FDOProfilesDatatable.tsx
@@ -1,11 +1,10 @@
 import { List } from 'lucide-react';
-import { useStore } from 'zustand';
 
 import { Datatable } from '@@/datatables';
 import { createPersistedStore } from '@@/datatables/types';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { useTableState } from '@@/datatables/useTableState';
 
-import { useColumns } from './columns';
+import { columns } from './columns';
 import { FDOProfilesDatatableActions } from './FDOProfilesDatatableActions';
 import { useFDOProfiles } from './useFDOProfiles';
 
@@ -20,21 +19,15 @@ export interface FDOProfilesDatatableProps {
 export function FDOProfilesDatatable({
   isFDOEnabled,
 }: FDOProfilesDatatableProps) {
-  const columns = useColumns();
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
+
   const { isLoading, profiles } = useFDOProfiles();
 
   return (
     <Datatable
       columns={columns}
       dataset={profiles}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
+      settingsManager={tableState}
       title="Device Profiles"
       titleIcon={List}
       disableSelect={!isFDOEnabled}
diff --git a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/created.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/created.tsx
index 23cd9daaf..bc793f5b6 100644
--- a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/created.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/created.tsx
@@ -1,14 +1,12 @@
-import { Column } from 'react-table';
-
 import { isoDateFromTimestamp } from '@/portainer/filters/filters';
-import { Profile } from '@/portainer/hostmanagement/fdo/model';
 
-export const created: Column<Profile> = {
-  Header: 'Created',
-  accessor: 'dateCreated',
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor('dateCreated', {
+  header: 'Created',
   id: 'created',
-  Cell: ({ value }) => isoDateFromTimestamp(value),
-  disableFilters: true,
-  canHide: true,
-  Filter: () => null,
-};
+  cell: ({ getValue }) => {
+    const value = getValue();
+    return isoDateFromTimestamp(value);
+  },
+});
diff --git a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/helper.ts b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/helper.ts
new file mode 100644
index 000000000..02266610d
--- /dev/null
+++ b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Profile } from '@/portainer/hostmanagement/fdo/model';
+
+export const columnHelper = createColumnHelper<Profile>();
diff --git a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx
index 5afa6a56a..6983ca15c 100644
--- a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx
+++ b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/index.tsx
@@ -1,8 +1,10 @@
-import { useMemo } from 'react';
+import { Profile } from '@/portainer/hostmanagement/fdo/model';
+
+import { buildNameColumn } from '@@/datatables/NameCell';
 
 import { created } from './created';
-import { name } from './name';
 
-export function useColumns() {
-  return useMemo(() => [name, created], []);
-}
+export const columns = [
+  buildNameColumn<Profile>('name', 'id', 'portainer.endpoints.profile.edit'),
+  created,
+];
diff --git a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/name.tsx b/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/name.tsx
deleted file mode 100644
index 6af8f0cd3..000000000
--- a/app/react/portainer/settings/EdgeComputeView/FDOProfilesDatatable/columns/name.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { CellProps, Column } from 'react-table';
-import { useSref } from '@uirouter/react';
-
-import { Profile } from '@/portainer/hostmanagement/fdo/model';
-
-export const name: Column<Profile> = {
-  Header: 'Name',
-  accessor: 'name',
-  id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: true,
-  sortType: 'string',
-};
-
-export function NameCell({
-  value: name,
-  row: { original: profile },
-}: CellProps<Profile>) {
-  const linkProps = useSref('portainer.endpoints.profile.edit', {
-    id: profile.id,
-  });
-
-  return (
-    <a href={linkProps.href} onClick={linkProps.onClick} title={name}>
-      {name}
-    </a>
-  );
-}
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamAssociationSelector.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamAssociationSelector.tsx
index 5db5b4aee..9f4d0859e 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamAssociationSelector.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamAssociationSelector.tsx
@@ -31,11 +31,11 @@ export function TeamAssociationSelector({
   );
 
   return (
-    <div className="row">
-      <div className="col-sm-6">
+    <div className="flex">
+      <div className="w-1/2">
         <UsersList users={usersNotInTeam} disabled={disabled} teamId={teamId} />
       </div>
-      <div className="col-sm-6">
+      <div className="w-1/2">
         <TeamMembersList
           teamId={teamId}
           disabled={disabled}
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
index 2568565e2..f0a6a1d1f 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/TeamMembersList.tsx
@@ -1,9 +1,3 @@
-import {
-  useGlobalFilter,
-  usePagination,
-  useSortBy,
-  useTable,
-} from 'react-table';
 import { useMemo, useState } from 'react';
 import { Users, UserX } from 'lucide-react';
 
@@ -16,17 +10,11 @@ import {
   useTeamMemberships,
 } from '@/react/portainer/users/teams/queries';
 
-import { Widget } from '@@/Widget';
-import { PageSelector } from '@@/PaginationControls/PageSelector';
 import { Button } from '@@/buttons';
-import { Table } from '@@/datatables';
-import { Input } from '@@/form-components/Input';
+import { Datatable } from '@@/datatables';
 
-import { name } from './name-column';
 import { RowContext, RowProvider } from './RowContext';
-import { teamRole } from './team-role-column';
-
-const columns = [name, teamRole];
+import { columns } from './columns';
 
 interface Props {
   users: User[];
@@ -45,39 +33,10 @@ export function TeamMembersList({ users, roles, disabled, teamId }: Props) {
 
   const [search, setSearch] = useState('');
   const [pageSize, setPageSize] = useState(10);
+  const [sortBy, setSortBy] = useState({ id: 'name', desc: false });
 
   const { isAdmin } = useUser();
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    page,
-    prepareRow,
-    gotoPage,
-    setPageSize: setPageSizeInternal,
-    setGlobalFilter: setGlobalFilterInternal,
-    state: { pageIndex },
-    setSortBy,
-    rows,
-  } = useTable<User>(
-    {
-      defaultCanFilter: false,
-      columns,
-      data: users,
-      initialState: {
-        pageSize,
 
-        sortBy: [{ id: 'name', desc: false }],
-        globalFilter: search,
-      },
-    },
-    useGlobalFilter,
-    useSortBy,
-    usePagination
-  );
-
-  const tableProps = getTableProps();
-  const tbodyProps = getTableBodyProps();
   const rowContext = useMemo<RowContext>(
     () => ({
       getRole(userId: UserId) {
@@ -88,124 +47,40 @@ export function TeamMembersList({ users, roles, disabled, teamId }: Props) {
     }),
     [roles, disabled, teamId]
   );
+
   return (
-    <Widget>
-      <Widget.Title icon={Users} title="Team members">
-        Items per page:
-        <select
-          value={pageSize}
-          onChange={handlePageSizeChange}
-          className="space-left"
-        >
-          <option value={Number.MAX_SAFE_INTEGER}>All</option>
-          <option value={10}>10</option>
-          <option value={25}>25</option>
-          <option value={50}>50</option>
-          <option value={100}>100</option>
-        </select>
-      </Widget.Title>
-      <Widget.Taskbar className="col-sm-12 nopadding">
-        <div className="col-sm-12 col-md-6 nopadding">
-          {isAdmin && (
+    <RowProvider context={rowContext}>
+      <Datatable<User>
+        dataset={users}
+        columns={columns}
+        titleIcon={Users}
+        title="Team members"
+        renderTableActions={() =>
+          isAdmin && (
             <Button
-              onClick={() =>
-                handleRemoveMembers(rows.map(({ original }) => original.Id))
-              }
+              onClick={() => handleRemoveMembers(users.map((user) => user.Id))}
               disabled={disabled || users.length === 0}
               icon={UserX}
             >
               Remove all users
             </Button>
-          )}
-        </div>
-        <div className="col-sm-12 col-md-6 nopadding">
-          <Input
-            type="text"
-            id="filter-users"
-            value={search}
-            onChange={handleSearchBarChange}
-            placeholder="Filter..."
-            className="input-sm"
-          />
-        </div>
-      </Widget.Taskbar>
-      <Widget.Body className="nopadding">
-        <Table
-          className={tableProps.className}
-          role={tableProps.role}
-          style={tableProps.style}
-        >
-          <thead>
-            {headerGroups.map((headerGroup) => {
-              const { key, className, role, style } =
-                headerGroup.getHeaderGroupProps();
-
-              return (
-                <Table.HeaderRow<User>
-                  key={key}
-                  className={className}
-                  role={role}
-                  style={style}
-                  headers={headerGroup.headers}
-                  onSortChange={handleSortChange}
-                />
-              );
-            })}
-          </thead>
-          <tbody
-            className={tbodyProps.className}
-            role={tbodyProps.role}
-            style={tbodyProps.style}
-          >
-            <Table.Content
-              emptyContent="No users."
-              prepareRow={prepareRow}
-              rows={page}
-              renderRow={(row, { key, className, role, style }) => (
-                <RowProvider context={rowContext} key={key}>
-                  <Table.Row<User>
-                    cells={row.cells}
-                    key={key}
-                    className={className}
-                    role={role}
-                    style={style}
-                  />
-                </RowProvider>
-              )}
-            />
-          </tbody>
-        </Table>
-        <Table.Footer>
-          {pageSize !== 0 && (
-            <div className="pagination-controls">
-              <PageSelector
-                maxSize={5}
-                onPageChange={(p) => gotoPage(p - 1)}
-                currentPage={pageIndex + 1}
-                itemsPerPage={pageSize}
-                totalCount={rows.length}
-              />
-            </div>
-          )}
-        </Table.Footer>
-      </Widget.Body>
-    </Widget>
+          )
+        }
+        disableSelect
+        settingsManager={{
+          pageSize,
+          setPageSize,
+          sortBy,
+          setSortBy: handleSetSort,
+          search,
+          setSearch,
+        }}
+      />
+    </RowProvider>
   );
 
-  function handlePageSizeChange(e: React.ChangeEvent<HTMLSelectElement>) {
-    const pageSize = parseInt(e.target.value, 10);
-    setPageSize(pageSize);
-    setPageSizeInternal(pageSize);
-  }
-
-  function handleSearchBarChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const { value } = e.target;
-    setSearch(value);
-    setGlobalFilterInternal(value);
-  }
-
-  function handleSortChange(id: string, desc: boolean) {
-    setSortBy([{ id, desc }]);
+  function handleSetSort(colId: string, desc: boolean) {
+    setSortBy({ id: colId, desc });
   }
 
   function handleRemoveMembers(userIds: UserId[]) {
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/helper.ts b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/helper.ts
new file mode 100644
index 000000000..b488f25ff
--- /dev/null
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/helper.ts
@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { User } from '@/portainer/users/types';
+
+export const columnHelper = createColumnHelper<User>();
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/index.ts b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/index.ts
new file mode 100644
index 000000000..658135376
--- /dev/null
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/index.ts
@@ -0,0 +1,4 @@
+import { name } from './name-column';
+import { teamRole } from './team-role-column';
+
+export const columns = [name, teamRole];
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/name-column.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/name-column.tsx
similarity index 72%
rename from app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/name-column.tsx
rename to app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/name-column.tsx
index c6996bb9e..618e5773a 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/name-column.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/name-column.tsx
@@ -1,5 +1,5 @@
-import { CellProps, Column } from 'react-table';
 import { MinusCircle } from 'lucide-react';
+import { CellContext } from '@tanstack/react-table';
 
 import { User, UserId } from '@/portainer/users/types';
 import { notifySuccess } from '@/portainer/services/notifications';
@@ -10,23 +10,21 @@ import {
 
 import { Button } from '@@/buttons';
 
-import { useRowContext } from './RowContext';
+import { useRowContext } from '../RowContext';
 
-export const name: Column<User> = {
-  Header: 'Name',
-  accessor: (row) => row.Username,
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor('Username', {
+  header: 'Name',
   id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  sortType: 'string',
-};
+  cell: NameCell,
+});
 
 export function NameCell({
-  value: name,
+  getValue,
   row: { original: user },
-}: CellProps<User, string>) {
+}: CellContext<User, string>) {
+  const name = getValue();
   const { disabled, teamId } = useRowContext();
 
   const membershipsQuery = useTeamMemberships(teamId);
@@ -42,7 +40,7 @@ export function NameCell({
 
       <Button
         color="link"
-        className="space-left nopadding"
+        className="space-left !p-0"
         onClick={() => handleRemoveMember(user.Id)}
         disabled={disabled}
         icon={MinusCircle}
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/team-role-column.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/team-role-column.tsx
similarity index 85%
rename from app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/team-role-column.tsx
rename to app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/team-role-column.tsx
index 48fc7b561..af05c5d89 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/team-role-column.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/TeamMembersList/columns/team-role-column.tsx
@@ -1,5 +1,5 @@
-import { CellProps, Column } from 'react-table';
 import { User as UserIcon, UserPlus, UserX } from 'lucide-react';
+import { CellContext } from '@tanstack/react-table';
 
 import { User } from '@/portainer/users/types';
 import { useUser as useCurrentUser } from '@/react/hooks/useUser';
@@ -13,20 +13,22 @@ import {
 import { Button } from '@@/buttons';
 import { Icon } from '@@/Icon';
 
-import { useRowContext } from './RowContext';
+import { useRowContext } from '../RowContext';
 
-export const teamRole: Column<User> = {
-  Header: 'Team Role',
-  accessor: 'Id',
+import { columnHelper } from './helper';
+
+export const teamRole = columnHelper.accessor('Id', {
+  header: 'Team Role',
   id: 'role',
-  Cell: RoleCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  sortType: 'string',
-};
+  cell: RoleCell,
+});
+
+export function RoleCell({
+  row: { original: user },
+  getValue,
+}: CellContext<User, User['Id']>) {
+  const id = getValue();
 
-export function RoleCell({ row: { original: user } }: CellProps<User>) {
   const { getRole, disabled, teamId } = useRowContext();
   const membershipsQuery = useTeamMemberships(teamId);
   const updateRoleMutation = useUpdateRoleMutation(
@@ -34,7 +36,7 @@ export function RoleCell({ row: { original: user } }: CellProps<User>) {
     membershipsQuery.data
   );
 
-  const role = getRole(user.Id);
+  const role = getRole(id);
 
   const { isAdmin } = useCurrentUser();
 
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.tsx
index 69b4a4ddb..fd790d2b3 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/UsersList.tsx
@@ -1,9 +1,3 @@
-import {
-  useGlobalFilter,
-  usePagination,
-  useSortBy,
-  useTable,
-} from 'react-table';
 import { useMemo, useState } from 'react';
 import { UserPlus, Users } from 'lucide-react';
 
@@ -13,12 +7,8 @@ import { notifySuccess } from '@/portainer/services/notifications';
 import { useAddMemberMutation } from '@/react/portainer/users/teams/queries';
 import { TeamId } from '@/react/portainer/users/teams/types';
 
-import { Widget } from '@@/Widget';
-import { PageSelector } from '@@/PaginationControls/PageSelector';
 import { Button } from '@@/buttons';
-import { Table } from '@@/datatables';
-import { TableFooter } from '@@/datatables/TableFooter';
-import { Input } from '@@/form-components/Input';
+import { Datatable } from '@@/datatables';
 
 import { name } from './name-column';
 import { RowProvider } from './RowContext';
@@ -35,158 +25,45 @@ export function UsersList({ users, disabled, teamId }: Props) {
   const [search, setSearch] = useState('');
   const [pageSize, setPageSize] = useState(10);
   const addMemberMutation = useAddMemberMutation(teamId);
+  const [sortBy, setSortBy] = useState({ id: 'name', desc: false });
 
   const { isAdmin } = useUser();
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
-    page,
-    prepareRow,
-    gotoPage,
-    setPageSize: setPageSizeInternal,
-    setGlobalFilter: setGlobalFilterInternal,
-    state: { pageIndex },
-    setSortBy,
-    rows,
-  } = useTable(
-    {
-      defaultCanFilter: false,
-      columns,
-      data: users,
-      initialState: {
-        pageSize,
 
-        sortBy: [{ id: 'name', desc: false }],
-        globalFilter: search,
-      },
-    },
-    useGlobalFilter,
-    useSortBy,
-    usePagination
-  );
-
-  const tableProps = getTableProps();
-  const tbodyProps = getTableBodyProps();
   const rowContext = useMemo(() => ({ disabled, teamId }), [disabled, teamId]);
+
   return (
-    <Widget>
-      <Widget.Title icon={Users} title="Users">
-        Items per page:
-        <select
-          value={pageSize}
-          onChange={handlePageSizeChange}
-          className="space-left"
-        >
-          <option value={Number.MAX_SAFE_INTEGER}>All</option>
-          <option value={10}>10</option>
-          <option value={25}>25</option>
-          <option value={50}>50</option>
-          <option value={100}>100</option>
-        </select>
-      </Widget.Title>
-      <Widget.Taskbar className="col-sm-12 nopadding">
-        <div className="col-sm-12 col-md-6 nopadding">
-          {isAdmin && (
+    <RowProvider context={rowContext}>
+      <Datatable<User>
+        dataset={users}
+        columns={columns}
+        titleIcon={Users}
+        title="Users"
+        renderTableActions={() =>
+          isAdmin && (
             <Button
-              onClick={() =>
-                handleAddAllMembers(rows.map((row) => row.original.Id))
-              }
-              disabled={disabled || rows.length === 0}
+              onClick={() => handleAddAllMembers(users.map((u) => u.Id))}
+              disabled={disabled || users.length === 0}
               icon={UserPlus}
             >
               Add all users
             </Button>
-          )}
-        </div>
-        <div className="col-sm-12 col-md-6 nopadding">
-          <Input
-            type="text"
-            id="filter-users"
-            value={search}
-            onChange={handleSearchBarChange}
-            placeholder="Filter..."
-            className="input-sm"
-          />
-        </div>
-      </Widget.Taskbar>
-      <Widget.Body className="nopadding">
-        <Table
-          className={tableProps.className}
-          role={tableProps.role}
-          style={tableProps.style}
-        >
-          <thead>
-            {headerGroups.map((headerGroup) => {
-              const { key, className, role, style } =
-                headerGroup.getHeaderGroupProps();
-
-              return (
-                <Table.HeaderRow<User>
-                  key={key}
-                  className={className}
-                  role={role}
-                  style={style}
-                  headers={headerGroup.headers}
-                  onSortChange={handleSortChange}
-                />
-              );
-            })}
-          </thead>
-          <tbody
-            className={tbodyProps.className}
-            role={tbodyProps.role}
-            style={tbodyProps.style}
-          >
-            <Table.Content
-              emptyContent="No users."
-              prepareRow={prepareRow}
-              rows={page}
-              renderRow={(row, { key, className, role, style }) => (
-                <RowProvider context={rowContext} key={key}>
-                  <Table.Row<User>
-                    cells={row.cells}
-                    key={key}
-                    className={className}
-                    role={role}
-                    style={style}
-                  />
-                </RowProvider>
-              )}
-            />
-          </tbody>
-        </Table>
-        <TableFooter>
-          {pageSize !== 0 && (
-            <div className="pagination-controls">
-              <PageSelector
-                maxSize={5}
-                onPageChange={(p) => gotoPage(p - 1)}
-                currentPage={pageIndex + 1}
-                itemsPerPage={pageSize}
-                totalCount={rows.length}
-              />
-            </div>
-          )}
-        </TableFooter>
-      </Widget.Body>
-    </Widget>
+          )
+        }
+        disableSelect
+        settingsManager={{
+          pageSize,
+          setPageSize,
+          sortBy,
+          setSortBy: handleSetSort,
+          search,
+          setSearch,
+        }}
+      />
+    </RowProvider>
   );
 
-  function handlePageSizeChange(e: React.ChangeEvent<HTMLSelectElement>) {
-    const pageSize = parseInt(e.target.value, 10);
-    setPageSize(pageSize);
-    setPageSizeInternal(pageSize);
-  }
-
-  function handleSearchBarChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const { value } = e.target;
-    setSearch(value);
-    setGlobalFilterInternal(value);
-  }
-
-  function handleSortChange(id: string, desc: boolean) {
-    setSortBy([{ id, desc }]);
+  function handleSetSort(colId: string, desc: boolean) {
+    setSortBy({ id: colId, desc });
   }
 
   function handleAddAllMembers(userIds: UserId[]) {
diff --git a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/name-column.tsx b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/name-column.tsx
index 0a92cc16d..a698b671d 100644
--- a/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/name-column.tsx
+++ b/app/react/portainer/users/teams/ItemView/TeamAssociationSelector/UsersList/name-column.tsx
@@ -1,5 +1,5 @@
-import { CellProps, Column } from 'react-table';
 import { PlusCircle } from 'lucide-react';
+import { CellContext, ColumnDef } from '@tanstack/react-table';
 
 import { User } from '@/portainer/users/types';
 import { notifySuccess } from '@/portainer/services/notifications';
@@ -9,21 +9,18 @@ import { Button } from '@@/buttons';
 
 import { useRowContext } from './RowContext';
 
-export const name: Column<User> = {
-  Header: 'Name',
-  accessor: (row) => row.Username,
+export const name: ColumnDef<User, string> = {
+  header: 'Name',
+  accessorFn: (row) => row.Username,
   id: 'name',
-  Cell: NameCell,
-  disableFilters: true,
-  Filter: () => null,
-  canHide: false,
-  sortType: 'string',
+  cell: NameCell,
 };
 
 export function NameCell({
-  value: name,
+  getValue,
   row: { original: user },
-}: CellProps<User, string>) {
+}: CellContext<User, string>) {
+  const name = getValue();
   const { disabled, teamId } = useRowContext();
 
   const addMemberMutation = useAddMemberMutation(teamId);
diff --git a/app/react/portainer/users/teams/ListView/TeamsDatatable/TeamsDatatable.tsx b/app/react/portainer/users/teams/ListView/TeamsDatatable/TeamsDatatable.tsx
index 8601d255a..9312eeb6f 100644
--- a/app/react/portainer/users/teams/ListView/TeamsDatatable/TeamsDatatable.tsx
+++ b/app/react/portainer/users/teams/ListView/TeamsDatatable/TeamsDatatable.tsx
@@ -1,7 +1,6 @@
-import { Column } from 'react-table';
 import { useMutation, useQueryClient } from 'react-query';
 import { Trash2, Users } from 'lucide-react';
-import { useStore } from 'zustand';
+import { ColumnDef } from '@tanstack/react-table';
 
 import { notifySuccess } from '@/portainer/services/notifications';
 import { promiseSequence } from '@/portainer/helpers/promise-utils';
@@ -13,13 +12,13 @@ import { Datatable } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { buildNameColumn } from '@@/datatables/NameCell';
 import { createPersistedStore } from '@@/datatables/types';
-import { useSearchBarState } from '@@/datatables/SearchBar';
+import { useTableState } from '@@/datatables/useTableState';
 
 const storageKey = 'teams';
 
-const columns: readonly Column<Team>[] = [
-  buildNameColumn('Name', 'Id', 'portainer.teams.team'),
-] as const;
+const columns: ColumnDef<Team>[] = [
+  buildNameColumn<Team>('Name', 'Id', 'portainer.teams.team'),
+];
 
 interface Props {
   teams: Team[];
@@ -30,19 +29,13 @@ const settingsStore = createPersistedStore(storageKey);
 
 export function TeamsDatatable({ teams, isAdmin }: Props) {
   const { handleRemove } = useRemoveMutation();
-  const settings = useStore(settingsStore);
-  const [search, setSearch] = useSearchBarState(storageKey);
+  const tableState = useTableState(settingsStore, storageKey);
 
   return (
-    <Datatable
+    <Datatable<Team>
       dataset={teams}
       columns={columns}
-      initialPageSize={settings.pageSize}
-      onPageSizeChange={settings.setPageSize}
-      initialSortBy={settings.sortBy}
-      onSortByChange={settings.setSortBy}
-      searchValue={search}
-      onSearchChange={setSearch}
+      settingsManager={tableState}
       title="Teams"
       titleIcon={Users}
       renderTableActions={(selectedRows) =>
diff --git a/package.json b/package.json
index 661b4f4f3..75c15d03c 100644
--- a/package.json
+++ b/package.json
@@ -43,12 +43,12 @@
     "@codemirror/view": "^6.7.1",
     "@lezer/common": "^1.0.2",
     "@lezer/highlight": "^1.1.3",
-    "@lineup-lite/hooks": "^1.6.0",
     "@nxmix/tokenize-ansi": "^3.0.0",
     "@open-amt-cloud-toolkit/ui-toolkit-react": "2.0.0",
     "@reach/combobox": "^0.18.0",
     "@reach/dialog": "^0.17.0",
     "@reach/menu-button": "^0.16.1",
+    "@tanstack/react-table": "^8.8.5",
     "@tippyjs/react": "^4.2.6",
     "@uirouter/angularjs": "1.0.11",
     "@uirouter/react": "^1.0.7",
@@ -111,7 +111,6 @@
     "react-is": "^18.2.0",
     "react-query": "^3.33.4",
     "react-select": "^5.2.1",
-    "react-table": "^7.7.0",
     "sanitize-html": "^2.8.1",
     "spinkit": "^2.0.1",
     "splitargs": "github:deviantony/splitargs#semver:~0.2.0",
@@ -152,7 +151,6 @@
     "@types/react-datetime-picker": "^3.4.1",
     "@types/react-dom": "^17.0.11",
     "@types/react-is": "^17.0.3",
-    "@types/react-table": "^7.7.6",
     "@types/sanitize-html": "^2.8.0",
     "@types/toastr": "^2.1.39",
     "@types/uuid": "^3.3.2",
diff --git a/yarn.lock b/yarn.lock
index a2636e0df..d46207b2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3004,21 +3004,6 @@
   dependencies:
     "@lezer/common" "^1.0.0"
 
-"@lineup-lite/components@~1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@lineup-lite/components/-/components-1.6.0.tgz#e1a9d368e1c3851f312a3e667e8f3eda52d9f0fc"
-  integrity sha512-DVif6MrAYBYLok5pUGtWBoVRxyCvb6ZOmGrLm3B4wxdo1lh2Gw8Io7cCsXfat2BdUsbtCJwUh9e+NbaqDWGNGA==
-  dependencies:
-    "@sgratzl/boxplots" "^1.2.2"
-
-"@lineup-lite/hooks@^1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@lineup-lite/hooks/-/hooks-1.6.0.tgz#d4e7fbb6912b88e5bd31d98c52f183f11424f48d"
-  integrity sha512-PWWN9/va4TaCwx6wcE98swaCk385YQr7Bjgl7mnRvYNfP7m3JlHk7gASBQXNl6FLJrs98uyTOW032+OZwBYu5A==
-  dependencies:
-    "@lineup-lite/components" "~1.6.0"
-    date-fns "^2.21.3"
-
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
@@ -3363,11 +3348,6 @@
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.18.0.tgz#4f3cebe093dd436eeaff633809bf0f68f4f9d2ee"
   integrity sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==
 
-"@sgratzl/boxplots@^1.2.2":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@sgratzl/boxplots/-/boxplots-1.3.0.tgz#c9063d98e33a15f880cf4bd3531be71497e2a94e"
-  integrity sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA==
-
 "@simbathesailor/use-what-changed@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@simbathesailor/use-what-changed/-/use-what-changed-2.0.0.tgz#7f82d78f92c8588b5fadd702065dde93bd781403"
@@ -4521,6 +4501,18 @@
     "@svgr/plugin-jsx" "^6.2.1"
     "@svgr/plugin-svgo" "^6.2.0"
 
+"@tanstack/react-table@^8.8.5":
+  version "8.8.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-table/-/react-table-8.8.5.tgz#d345fd855bb8067cd32b7a9b5231bdefd9cbde55"
+  integrity sha512-g/t21E/ICHvaCOJOhsDNr5QaB/6aDQEHFbx/YliwwU/CJThMqG+dS28vnToIBV/5MBgpeXoGRi2waDJVJlZrtg==
+  dependencies:
+    "@tanstack/table-core" "8.8.5"
+
+"@tanstack/table-core@8.8.5":
+  version "8.8.5"
+  resolved "https://registry.yarnpkg.com/@tanstack/table-core/-/table-core-8.8.5.tgz#4d75b452a9989a273174df1b9249157292a15bd5"
+  integrity sha512-Xnwa1qxpgvSW7ozLiexmKp2PIYcLBiY/IizbdGriYCL6OOHuZ9baRhrrH51zjyz+61ly6K59rmt6AI/3RR+97Q==
+
 "@testing-library/dom@^8.0.0":
   version "8.11.3"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.11.3.tgz#38fd63cbfe14557021e88982d931e33fb7c1a808"
@@ -4988,13 +4980,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-table@^7.7.6":
-  version "7.7.9"
-  resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.9.tgz#ea82875775fc6ee71a28408dcc039396ae067c92"
-  integrity sha512-ejP/J20Zlj9VmuLh73YgYkW2xOSFTW39G43rPH93M4mYWdMmqv66lCCr+axZpkdtlNLGjvMG2CwzT4S6abaeGQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-transition-group@^4.4.0":
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
@@ -8123,11 +8108,6 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^2.21.3:
-  version "2.28.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.28.0.tgz#9570d656f5fc13143e50c975a3b6bbeb46cd08b2"
-  integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
-
 date-fns@^2.29.3:
   version "2.29.3"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.3.tgz#27402d2fc67eb442b511b70bbdf98e6411cd68a8"
@@ -15216,11 +15196,6 @@ react-style-singleton@^2.2.0:
     invariant "^2.2.4"
     tslib "^2.0.0"
 
-react-table@^7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/react-table/-/react-table-7.7.0.tgz#e2ce14d7fe3a559f7444e9ecfe8231ea8373f912"
-  integrity sha512-jBlj70iBwOTvvImsU9t01LjFjy4sXEtclBovl3mTiqjz23Reu0DKnRza4zlLtOPACx6j2/7MrQIthIK1Wi+LIA==
-
 react-test-renderer@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-17.0.2.tgz#4cd4ae5ef1ad5670fc0ef776e8cc7e1231d9866c"