refactor(containers): replace containers datatable with react component [EE-1815] (#6059)

2025-08-04 21:35:23 +02:00 · 2022-01-04 14:16:09 +02:00 · 2022-01-04 14:16:09 +02:00 · 07e7fbd270
commit 07e7fbd270
parent 65821aaccc
80 changed files with 3614 additions and 1084 deletions
--- a/app/docker/__module.js
+++ b/app/docker/__module.js
@ -1,4 +1,8 @@
-angular.module('portainer.docker', ['portainer.app']).config([
+import angular from 'angular';
+
+import containersModule from './containers';
+
+angular.module('portainer.docker', ['portainer.app', containersModule]).config([
  '$stateRegistryProvider',
  function ($stateRegistryProvider) {
    'use strict';
--- a/app/docker/components/container-quick-actions/ContainerQuickActions.module.css
+++ b/app/docker/components/container-quick-actions/ContainerQuickActions.module.css
@ -0,0 +1,3 @@
+.root {
+  display: inline-flex;
+}
--- a/app/docker/components/container-quick-actions/ContainerQuickActions.tsx
+++ b/app/docker/components/container-quick-actions/ContainerQuickActions.tsx
@ -0,0 +1,140 @@
+import clsx from 'clsx';
+
+import { Authorized } from '@/portainer/hooks/useUser';
+import { Link } from '@/portainer/components/Link';
+import { react2angular } from '@/react-tools/react2angular';
+import { DockerContainerStatus } from '@/docker/containers/types';
+
+import styles from './ContainerQuickActions.module.css';
+
+interface QuickActionsState {
+  showQuickActionAttach: boolean;
+  showQuickActionExec: boolean;
+  showQuickActionInspect: boolean;
+  showQuickActionLogs: boolean;
+  showQuickActionStats: boolean;
+}
+
+interface Props {
+  taskId?: string;
+  containerId?: string;
+  nodeName: string;
+  state: QuickActionsState;
+  status: DockerContainerStatus;
+}
+
+export function ContainerQuickActions({
+  taskId,
+  containerId,
+  nodeName,
+  state,
+  status,
+}: Props) {
+  if (taskId) {
+    return <TaskQuickActions taskId={taskId} state={state} />;
+  }
+
+  const isActive = ['starting', 'running', 'healthy', 'unhealthy'].includes(
+    status
+  );
+
+  return (
+    <div className={clsx('space-x-1', styles.root)}>
+      {state.showQuickActionLogs && (
+        <Authorized authorizations="DockerContainerLogs">
+          <Link
+            to="docker.containers.container.logs"
+            params={{ id: containerId, nodeName }}
+            title="Logs"
+          >
+            <i className="fa fa-file-alt space-right" aria-hidden="true" />
+          </Link>
+        </Authorized>
+      )}
+
+      {state.showQuickActionInspect && (
+        <Authorized authorizations="DockerContainerInspect">
+          <Link
+            to="docker.containers.container.inspect"
+            params={{ id: containerId, nodeName }}
+            title="Inspect"
+          >
+            <i className="fa fa-info-circle space-right" aria-hidden="true" />
+          </Link>
+        </Authorized>
+      )}
+
+      {state.showQuickActionStats && isActive && (
+        <Authorized authorizations="DockerContainerStats">
+          <Link
+            to="docker.containers.container.stats"
+            params={{ id: containerId, nodeName }}
+            title="Stats"
+          >
+            <i className="fa fa-chart-area space-right" aria-hidden="true" />
+          </Link>
+        </Authorized>
+      )}
+
+      {state.showQuickActionExec && isActive && (
+        <Authorized authorizations="DockerExecStart">
+          <Link
+            to="docker.containers.container.exec"
+            params={{ id: containerId, nodeName }}
+            title="Exec Console"
+          >
+            <i className="fa fa-terminal space-right" aria-hidden="true" />
+          </Link>
+        </Authorized>
+      )}
+
+      {state.showQuickActionAttach && isActive && (
+        <Authorized authorizations="DockerContainerAttach">
+          <Link
+            to="docker.containers.container.attach"
+            params={{ id: containerId, nodeName }}
+            title="Attach Console"
+          >
+            <i className="fa fa-plug space-right" aria-hidden="true" />
+          </Link>
+        </Authorized>
+      )}
+    </div>
+  );
+}
+
+interface TaskProps {
+  taskId: string;
+  state: QuickActionsState;
+}
+
+function TaskQuickActions({ taskId, state }: TaskProps) {
+  return (
+    <div className={clsx('space-x-1', styles.root)}>
+      {state.showQuickActionLogs && (
+        <Authorized authorizations="DockerTaskLogs">
+          <Link
+            to="docker.tasks.task.logs"
+            params={{ id: taskId }}
+            title="Logs"
+          >
+            <i className="fa fa-file-alt space-right" aria-hidden="true" />
+          </Link>
+        </Authorized>
+      )}
+
+      {state.showQuickActionInspect && (
+        <Authorized authorizations="DockerTaskInspect">
+          <Link to="docker.tasks.task" params={{ id: taskId }} title="Inspect">
+            <i className="fa fa-info-circle space-right" aria-hidden="true" />
+          </Link>
+        </Authorized>
+      )}
+    </div>
+  );
+}
+
+export const ContainerQuickActionsAngular = react2angular(
+  ContainerQuickActions,
+  ['taskId', 'containerId', 'nodeName', 'state', 'status']
+);
--- a/app/docker/components/container-quick-actions/containerQuickActions.html
+++ b/app/docker/components/container-quick-actions/containerQuickActions.html
@ -1,65 +0,0 @@
-<div class="btn-group btn-group-xs" role="group" aria-label="..." style="display: inline-flex;">
-  <a
-    authorization="DockerContainerLogs"
-    ng-if="$ctrl.state.showQuickActionLogs && $ctrl.taskId === undefined"
-    style="margin: 0 2.5px;"
-    ui-sref="docker.containers.container.logs({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Logs"
-  >
-    <i class="fa fa-file-alt space-right" aria-hidden="true"></i>
-  </a>
-  <a
-    authorization="DockerTaskLogs"
-    ng-if="$ctrl.state.showQuickActionLogs && $ctrl.taskId !== undefined"
-    style="margin: 0 2.5px;"
-    ui-sref="docker.tasks.task.logs({id: $ctrl.taskId})"
-    title="Logs"
-  >
-    <i class="fa fa-file-alt space-right" aria-hidden="true"></i>
-  </a>
-  <a
-    authorization="DockerContainerInspect"
-    ng-if="$ctrl.state.showQuickActionInspect && $ctrl.taskId === undefined"
-    style="margin: 0 2.5px;"
-    ui-sref="docker.containers.container.inspect({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Inspect"
-  >
-    <i class="fa fa-info-circle space-right" aria-hidden="true"></i>
-  </a>
-  <a
-    authorization="DockerTaskInspect"
-    ng-if="$ctrl.state.showQuickActionInspect && $ctrl.taskId !== undefined"
-    style="margin: 0 2.5px;"
-    ui-sref="docker.tasks.task({id: $ctrl.taskId})"
-    title="Inspect"
-  >
-    <i class="fa fa-info-circle space-right" aria-hidden="true"></i>
-  </a>
-  <a
-    authorization="DockerContainerStats"
-    ng-if="$ctrl.state.showQuickActionStats && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
-    style="margin: 0 2.5px;"
-    ui-sref="docker.containers.container.stats({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Stats"
-  >
-    <i class="fa fa-chart-area space-right" aria-hidden="true"></i>
-  </a>
-  <a
-    authorization="DockerExecStart"
-    ng-if="$ctrl.state.showQuickActionExec && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
-    style="margin: 0 2.5px;"
-    ui-sref="docker.containers.container.exec({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Exec Console"
-  >
-    <i class="fa fa-terminal space-right" aria-hidden="true"></i>
-  </a>
-  <a
-    authorization="DockerContainerAttach"
-    ng-if="$ctrl.state.showQuickActionAttach && ['starting', 'running', 'healthy', 'unhealthy'].indexOf($ctrl.status) !== -1 && $ctrl.taskId === undefined"
-    style="margin: 0 2.5px;"
-    ui-sref="docker.containers.container.attach({id: $ctrl.containerId, nodeName: $ctrl.nodeName})"
-    title="Attach Console"
-  >
-    <i class="fa fa-plug space-right" aria-hidden="true"></i>
-  </a>
-</div>
--- a/app/docker/components/container-quick-actions/containerQuickActions.js
+++ b/app/docker/components/container-quick-actions/containerQuickActions.js
@ -1,10 +0,0 @@
-angular.module('portainer.docker').component('containerQuickActions', {
-  templateUrl: './containerQuickActions.html',
-  bindings: {
-    containerId: '<',
-    nodeName: '<',
-    status: '<',
-    state: '<',
-    taskId: '<',
-  },
-});
--- a/app/docker/components/container-quick-actions/index.ts
+++ b/app/docker/components/container-quick-actions/index.ts
@ -0,0 +1,7 @@
+import angular from 'angular';
+
+import { ContainerQuickActionsAngular } from './ContainerQuickActions';
+
+angular
+  .module('portainer.docker')
+  .component('containerQuickActions', ContainerQuickActionsAngular);
--- a/app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.html
+++ b/app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.html
@ -1,73 +0,0 @@
-<div
-  class="actionBar"
-  authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
->
-  <div class="btn-group" role="group" aria-label="...">
-    <button
-      authorization="DockerContainerStart"
-      type="button"
-      class="btn btn-sm btn-success"
-      ng-click="$ctrl.startAction($ctrl.selectedItems)"
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noStoppedItemsSelected"
-    >
-      <i class="fa fa-play space-right" aria-hidden="true"></i>Start
-    </button>
-    <button
-      authorization="DockerContainerStop"
-      type="button"
-      class="btn btn-sm btn-danger"
-      ng-click="$ctrl.stopAction($ctrl.selectedItems)"
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected"
-    >
-      <i class="fa fa-stop space-right" aria-hidden="true"></i>Stop
-    </button>
-    <button
-      authorization="DockerContainerKill"
-      type="button"
-      class="btn btn-sm btn-danger"
-      ng-click="$ctrl.killAction($ctrl.selectedItems)"
-      ng-disabled="$ctrl.selectedItemCount === 0"
-    >
-      <i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill
-    </button>
-    <button
-      authorization="DockerContainerRestart"
-      type="button"
-      class="btn btn-sm btn-primary"
-      ng-click="$ctrl.restartAction($ctrl.selectedItems)"
-      ng-disabled="$ctrl.selectedItemCount === 0"
-    >
-      <i class="fa fa-sync space-right" aria-hidden="true"></i>Restart
-    </button>
-    <button
-      authorization="DockerContainerPause"
-      type="button"
-      class="btn btn-sm btn-primary"
-      ng-click="$ctrl.pauseAction($ctrl.selectedItems)"
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noRunningItemsSelected"
-    >
-      <i class="fa fa-pause space-right" aria-hidden="true"></i>Pause
-    </button>
-    <button
-      authorization="DockerContainerUnpause"
-      type="button"
-      class="btn btn-sm btn-primary"
-      ng-click="$ctrl.resumeAction($ctrl.selectedItems)"
-      ng-disabled="$ctrl.selectedItemCount === 0 || $ctrl.noPausedItemsSelected"
-    >
-      <i class="fa fa-play space-right" aria-hidden="true"></i>Resume
-    </button>
-    <button
-      authorization="DockerContainerDelete"
-      type="button"
-      class="btn btn-sm btn-danger"
-      ng-disabled="$ctrl.selectedItemCount === 0"
-      ng-click="$ctrl.removeAction($ctrl.selectedItems)"
-    >
-      <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
-    </button>
-  </div>
-  <button authorization="DockerContainerCreate" type="button" class="btn btn-sm btn-primary" ui-sref="docker.containers.new" ng-if="$ctrl.showAddAction">
-    <i class="fa fa-plus space-right" aria-hidden="true"></i>Add container
-  </button>
-</div>
--- a/app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.js
+++ b/app/docker/components/datatables/containers-datatable/actions/containersDatatableActions.js
@ -1,12 +0,0 @@
-angular.module('portainer.docker').component('containersDatatableActions', {
-  templateUrl: './containersDatatableActions.html',
-  controller: 'ContainersDatatableActionsController',
-  bindings: {
-    selectedItems: '=',
-    selectedItemCount: '=',
-    noStoppedItemsSelected: '=',
-    noRunningItemsSelected: '=',
-    noPausedItemsSelected: '=',
-    showAddAction: '<',
-  },
-});
--- a/app/docker/components/datatables/containers-datatable/actions/containersDatatableActionsController.js
+++ b/app/docker/components/datatables/containers-datatable/actions/containersDatatableActionsController.js
@ -1,112 +0,0 @@
-angular.module('portainer.docker').controller('ContainersDatatableActionsController', [
-  '$state',
-  'ContainerService',
-  'ModalService',
-  'Notifications',
-  'HttpRequestHelper',
-  function ($state, ContainerService, ModalService, Notifications, HttpRequestHelper) {
-    this.startAction = function (selectedItems) {
-      var successMessage = 'Container successfully started';
-      var errorMessage = 'Unable to start container';
-      executeActionOnContainerList(selectedItems, ContainerService.startContainer, successMessage, errorMessage);
-    };
-
-    this.stopAction = function (selectedItems) {
-      var successMessage = 'Container successfully stopped';
-      var errorMessage = 'Unable to stop container';
-      executeActionOnContainerList(selectedItems, ContainerService.stopContainer, successMessage, errorMessage);
-    };
-
-    this.restartAction = function (selectedItems) {
-      var successMessage = 'Container successfully restarted';
-      var errorMessage = 'Unable to restart container';
-      executeActionOnContainerList(selectedItems, ContainerService.restartContainer, successMessage, errorMessage);
-    };
-
-    this.killAction = function (selectedItems) {
-      var successMessage = 'Container successfully killed';
-      var errorMessage = 'Unable to kill container';
-      executeActionOnContainerList(selectedItems, ContainerService.killContainer, successMessage, errorMessage);
-    };
-
-    this.pauseAction = function (selectedItems) {
-      var successMessage = 'Container successfully paused';
-      var errorMessage = 'Unable to pause container';
-      executeActionOnContainerList(selectedItems, ContainerService.pauseContainer, successMessage, errorMessage);
-    };
-
-    this.resumeAction = function (selectedItems) {
-      var successMessage = 'Container successfully resumed';
-      var errorMessage = 'Unable to resume container';
-      executeActionOnContainerList(selectedItems, ContainerService.resumeContainer, successMessage, errorMessage);
-    };
-
-    this.removeAction = function (selectedItems) {
-      var isOneContainerRunning = false;
-      for (var i = 0; i < selectedItems.length; i++) {
-        var container = selectedItems[i];
-        if (container.State === 'running') {
-          isOneContainerRunning = true;
-          break;
-        }
-      }
-
-      var title = 'You are about to remove one or more container.';
-      if (isOneContainerRunning) {
-        title = 'You are about to remove one or more running container.';
-      }
-
-      ModalService.confirmContainerDeletion(title, function (result) {
-        if (!result) {
-          return;
-        }
-        var cleanVolumes = false;
-        if (result[0]) {
-          cleanVolumes = true;
-        }
-        removeSelectedContainers(selectedItems, cleanVolumes);
-      });
-    };
-
-    function executeActionOnContainerList(containers, action, successMessage, errorMessage) {
-      var actionCount = containers.length;
-      angular.forEach(containers, function (container) {
-        HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
-        action(container.Id)
-          .then(function success() {
-            Notifications.success(successMessage, container.Names[0]);
-          })
-          .catch(function error(err) {
-            errorMessage = errorMessage + ':' + container.Names[0];
-            Notifications.error('Failure', err, errorMessage);
-          })
-          .finally(function final() {
-            --actionCount;
-            if (actionCount === 0) {
-              $state.reload();
-            }
-          });
-      });
-    }
-
-    function removeSelectedContainers(containers, cleanVolumes) {
-      var actionCount = containers.length;
-      angular.forEach(containers, function (container) {
-        HttpRequestHelper.setPortainerAgentTargetHeader(container.NodeName);
-        ContainerService.remove(container, cleanVolumes)
-          .then(function success() {
-            Notifications.success('Container successfully removed', container.Names[0]);
-          })
-          .catch(function error(err) {
-            Notifications.error('Failure', err, 'Unable to remove container');
-          })
-          .finally(function final() {
-            --actionCount;
-            if (actionCount === 0) {
-              $state.reload();
-            }
-          });
-      });
-    }
-  },
-]);
--- a/app/docker/components/datatables/containers-datatable/containersDatatable.html
+++ b/app/docker/components/datatables/containers-datatable/containersDatatable.html
@ -1,312 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
-        <div class="settings">
-          <datatable-columns-visibility columns="$ctrl.columnVisibility.columns" on-change="($ctrl.onColumnVisibilityChange)"></datatable-columns-visibility>
-
-          <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
-            <span uib-dropdown-toggle><i class="fa fa-cog" aria-hidden="true"></i> Settings</span>
-            <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
-              <div class="tableMenu">
-                <div class="menuHeader">
-                  Table settings
-                </div>
-                <div class="menuContent">
-                  <div class="md-checkbox">
-                    <input id="setting_container_trunc" type="checkbox" ng-model="$ctrl.settings.truncateContainerName" ng-change="$ctrl.onSettingsContainerNameTruncateChange()" />
-                    <label for="setting_container_trunc">Truncate container name</label>
-                  </div>
-                  <div>
-                    <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
-                      <label for="setting_auto_refresh">Auto refresh</label>
-                    </div>
-                    <div ng-if="$ctrl.settings.repeater.autoRefresh">
-                      <label for="settings_refresh_rate">
-                        Refresh rate
-                      </label>
-                      <select id="settings_refresh_rate" ng-model="$ctrl.settings.repeater.refreshRate" ng-change="$ctrl.onSettingsRepeaterChange()" class="small-select">
-                        <option value="10">10s</option>
-                        <option value="30">30s</option>
-                        <option value="60">1min</option>
-                        <option value="120">2min</option>
-                        <option value="300">5min</option>
-                      </select>
-                      <span>
-                        <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-top: 7px; display: none;"></i>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-                <div authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach">
-                  <div class="menuHeader">
-                    Quick actions
-                  </div>
-                  <div class="menuContent">
-                    <div class="md-checkbox" authorization="DockerContainerStats">
-                      <input id="setting_show_stats" type="checkbox" ng-model="$ctrl.settings.showQuickActionStats" ng-change="$ctrl.onSettingsQuickActionChange()" />
-                      <label for="setting_show_stats">Stats</label>
-                    </div>
-                    <div class="md-checkbox" authorization="DockerContainerLogs">
-                      <input id="setting_show_logs" type="checkbox" ng-model="$ctrl.settings.showQuickActionLogs" ng-change="$ctrl.onSettingsQuickActionChange()" />
-                      <label for="setting_show_logs">Logs</label>
-                    </div>
-                    <div class="md-checkbox" authorization="DockerExecStart">
-                      <input id="setting_show_console" type="checkbox" ng-model="$ctrl.settings.showQuickActionExec" ng-change="$ctrl.onSettingsQuickActionChange()" />
-                      <label for="setting_show_console">Console</label>
-                    </div>
-                    <div class="md-checkbox" authorization="DockerContainerInspect">
-                      <input id="setting_show_inspect" type="checkbox" ng-model="$ctrl.settings.showQuickActionInspect" ng-change="$ctrl.onSettingsQuickActionChange()" />
-                      <label for="setting_show_inspect">Inspect</label>
-                    </div>
-                    <div class="md-checkbox" authorization="DockerContainerAttach">
-                      <input id="setting_show_attach" type="checkbox" ng-model="$ctrl.settings.showQuickActionAttach" ng-change="$ctrl.onSettingsQuickActionChange()" />
-                      <label for="setting_show_attach">Attach</label>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.settings.open = false;">Close</a>
-                </div>
-              </div>
-            </div>
-          </span>
-        </div>
-      </div>
-      <containers-datatable-actions
-        ng-if="!$ctrl.offlineMode"
-        selected-items="$ctrl.state.selectedItems"
-        selected-item-count="$ctrl.state.selectedItemCount"
-        no-stopped-items-selected="$ctrl.state.noStoppedItemsSelected"
-        no-running-items-selected="$ctrl.state.noRunningItemsSelected"
-        no-paused-items-selected="$ctrl.state.noPausedItemsSelected"
-        show-add-action="$ctrl.showAddAction"
-      ></containers-datatable-actions>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          focus-if="!$ctrl.notAutoFocus"
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
-      <div class="table-responsive">
-        <table class="table table-hover table-filters nowrap-cells">
-          <thead>
-            <tr>
-              <th>
-                <span
-                  class="md-checkbox"
-                  ng-if="!$ctrl.offlineMode"
-                  authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
-                >
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
-                  <label for="select_all"></label>
-                </span>
-                <a ng-click="$ctrl.changeOrderBy('Names')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Names' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Names' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-              <th uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.filters.state.open" ng-show="$ctrl.columnVisibility.columns.state.display">
-                <a ng-click="$ctrl.changeOrderBy('Status')">
-                  State
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></i>
-                </a>
-                <div>
-                  <span uib-dropdown-toggle class="table-filter" ng-if="!$ctrl.filters.state.enabled">Filter <i class="fa fa-filter" aria-hidden="true"></i></span>
-                  <span uib-dropdown-toggle class="table-filter filter-active" ng-if="$ctrl.filters.state.enabled">Filter <i class="fa fa-check" aria-hidden="true"></i></span>
-                </div>
-                <div class="dropdown-menu" uib-dropdown-menu>
-                  <div class="tableMenu">
-                    <div class="menuHeader">
-                      Filter by state
-                    </div>
-                    <div class="menuContent">
-                      <div class="md-checkbox" ng-repeat="filter in $ctrl.filters.state.values track by $index">
-                        <input id="filter_state_{{ $index }}" type="checkbox" ng-model="filter.display" ng-change="$ctrl.onStateFilterChange()" />
-                        <label for="filter_state_{{ $index }}">{{ filter.label }}</label>
-                      </div>
-                    </div>
-                    <div>
-                      <a type="button" class="btn btn-default btn-sm" ng-click="$ctrl.filters.state.open = false;">Close</a>
-                    </div>
-                  </div>
-                </div>
-              </th>
-              <th
-                ng-if="
-                  $ctrl.settings.showQuickActionStats ||
-                  $ctrl.settings.showQuickActionLogs ||
-                  $ctrl.settings.showQuickActionExec ||
-                  $ctrl.settings.showQuickActionAttach ||
-                  $ctrl.settings.showQuickActionInspect
-                "
-                ng-show="$ctrl.columnVisibility.columns.actions.display"
-                authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs, DockerContainerAttach"
-              >
-                Quick actions
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.stack.display">
-                <a ng-click="$ctrl.changeOrderBy('StackName')">
-                  Stack
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.image.display">
-                <a ng-click="$ctrl.changeOrderBy('Image')">
-                  Image
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.created.display">
-                <a ng-click="$ctrl.changeOrderBy('Created')">
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Created' && $ctrl.state.reverseOrder"></i>
-                  Created
-                </a>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.ip.display">
-                <a ng-click="$ctrl.changeOrderBy('IP')">
-                  IP Address
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'IP' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-              <th ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">
-                <a ng-click="$ctrl.changeOrderBy('NodeName')">
-                  Host
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.ports.display">
-                <a ng-click="$ctrl.changeOrderBy('Ports')">
-                  Published Ports
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Ports' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-              <th ng-show="$ctrl.columnVisibility.columns.ownership.display">
-                <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
-                  Ownership
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></i>
-                </a>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter: $ctrl.applyFilters | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-              ng-class="{ active: item.Checked }"
-            >
-              <td>
-                <span
-                  class="md-checkbox"
-                  ng-if="!$ctrl.offlineMode"
-                  authorization="DockerContainerStart, DockerContainerStop, DockerContainerKill, DockerContainerRestart, DockerContainerPause, DockerContainerUnpause, DockerContainerDelete, DockerContainerCreate"
-                >
-                  <input id="select_{{ $index }}" type="checkbox" ng-model="item.Checked" ng-click="$ctrl.selectItem(item, $event)" ng-disabled="!$ctrl.allowSelection(item)" />
-                  <label for="select_{{ $index }}"></label>
-                </span>
-                <a ng-if="!$ctrl.offlineMode" ui-sref="docker.containers.container({ id: item.Id, nodeName: item.NodeName })" title="{{ item | containername }}">{{
-                  item | containername | truncate: $ctrl.settings.containerNameTruncateSize
-                }}</a>
-                <span ng-if="$ctrl.offlineMode">{{ item | containername | truncate: $ctrl.settings.containerNameTruncateSize }}</span>
-              </td>
-              <td ng-show="$ctrl.columnVisibility.columns.state.display">
-                <span
-                  ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) !== -1"
-                  class="label label-{{ item.Status | containerstatusbadge }} interactive"
-                  uib-tooltip="This container has a health check"
-                  >{{ item.Status }}</span
-                >
-                <span ng-if="['starting', 'healthy', 'unhealthy'].indexOf(item.Status) === -1" class="label label-{{ item.Status | containerstatusbadge }}">{{ item.Status }}</span>
-              </td>
-              <td
-                ng-if="
-                  !$ctrl.offlineMode &&
-                  ($ctrl.settings.showQuickActionStats ||
-                    $ctrl.settings.showQuickActionLogs ||
-                    $ctrl.settings.showQuickActionExec ||
-                    $ctrl.settings.showQuickActionAttach ||
-                    $ctrl.settings.showQuickActionInspect)
-                "
-                ng-show="$ctrl.columnVisibility.columns.actions.display"
-                authorization="DockerContainerStats, DockerContainerLogs, DockerExecStart, DockerContainerInspect, DockerTaskInspect, DockerTaskLogs"
-              >
-                <container-quick-actions container-id="item.Id" node-name="item.NodeName" status="item.Status" state="$ctrl.settings"></container-quick-actions>
-              </td>
-              <td ng-if="$ctrl.offlineMode"> </td>
-              <td ng-show="$ctrl.columnVisibility.columns.stack.display">{{ item.StackName ? item.StackName : '-' }}</td>
-              <td ng-show="$ctrl.columnVisibility.columns.image.display">
-                <a ng-if="!$ctrl.offlineMode" ui-sref="docker.images.image({ id: item.Image })">{{ item.Image | trimshasum }}</a>
-                <span ng-if="$ctrl.offlineMode">{{ item.Image | trimshasum }}</span>
-              </td>
-              <td ng-show="$ctrl.columnVisibility.columns.created.display">
-                {{ item.Created | getisodatefromtimestamp }}
-              </td>
-              <td ng-show="$ctrl.columnVisibility.columns.ip.display">{{ item.IP ? item.IP : '-' }}</td>
-              <td ng-if="$ctrl.showHostColumn" ng-show="$ctrl.columnVisibility.columns.host.display">{{ item.NodeName ? item.NodeName : '-' }}</td>
-              <td ng-show="$ctrl.columnVisibility.columns.ports.display">
-                <a
-                  ng-if="item.Ports.length > 0"
-                  ng-repeat="p in item.Ports | unique: 'public'"
-                  class="image-tag"
-                  ng-href="http://{{ $ctrl.endpointPublicUrl || p.host }}:{{ p.public }}"
-                  target="_blank"
-                >
-                  <i class="fa fa-external-link-alt" aria-hidden="true"></i> {{ p.public }}:{{ p.private }}
-                </a>
-                <span ng-if="item.Ports.length == 0">-</span>
-              </td>
-              <td ng-show="$ctrl.columnVisibility.columns.ownership.display">
-                <span>
-                  <i ng-class="item.ResourceControl.Ownership | ownershipicon" aria-hidden="true"></i>
-                  {{ item.ResourceControl.Ownership ? item.ResourceControl.Ownership : item.ResourceControl.Ownership = $ctrl.RCO.ADMINISTRATORS }}
-                </span>
-              </td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="9" class="text-center text-muted">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="9" class="text-center text-muted">No container available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="infoBar" ng-if="$ctrl.state.selectedItemCount !== 0"> {{ $ctrl.state.selectedItemCount }} item(s) selected </div>
-        <div class="paginationControls">
-          <form class="form-inline">
-            <span class="limitSelector">
-              <span style="margin-right: 5px;">
-                Items per page
-              </span>
-              <select class="form-control" ng-model="$ctrl.state.paginatedItemLimit" ng-change="$ctrl.changePaginationLimit()" data-cy="component-paginationSelect">
-                <option value="0">All</option>
-                <option value="10">10</option>
-                <option value="25">25</option>
-                <option value="50">50</option>
-                <option value="100">100</option>
-              </select>
-            </span>
-            <dir-pagination-controls max-size="5"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>
--- a/app/docker/components/datatables/containers-datatable/containersDatatable.js
+++ b/app/docker/components/datatables/containers-datatable/containersDatatable.js
@ -1,18 +0,0 @@
-angular.module('portainer.docker').component('containersDatatable', {
-  templateUrl: './containersDatatable.html',
-  controller: 'ContainersDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    showHostColumn: '<',
-    showAddAction: '<',
-    offlineMode: '<',
-    refreshCallback: '<',
-    notAutoFocus: '<',
-    endpointPublicUrl: '<',
-  },
-});
--- a/app/docker/components/datatables/containers-datatable/containersDatatableController.js
+++ b/app/docker/components/datatables/containers-datatable/containersDatatableController.js
@ -1,210 +0,0 @@
-import _ from 'lodash-es';
-
-angular.module('portainer.docker').controller('ContainersDatatableController', [
-  '$scope',
-  '$controller',
-  'DatatableService',
-  function ($scope, $controller, DatatableService) {
-    angular.extend(this, $controller('GenericDatatableController', { $scope: $scope }));
-
-    var ctrl = this;
-
-    this.state = Object.assign(this.state, {
-      noStoppedItemsSelected: true,
-      noRunningItemsSelected: true,
-      noPausedItemsSelected: true,
-    });
-
-    this.settings = Object.assign(this.settings, {
-      truncateContainerName: true,
-      containerNameTruncateSize: 32,
-      showQuickActionStats: true,
-      showQuickActionLogs: true,
-      showQuickActionExec: true,
-      showQuickActionInspect: true,
-      showQuickActionAttach: false,
-    });
-
-    this.filters = {
-      state: {
-        open: false,
-        enabled: false,
-        values: [],
-      },
-    };
-
-    this.columnVisibility = {
-      columns: {
-        state: {
-          label: 'State',
-          display: true,
-        },
-        actions: {
-          label: 'Quick Actions',
-          display: true,
-        },
-        stack: {
-          label: 'Stack',
-          display: true,
-        },
-        image: {
-          label: 'Image',
-          display: true,
-        },
-        created: {
-          label: 'Created',
-          display: true,
-        },
-        ip: {
-          label: 'IP Address',
-          display: true,
-        },
-        host: {
-          label: 'Host',
-          display: true,
-        },
-        ports: {
-          label: 'Published Ports',
-          display: true,
-        },
-        ownership: {
-          label: 'Ownership',
-          display: true,
-        },
-      },
-    };
-
-    this.allowSelection = function (item) {
-      return !item.IsPortainer;
-    };
-
-    this.onColumnVisibilityChange = onColumnVisibilityChange.bind(this);
-    function onColumnVisibilityChange(columns) {
-      this.columnVisibility.columns = columns;
-      DatatableService.setColumnVisibilitySettings(this.tableKey, this.columnVisibility);
-    }
-
-    this.onSelectionChanged = function () {
-      this.updateSelectionState();
-    };
-
-    this.updateSelectionState = function () {
-      this.state.noStoppedItemsSelected = true;
-      this.state.noRunningItemsSelected = true;
-      this.state.noPausedItemsSelected = true;
-
-      for (var i = 0; i < this.dataset.length; i++) {
-        var item = this.dataset[i];
-        if (item.Checked) {
-          this.updateSelectionStateBasedOnItemStatus(item);
-        }
-      }
-    };
-
-    this.updateSelectionStateBasedOnItemStatus = function (item) {
-      if (item.Status === 'paused') {
-        this.state.noPausedItemsSelected = false;
-      } else if (['stopped', 'created'].indexOf(item.Status) !== -1) {
-        this.state.noStoppedItemsSelected = false;
-      } else if (['running', 'healthy', 'unhealthy', 'starting'].indexOf(item.Status) !== -1) {
-        this.state.noRunningItemsSelected = false;
-      }
-    };
-
-    this.applyFilters = function (value) {
-      var container = value;
-      var filters = ctrl.filters;
-      for (var i = 0; i < filters.state.values.length; i++) {
-        var filter = filters.state.values[i];
-        if (container.Status === filter.label && filter.display) {
-          return true;
-        }
-      }
-      return false;
-    };
-
-    this.onStateFilterChange = function () {
-      var filters = this.filters.state.values;
-      var filtered = false;
-      for (var i = 0; i < filters.length; i++) {
-        var filter = filters[i];
-        if (!filter.display) {
-          filtered = true;
-        }
-      }
-      this.filters.state.enabled = filtered;
-    };
-
-    this.onSettingsContainerNameTruncateChange = function () {
-      if (this.settings.truncateContainerName) {
-        this.settings.containerNameTruncateSize = 32;
-      } else {
-        this.settings.containerNameTruncateSize = 256;
-      }
-      DatatableService.setDataTableSettings(this.tableKey, this.settings);
-    };
-
-    this.onSettingsQuickActionChange = function () {
-      DatatableService.setDataTableSettings(this.tableKey, this.settings);
-    };
-
-    this.prepareTableFromDataset = function () {
-      var availableStateFilters = [];
-      for (var i = 0; i < this.dataset.length; i++) {
-        var item = this.dataset[i];
-        availableStateFilters.push({ label: item.Status, display: true });
-      }
-      this.filters.state.values = _.uniqBy(availableStateFilters, 'label');
-    };
-
-    this.updateStoredFilters = function (storedFilters) {
-      var datasetFilters = this.filters.state.values;
-
-      for (var i = 0; i < datasetFilters.length; i++) {
-        var filter = datasetFilters[i];
-        var existingFilter = _.find(storedFilters, ['label', filter.label]);
-        if (existingFilter && !existingFilter.display) {
-          filter.display = existingFilter.display;
-          this.filters.state.enabled = true;
-        }
-      }
-    };
-
-    this.$onInit = function () {
-      this.setDefaults();
-      this.prepareTableFromDataset();
-
-      this.state.orderBy = this.orderBy;
-      var storedOrder = DatatableService.getDataTableOrder(this.tableKey);
-      if (storedOrder !== null) {
-        this.state.reverseOrder = storedOrder.reverse;
-        this.state.orderBy = storedOrder.orderBy;
-      }
-
-      var textFilter = DatatableService.getDataTableTextFilters(this.tableKey);
-      if (textFilter !== null) {
-        this.state.textFilter = textFilter;
-        this.onTextFilterChange();
-      }
-
-      var storedFilters = DatatableService.getDataTableFilters(this.tableKey);
-      if (storedFilters !== null) {
-        this.filters = storedFilters;
-        this.filters.state.open = false;
-        this.updateStoredFilters(storedFilters.state.values);
-      }
-
-      var storedSettings = DatatableService.getDataTableSettings(this.tableKey);
-      if (storedSettings !== null) {
-        this.settings = storedSettings;
-        this.settings.open = false;
-      }
-      this.onSettingsRepeaterChange();
-
-      var storedColumnVisibility = DatatableService.getColumnVisibilitySettings(this.tableKey);
-      if (storedColumnVisibility !== null) {
-        this.columnVisibility = storedColumnVisibility;
-      }
-    };
-  },
-]);
--- a/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx
+++ b/app/docker/containers/components/ContainersDatatable/ContainersDatatable.tsx
@ -0,0 +1,249 @@
+import { useEffect } from 'react';
+import {
+  useTable,
+  useSortBy,
+  useFilters,
+  useGlobalFilter,
+  usePagination,
+  Row,
+} from 'react-table';
+import { useRowSelectColumn } from '@lineup-lite/hooks';
+
+import { PaginationControls } from '@/portainer/components/pagination-controls';
+import {
+  QuickActionsSettings,
+  buildAction,
+} from '@/portainer/components/datatables/components/QuickActionsSettings';
+import {
+  Table,
+  TableActions,
+  TableContainer,
+  TableHeaderRow,
+  TableRow,
+  TableSettingsMenu,
+  TableTitle,
+  TableTitleActions,
+} from '@/portainer/components/datatables/components';
+import { multiple } from '@/portainer/components/datatables/components/filter-types';
+import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
+import { ColumnVisibilityMenu } from '@/portainer/components/datatables/components/ColumnVisibilityMenu';
+import { useRepeater } from '@/portainer/components/datatables/components/useRepeater';
+import { useDebounce } from '@/portainer/hooks/useDebounce';
+import {
+  useSearchBarContext,
+  SearchBar,
+} from '@/portainer/components/datatables/components/SearchBar';
+import type {
+  ContainersTableSettings,
+  DockerContainer,
+} from '@/docker/containers/types';
+import { useEnvironment } from '@/portainer/environments/useEnvironment';
+import { useRowSelect } from '@/portainer/components/datatables/components/useRowSelect';
+import { Checkbox } from '@/portainer/components/form-components/Checkbox';
+import { TableFooter } from '@/portainer/components/datatables/components/TableFooter';
+import { SelectedRowsCount } from '@/portainer/components/datatables/components/SelectedRowsCount';
+
+import { ContainersDatatableActions } from './ContainersDatatableActions';
+import { ContainersDatatableSettings } from './ContainersDatatableSettings';
+import { useColumns } from './columns';
+
+export interface ContainerTableProps {
+  isAddActionVisible: boolean;
+  dataset: DockerContainer[];
+  onRefresh(): Promise<void>;
+  isHostColumnVisible: boolean;
+  autoFocusSearch: boolean;
+}
+
+export function ContainersDatatable({
+  isAddActionVisible,
+  dataset,
+  onRefresh,
+  isHostColumnVisible,
+  autoFocusSearch,
+}: ContainerTableProps) {
+  const { settings, setTableSettings } =
+    useTableSettings<ContainersTableSettings>();
+  const [searchBarValue, setSearchBarValue] = useSearchBarContext();
+
+  const columns = useColumns();
+
+  const endpoint = useEnvironment();
+
+  useRepeater(settings.autoRefreshRate, onRefresh);
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    page,
+    prepareRow,
+    selectedFlatRows,
+    allColumns,
+    gotoPage,
+    setPageSize,
+    setHiddenColumns,
+    toggleHideColumn,
+    setGlobalFilter,
+    state: { pageIndex, pageSize },
+  } = useTable<DockerContainer>(
+    {
+      defaultCanFilter: false,
+      columns,
+      data: dataset,
+      filterTypes: { multiple },
+      initialState: {
+        pageSize: settings.pageSize || 10,
+        hiddenColumns: settings.hiddenColumns,
+        sortBy: [settings.sortBy],
+        globalFilter: searchBarValue,
+      },
+      isRowSelectable(row: Row<DockerContainer>) {
+        return !row.original.IsPortainer;
+      },
+      selectCheckboxComponent: Checkbox,
+    },
+    useFilters,
+    useGlobalFilter,
+    useSortBy,
+    usePagination,
+    useRowSelect,
+    useRowSelectColumn
+  );
+
+  const debouncedSearchValue = useDebounce(searchBarValue);
+
+  useEffect(() => {
+    setGlobalFilter(debouncedSearchValue);
+  }, [debouncedSearchValue, setGlobalFilter]);
+
+  useEffect(() => {
+    toggleHideColumn('host', !isHostColumnVisible);
+  }, [toggleHideColumn, isHostColumnVisible]);
+
+  const columnsToHide = allColumns.filter((colInstance) => {
+    const columnDef = columns.find((c) => c.id === colInstance.id);
+    return columnDef?.canHide;
+  });
+
+  const actions = [
+    buildAction('logs', 'Logs'),
+    buildAction('inspect', 'Inspect'),
+    buildAction('stats', 'Stats'),
+    buildAction('exec', 'Console'),
+    buildAction('attach', 'Attach'),
+  ];
+
+  const tableProps = getTableProps();
+  const tbodyProps = getTableBodyProps();
+
+  return (
+    <TableContainer>
+      <TableTitle icon="fa-cubes" label="Containers">
+        <TableTitleActions>
+          <ColumnVisibilityMenu
+            columns={columnsToHide}
+            onChange={handleChangeColumnsVisibility}
+            value={settings.hiddenColumns}
+          />
+
+          <TableSettingsMenu
+            quickActions={<QuickActionsSettings actions={actions} />}
+          >
+            <ContainersDatatableSettings />
+          </TableSettingsMenu>
+        </TableTitleActions>
+      </TableTitle>
+
+      <TableActions>
+        <ContainersDatatableActions
+          selectedItems={selectedFlatRows.map((row) => row.original)}
+          isAddActionVisible={isAddActionVisible}
+          endpointId={endpoint.Id}
+        />
+      </TableActions>
+
+      <SearchBar
+        value={searchBarValue}
+        onChange={handleSearchBarChange}
+        autoFocus={autoFocusSearch}
+      />
+
+      <Table
+        className={tableProps.className}
+        role={tableProps.role}
+        style={tableProps.style}
+      >
+        <thead>
+          {headerGroups.map((headerGroup) => {
+            const { key, className, role, style } =
+              headerGroup.getHeaderGroupProps();
+
+            return (
+              <TableHeaderRow<DockerContainer>
+                key={key}
+                className={className}
+                role={role}
+                style={style}
+                headers={headerGroup.headers}
+                onSortChange={handleSortChange}
+              />
+            );
+          })}
+        </thead>
+        <tbody
+          className={tbodyProps.className}
+          role={tbodyProps.role}
+          style={tbodyProps.style}
+        >
+          {page.map((row) => {
+            prepareRow(row);
+            const { key, className, role, style } = row.getRowProps();
+            return (
+              <TableRow<DockerContainer>
+                cells={row.cells}
+                key={key}
+                className={className}
+                role={role}
+                style={style}
+              />
+            );
+          })}
+        </tbody>
+      </Table>
+
+      <TableFooter>
+        <SelectedRowsCount value={selectedFlatRows.length} />
+        <PaginationControls
+          showAll
+          pageLimit={pageSize}
+          page={pageIndex + 1}
+          onPageChange={(p) => gotoPage(p - 1)}
+          totalCount={dataset.length}
+          onPageLimitChange={handlePageSizeChange}
+        />
+      </TableFooter>
+    </TableContainer>
+  );
+
+  function handlePageSizeChange(pageSize: number) {
+    setPageSize(pageSize);
+    setTableSettings((settings) => ({ ...settings, pageSize }));
+  }
+
+  function handleChangeColumnsVisibility(hiddenColumns: string[]) {
+    setHiddenColumns(hiddenColumns);
+    setTableSettings((settings) => ({ ...settings, hiddenColumns }));
+  }
+
+  function handleSearchBarChange(value: string) {
+    setSearchBarValue(value);
+  }
+
+  function handleSortChange(id: string, desc: boolean) {
+    setTableSettings((settings) => ({
+      ...settings,
+      sortBy: { id, desc },
+    }));
+  }
+}
--- a/app/docker/containers/components/ContainersDatatable/ContainersDatatableActions.tsx
+++ b/app/docker/containers/components/ContainersDatatable/ContainersDatatableActions.tsx
@ -0,0 +1,288 @@
+import { useRouter } from '@uirouter/react';
+
+import * as notifications from '@/portainer/services/notifications';
+import { useAuthorizations, Authorized } from '@/portainer/hooks/useUser';
+import { Link } from '@/portainer/components/Link';
+import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';
+import { setPortainerAgentTargetHeader } from '@/portainer/services/http-request.helper';
+import type { ContainerId, DockerContainer } from '@/docker/containers/types';
+import {
+  killContainer,
+  pauseContainer,
+  removeContainer,
+  restartContainer,
+  resumeContainer,
+  startContainer,
+  stopContainer,
+} from '@/docker/containers/containers.service';
+import type { EnvironmentId } from '@/portainer/environments/types';
+import { ButtonGroup, Button } from '@/portainer/components/Button';
+
+type ContainerServiceAction = (
+  endpointId: EnvironmentId,
+  containerId: ContainerId
+) => Promise<void>;
+
+interface Props {
+  selectedItems: DockerContainer[];
+  isAddActionVisible: boolean;
+  endpointId: EnvironmentId;
+}
+
+export function ContainersDatatableActions({
+  selectedItems,
+  isAddActionVisible,
+  endpointId,
+}: Props) {
+  const selectedItemCount = selectedItems.length;
+  const hasPausedItemsSelected = selectedItems.some(
+    (item) => item.Status === 'paused'
+  );
+  const hasStoppedItemsSelected = selectedItems.some((item) =>
+    ['stopped', 'created'].includes(item.Status)
+  );
+  const hasRunningItemsSelected = selectedItems.some((item) =>
+    ['running', 'healthy', 'unhealthy', 'starting'].includes(item.Status)
+  );
+
+  const isAuthorized = useAuthorizations([
+    'DockerContainerStart',
+    'DockerContainerStop',
+    'DockerContainerKill',
+    'DockerContainerRestart',
+    'DockerContainerPause',
+    'DockerContainerUnpause',
+    'DockerContainerDelete',
+    'DockerContainerCreate',
+  ]);
+
+  const router = useRouter();
+
+  if (!isAuthorized) {
+    return null;
+  }
+
+  return (
+    <div className="actionBar">
+      <ButtonGroup>
+        <Authorized authorizations="DockerContainerStart">
+          <Button
+            color="success"
+            onClick={() => onStartClick(selectedItems)}
+            disabled={selectedItemCount === 0 || !hasStoppedItemsSelected}
+          >
+            <i className="fa fa-play space-right" aria-hidden="true" />
+            Start
+          </Button>
+        </Authorized>
+
+        <Authorized authorizations="DockerContainerStop">
+          <Button
+            color="danger"
+            onClick={() => onStopClick(selectedItems)}
+            disabled={selectedItemCount === 0 || !hasRunningItemsSelected}
+          >
+            <i className="fa fa-stop space-right" aria-hidden="true" />
+            Stop
+          </Button>
+        </Authorized>
+
+        <Authorized authorizations="DockerContainerKill">
+          <Button
+            color="danger"
+            onClick={() => onKillClick(selectedItems)}
+            disabled={selectedItemCount === 0}
+          >
+            <i className="fa fa-bomb space-right" aria-hidden="true" />
+            Kill
+          </Button>
+        </Authorized>
+
+        <Authorized authorizations="DockerContainerRestart">
+          <Button
+            onClick={() => onRestartClick(selectedItems)}
+            disabled={selectedItemCount === 0}
+          >
+            <i className="fa fa-sync space-right" aria-hidden="true" />
+            Restart
+          </Button>
+        </Authorized>
+
+        <Authorized authorizations="DockerContainerPause">
+          <Button
+            onClick={() => onPauseClick(selectedItems)}
+            disabled={selectedItemCount === 0 || !hasRunningItemsSelected}
+          >
+            <i className="fa fa-pause space-right" aria-hidden="true" />
+            Pause
+          </Button>
+        </Authorized>
+
+        <Authorized authorizations="DockerContainerUnpause">
+          <Button
+            onClick={() => onResumeClick(selectedItems)}
+            disabled={selectedItemCount === 0 || !hasPausedItemsSelected}
+          >
+            <i className="fa fa-play space-right" aria-hidden="true" />
+            Resume
+          </Button>
+        </Authorized>
+
+        <Authorized authorizations="DockerContainerDelete">
+          <Button
+            color="danger"
+            onClick={() => onRemoveClick(selectedItems)}
+            disabled={selectedItemCount === 0}
+          >
+            <i className="fa fa-trash-alt space-right" aria-hidden="true" />
+            Remove
+          </Button>
+        </Authorized>
+      </ButtonGroup>
+
+      {isAddActionVisible && (
+        <Authorized authorizations="DockerContainerCreate">
+          <Link to="docker.containers.new" className="space-left">
+            <Button>
+              <i className="fa fa-plus space-right" aria-hidden="true" />
+              Add container
+            </Button>
+          </Link>
+        </Authorized>
+      )}
+    </div>
+  );
+
+  function onStartClick(selectedItems: DockerContainer[]) {
+    const successMessage = 'Container successfully started';
+    const errorMessage = 'Unable to start container';
+    executeActionOnContainerList(
+      selectedItems,
+      startContainer,
+      successMessage,
+      errorMessage
+    );
+  }
+
+  function onStopClick(selectedItems: DockerContainer[]) {
+    const successMessage = 'Container successfully stopped';
+    const errorMessage = 'Unable to stop container';
+    executeActionOnContainerList(
+      selectedItems,
+      stopContainer,
+      successMessage,
+      errorMessage
+    );
+  }
+
+  function onRestartClick(selectedItems: DockerContainer[]) {
+    const successMessage = 'Container successfully restarted';
+    const errorMessage = 'Unable to restart container';
+    executeActionOnContainerList(
+      selectedItems,
+      restartContainer,
+      successMessage,
+      errorMessage
+    );
+  }
+
+  function onKillClick(selectedItems: DockerContainer[]) {
+    const successMessage = 'Container successfully killed';
+    const errorMessage = 'Unable to kill container';
+    executeActionOnContainerList(
+      selectedItems,
+      killContainer,
+      successMessage,
+      errorMessage
+    );
+  }
+
+  function onPauseClick(selectedItems: DockerContainer[]) {
+    const successMessage = 'Container successfully paused';
+    const errorMessage = 'Unable to pause container';
+    executeActionOnContainerList(
+      selectedItems,
+      pauseContainer,
+      successMessage,
+      errorMessage
+    );
+  }
+
+  function onResumeClick(selectedItems: DockerContainer[]) {
+    const successMessage = 'Container successfully resumed';
+    const errorMessage = 'Unable to resume container';
+    executeActionOnContainerList(
+      selectedItems,
+      resumeContainer,
+      successMessage,
+      errorMessage
+    );
+  }
+
+  function onRemoveClick(selectedItems: DockerContainer[]) {
+    const isOneContainerRunning = selectedItems.some(
+      (container) => container.Status === 'running'
+    );
+
+    const runningTitle = isOneContainerRunning ? 'running' : '';
+    const title = `You are about to remove one or more ${runningTitle} containers.`;
+
+    confirmContainerDeletion(title, (result: string[]) => {
+      if (!result) {
+        return;
+      }
+      const cleanVolumes = !!result[0];
+
+      removeSelectedContainers(selectedItems, cleanVolumes);
+    });
+  }
+
+  async function executeActionOnContainerList(
+    containers: DockerContainer[],
+    action: ContainerServiceAction,
+    successMessage: string,
+    errorMessage: string
+  ) {
+    for (let i = 0; i < containers.length; i += 1) {
+      const container = containers[i];
+      try {
+        setPortainerAgentTargetHeader(container.NodeName);
+        await action(endpointId, container.Id);
+        notifications.success(successMessage, container.Names[0]);
+      } catch (err) {
+        notifications.error(
+          'Failure',
+          err as Error,
+          `${errorMessage}:${container.Names[0]}`
+        );
+      }
+    }
+
+    router.stateService.reload();
+  }
+
+  async function removeSelectedContainers(
+    containers: DockerContainer[],
+    cleanVolumes: boolean
+  ) {
+    for (let i = 0; i < containers.length; i += 1) {
+      const container = containers[i];
+      try {
+        setPortainerAgentTargetHeader(container.NodeName);
+        await removeContainer(endpointId, container, cleanVolumes);
+        notifications.success(
+          'Container successfully removed',
+          container.Names[0]
+        );
+      } catch (err) {
+        notifications.error(
+          'Failure',
+          err as Error,
+          'Unable to remove container'
+        );
+      }
+    }
+
+    router.stateService.reload();
+  }
+}
--- a/app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx
+++ b/app/docker/containers/components/ContainersDatatable/ContainersDatatableContainer.tsx
@ -0,0 +1,52 @@
+import { react2angular } from '@/react-tools/react2angular';
+import { EnvironmentProvider } from '@/portainer/environments/useEnvironment';
+import { TableSettingsProvider } from '@/portainer/components/datatables/components/useTableSettings';
+import { SearchBarProvider } from '@/portainer/components/datatables/components/SearchBar';
+import type { Environment } from '@/portainer/environments/types';
+
+import {
+  ContainersDatatable,
+  ContainerTableProps,
+} from './ContainersDatatable';
+
+interface Props extends ContainerTableProps {
+  endpoint: Environment;
+}
+
+export function ContainersDatatableContainer({ endpoint, ...props }: Props) {
+  const defaultSettings = {
+    autoRefreshRate: 0,
+    truncateContainerName: 32,
+    hiddenQuickActions: [],
+    hiddenColumns: [],
+    pageSize: 10,
+    sortBy: { id: 'state', desc: false },
+  };
+
+  return (
+    <EnvironmentProvider environment={endpoint}>
+      <TableSettingsProvider defaults={defaultSettings} storageKey="containers">
+        <SearchBarProvider>
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <ContainersDatatable {...props} />
+        </SearchBarProvider>
+      </TableSettingsProvider>
+    </EnvironmentProvider>
+  );
+}
+
+export const ContainersDatatableAngular = react2angular(
+  ContainersDatatableContainer,
+  [
+    'endpoint',
+    'isAddActionVisible',
+    'containerService',
+    'httpRequestHelper',
+    'notifications',
+    'modalService',
+    'dataset',
+    'onRefresh',
+    'isHostColumnVisible',
+    'autoFocusSearch',
+  ]
+);
--- a/app/docker/containers/components/ContainersDatatable/ContainersDatatableSettings.tsx
+++ b/app/docker/containers/components/ContainersDatatable/ContainersDatatableSettings.tsx
@ -0,0 +1,35 @@
+import { TableSettingsMenuAutoRefresh } from '@/portainer/components/datatables/components/TableSettingsMenuAutoRefresh';
+import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
+import { Checkbox } from '@/portainer/components/form-components/Checkbox';
+import type { ContainersTableSettings } from '@/docker/containers/types';
+
+export function ContainersDatatableSettings() {
+  const { settings, setTableSettings } = useTableSettings<
+    ContainersTableSettings
+  >();
+
+  return (
+    <>
+      <Checkbox
+        id="settings-container-truncate-nae"
+        label="Truncate container name"
+        checked={settings.truncateContainerName > 0}
+        onChange={() =>
+          setTableSettings((settings) => ({
+            ...settings,
+            truncateContainerName: settings.truncateContainerName > 0 ? 0 : 32,
+          }))
+        }
+      />
+
+      <TableSettingsMenuAutoRefresh
+        value={settings.autoRefreshRate}
+        onChange={handleRefreshRateChange}
+      />
+    </>
+  );
+
+  function handleRefreshRateChange(autoRefreshRate: number) {
+    setTableSettings({ autoRefreshRate });
+  }
+}
--- a/app/docker/containers/components/ContainersDatatable/columns/created.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/created.tsx
@ -0,0 +1,14 @@
+import { Column } from 'react-table';
+
+import { isoDateFromTimestamp } from '@/portainer/filters/filters';
+import type { DockerContainer } from '@/docker/containers/types';
+
+export const created: Column<DockerContainer> = {
+  Header: 'Created',
+  accessor: 'Created',
+  id: 'created',
+  Cell: ({ value }) => isoDateFromTimestamp(value),
+  disableFilters: true,
+  canHide: true,
+  Filter: () => null,
+};
--- a/app/docker/containers/components/ContainersDatatable/columns/host.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/host.tsx
@ -0,0 +1,13 @@
+import { Column } from 'react-table';
+
+import type { DockerContainer } from '@/docker/containers/types';
+
+export const host: Column<DockerContainer> = {
+  Header: 'Host',
+  accessor: (row) => row.NodeName || '-',
+  id: 'host',
+  disableFilters: true,
+  canHide: true,
+  sortType: 'string',
+  Filter: () => null,
+};
--- a/app/docker/containers/components/ContainersDatatable/columns/image.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/image.tsx
@ -0,0 +1,51 @@
+import { Column } from 'react-table';
+import { useSref } from '@uirouter/react';
+
+import { useEnvironment } from '@/portainer/environments/useEnvironment';
+import { EnvironmentStatus } from '@/portainer/environments/types';
+import type { DockerContainer } from '@/docker/containers/types';
+
+export const image: Column<DockerContainer> = {
+  Header: 'Image',
+  accessor: 'Image',
+  id: 'image',
+  disableFilters: true,
+  Cell: ImageCell,
+  canHide: true,
+  sortType: 'string',
+  Filter: () => null,
+};
+
+interface Props {
+  value: string;
+}
+
+function ImageCell({ value: imageName }: Props) {
+  const endpoint = useEnvironment();
+  const offlineMode = endpoint.Status !== EnvironmentStatus.Up;
+
+  const shortImageName = trimSHASum(imageName);
+
+  const linkProps = useSref('docker.images.image', { id: imageName });
+  if (offlineMode) {
+    return shortImageName;
+  }
+
+  return (
+    <a href={linkProps.href} onClick={linkProps.onClick}>
+      {shortImageName}
+    </a>
+  );
+
+  function trimSHASum(imageName: string) {
+    if (!imageName) {
+      return '';
+    }
+
+    if (imageName.indexOf('sha256:') === 0) {
+      return imageName.substring(7, 19);
+    }
+
+    return imageName.split('@sha256')[0];
+  }
+}
--- a/app/docker/containers/components/ContainersDatatable/columns/index.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/index.tsx
@ -0,0 +1,30 @@
+import { useMemo } from 'react';
+
+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';
+import { state } from './state';
+
+export function useColumns() {
+  return useMemo(
+    () => [
+      name,
+      state,
+      quickActions,
+      stack,
+      image,
+      created,
+      ip,
+      host,
+      ports,
+      ownership,
+    ],
+    []
+  );
+}
--- a/app/docker/containers/components/ContainersDatatable/columns/ip.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/ip.tsx
@ -0,0 +1,12 @@
+import { Column } from 'react-table';
+
+import type { DockerContainer } from '@/docker/containers/types';
+
+export const ip: Column<DockerContainer> = {
+  Header: 'IP Address',
+  accessor: (row) => row.IP || '-',
+  id: 'ip',
+  disableFilters: true,
+  canHide: true,
+  Filter: () => null,
+};
--- a/app/docker/containers/components/ContainersDatatable/columns/name.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/name.tsx
@ -0,0 +1,54 @@
+import { CellProps, Column, TableInstance } from 'react-table';
+import _ from 'lodash-es';
+import { useSref } from '@uirouter/react';
+
+import { useEnvironment } from '@/portainer/environments/useEnvironment';
+import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
+import type {
+  ContainersTableSettings,
+  DockerContainer,
+} from '@/docker/containers/types';
+
+export const name: Column<DockerContainer> = {
+  Header: 'Name',
+  accessor: (row) => {
+    const name = row.Names[0];
+    return name.substring(1, name.length);
+  },
+  id: 'name',
+  Cell: NameCell,
+  disableFilters: true,
+  Filter: () => null,
+  canHide: true,
+  sortType: 'string',
+};
+
+export function NameCell({
+  value: name,
+  row: { original: container },
+}: CellProps<TableInstance>) {
+  const { settings } = useTableSettings<ContainersTableSettings>();
+  const truncate = settings.truncateContainerName;
+  const endpoint = useEnvironment();
+  const offlineMode = endpoint.Status !== 1;
+
+  const linkProps = useSref('docker.containers.container', {
+    id: container.Id,
+    nodeName: container.NodeName,
+  });
+
+  let shortName = name;
+  if (truncate > 0) {
+    shortName = _.truncate(name, { length: truncate });
+  }
+
+  if (offlineMode) {
+    return <span>{shortName}</span>;
+  }
+
+  return (
+    <a href={linkProps.href} onClick={linkProps.onClick} title={name}>
+      {shortName}
+    </a>
+  );
+}
--- a/app/docker/containers/components/ContainersDatatable/columns/ownership.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/ownership.tsx
@ -0,0 +1,34 @@
+import { Column } from 'react-table';
+import clsx from 'clsx';
+
+import { ownershipIcon } from '@/portainer/filters/filters';
+import { ResourceControlOwnership } from '@/portainer/models/resourceControl/resourceControlOwnership';
+import type { DockerContainer } from '@/docker/containers/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}
+    </>
+  );
+}
--- a/app/docker/containers/components/ContainersDatatable/columns/ports.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/ports.tsx
@ -0,0 +1,41 @@
+import { Column } from 'react-table';
+import _ from 'lodash-es';
+
+import { useEnvironment } from '@/portainer/environments/useEnvironment';
+import type { DockerContainer, Port } from '@/docker/containers/types';
+
+export const ports: Column<DockerContainer> = {
+  Header: 'Published Ports',
+  accessor: 'Ports',
+  id: 'ports',
+  Cell: PortsCell,
+  disableSortBy: true,
+  disableFilters: true,
+  canHide: true,
+  Filter: () => null,
+};
+
+interface Props {
+  value: Port[];
+}
+
+function PortsCell({ value: ports }: Props) {
+  const { PublicURL: publicUrl } = useEnvironment();
+
+  if (ports.length === 0) {
+    return '-';
+  }
+
+  return _.uniqBy(ports, 'public').map((port) => (
+    <a
+      key={`${port.host}:${port.public}`}
+      className="image-tag"
+      href={`http://${publicUrl || port.host}:${port.public}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      <i className="fa fa-external-link-alt" aria-hidden="true" />
+      {port.public}:{port.private}
+    </a>
+  ));
+}
--- a/app/docker/containers/components/ContainersDatatable/columns/quick-actions.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/quick-actions.tsx
@ -0,0 +1,70 @@
+import { CellProps, Column } from 'react-table';
+
+import { useTableSettings } from '@/portainer/components/datatables/components/useTableSettings';
+import { useEnvironment } from '@/portainer/environments/useEnvironment';
+import { useAuthorizations } from '@/portainer/hooks/useUser';
+import { ContainerQuickActions } from '@/docker/components/container-quick-actions/ContainerQuickActions';
+import type {
+  ContainersTableSettings,
+  DockerContainer,
+} from '@/docker/containers/types';
+import { EnvironmentStatus } from '@/portainer/environments/types';
+
+export const quickActions: Column<DockerContainer> = {
+  Header: 'Quick Actions',
+  id: 'actions',
+  Cell: QuickActionsCell,
+  disableFilters: true,
+  disableSortBy: true,
+  canHide: true,
+  sortType: 'string',
+  Filter: () => null,
+};
+
+function QuickActionsCell({
+  row: { original: container },
+}: CellProps<DockerContainer>) {
+  const endpoint = useEnvironment();
+  const offlineMode = endpoint.Status !== EnvironmentStatus.Up;
+
+  const { settings } = useTableSettings<ContainersTableSettings>();
+
+  const { hiddenQuickActions = [] } = settings;
+
+  const wrapperState = {
+    showQuickActionAttach: !hiddenQuickActions.includes('attach'),
+    showQuickActionExec: !hiddenQuickActions.includes('exec'),
+    showQuickActionInspect: !hiddenQuickActions.includes('inspect'),
+    showQuickActionLogs: !hiddenQuickActions.includes('logs'),
+    showQuickActionStats: !hiddenQuickActions.includes('stats'),
+  };
+
+  const someOn =
+    wrapperState.showQuickActionAttach ||
+    wrapperState.showQuickActionExec ||
+    wrapperState.showQuickActionInspect ||
+    wrapperState.showQuickActionLogs ||
+    wrapperState.showQuickActionStats;
+
+  const isAuthorized = useAuthorizations([
+    'DockerContainerStats',
+    'DockerContainerLogs',
+    'DockerExecStart',
+    'DockerContainerInspect',
+    'DockerTaskInspect',
+    'DockerTaskLogs',
+  ]);
+
+  if (offlineMode || !someOn || !isAuthorized) {
+    return null;
+  }
+
+  return (
+    <ContainerQuickActions
+      containerId={container.Id}
+      nodeName={container.NodeName}
+      status={container.Status}
+      state={wrapperState}
+    />
+  );
+}
--- a/app/docker/containers/components/ContainersDatatable/columns/stack.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/stack.tsx
@ -0,0 +1,13 @@
+import { Column } from 'react-table';
+
+import type { DockerContainer } from '@/docker/containers/types';
+
+export const stack: Column<DockerContainer> = {
+  Header: 'Stack',
+  accessor: (row) => row.StackName || '-',
+  id: 'stack',
+  sortType: 'string',
+  disableFilters: true,
+  canHide: true,
+  Filter: () => null,
+};
--- a/app/docker/containers/components/ContainersDatatable/columns/state.tsx
+++ b/app/docker/containers/components/ContainersDatatable/columns/state.tsx
@ -0,0 +1,60 @@
+import { Column } from 'react-table';
+import clsx from 'clsx';
+import _ from 'lodash-es';
+
+import { DefaultFilter } from '@/portainer/components/datatables/components/Filter';
+import type {
+  DockerContainer,
+  DockerContainerStatus,
+} from '@/docker/containers/types';
+
+export const state: Column<DockerContainer> = {
+  Header: 'State',
+  accessor: 'Status',
+  id: 'state',
+  Cell: StatusCell,
+  sortType: 'string',
+  filter: 'multiple',
+  Filter: DefaultFilter,
+  canHide: true,
+};
+
+function StatusCell({ value: status }: { value: DockerContainerStatus }) {
+  const statusNormalized = _.toLower(status);
+  const hasHealthCheck = ['starting', 'healthy', 'unhealthy'].includes(
+    statusNormalized
+  );
+
+  const statusClassName = getClassName();
+
+  return (
+    <span
+      className={clsx('label', `label-${statusClassName}`, {
+        interactive: hasHealthCheck,
+      })}
+      title={hasHealthCheck ? 'This container has a health check' : ''}
+    >
+      {status}
+    </span>
+  );
+
+  function getClassName() {
+    if (includeString(['paused', 'starting', 'unhealthy'])) {
+      return 'warning';
+    }
+
+    if (includeString(['created'])) {
+      return 'info';
+    }
+
+    if (includeString(['stopped', 'dead', 'exited'])) {
+      return 'danger';
+    }
+
+    return 'success';
+
+    function includeString(values: DockerContainerStatus[]) {
+      return values.some((val) => statusNormalized.includes(val));
+    }
+  }
+}
--- a/app/docker/containers/containers.service.ts
+++ b/app/docker/containers/containers.service.ts
@ -0,0 +1,101 @@
+import { EnvironmentId } from '@/portainer/environments/types';
+import PortainerError from '@/portainer/error';
+import axios from '@/portainer/services/axios';
+
+import { genericHandler } from '../rest/response/handlers';
+
+import { ContainerId, DockerContainer } from './types';
+
+export async function startContainer(
+  endpointId: EnvironmentId,
+  id: ContainerId
+) {
+  await axios.post<void>(
+    urlBuilder(endpointId, id, 'start'),
+    {},
+    { transformResponse: genericHandler }
+  );
+}
+
+export async function stopContainer(
+  endpointId: EnvironmentId,
+  id: ContainerId
+) {
+  await axios.post<void>(urlBuilder(endpointId, id, 'stop'), {});
+}
+
+export async function restartContainer(
+  endpointId: EnvironmentId,
+  id: ContainerId
+) {
+  await axios.post<void>(urlBuilder(endpointId, id, 'restart'), {});
+}
+
+export async function killContainer(
+  endpointId: EnvironmentId,
+  id: ContainerId
+) {
+  await axios.post<void>(urlBuilder(endpointId, id, 'kill'), {});
+}
+
+export async function pauseContainer(
+  endpointId: EnvironmentId,
+  id: ContainerId
+) {
+  await axios.post<void>(urlBuilder(endpointId, id, 'pause'), {});
+}
+
+export async function resumeContainer(
+  endpointId: EnvironmentId,
+  id: ContainerId
+) {
+  await axios.post<void>(urlBuilder(endpointId, id, 'unpause'), {});
+}
+
+export async function renameContainer(
+  endpointId: EnvironmentId,
+  id: ContainerId,
+  name: string
+) {
+  await axios.post<void>(
+    urlBuilder(endpointId, id, 'rename'),
+    {},
+    { params: { name }, transformResponse: genericHandler }
+  );
+}
+
+export async function removeContainer(
+  endpointId: EnvironmentId,
+  container: DockerContainer,
+  removeVolumes: boolean
+) {
+  try {
+    const { data } = await axios.delete<null | { message: string }>(
+      urlBuilder(endpointId, container.Id),
+      {
+        params: { v: removeVolumes ? 1 : 0, force: true },
+        transformResponse: genericHandler,
+      }
+    );
+
+    if (data && data.message) {
+      throw new PortainerError(data.message);
+    }
+  } catch (e) {
+    throw new PortainerError('Unable to remove container', e as Error);
+  }
+}
+
+function urlBuilder(
+  endpointId: EnvironmentId,
+  id: ContainerId,
+  action?: string
+) {
+  const url = `/endpoints/${endpointId}/docker/containers/${id}`;
+
+  if (action) {
+    return `${url}/${action}`;
+  }
+
+  return url;
+}
--- a/app/docker/containers/index.ts
+++ b/app/docker/containers/index.ts
@ -0,0 +1,7 @@
+import angular from 'angular';
+
+import { ContainersDatatableAngular } from './components/ContainersDatatable/ContainersDatatableContainer';
+
+export default angular
+  .module('portainer.docker.containers', [])
+  .component('containersDatatable', ContainersDatatableAngular).name;
--- a/app/docker/containers/types.ts
+++ b/app/docker/containers/types.ts
@ -0,0 +1,45 @@
+import { ResourceControlViewModel } from '@/portainer/models/resourceControl/resourceControl';
+
+export type DockerContainerStatus =
+  | 'paused'
+  | 'stopped'
+  | 'created'
+  | 'healthy'
+  | 'unhealthy'
+  | 'starting'
+  | 'running'
+  | 'dead'
+  | 'exited';
+
+export type QuickAction = 'attach' | 'exec' | 'inspect' | 'logs' | 'stats';
+
+export interface ContainersTableSettings {
+  hiddenQuickActions: QuickAction[];
+  hiddenColumns: string[];
+  truncateContainerName: number;
+  autoRefreshRate: number;
+  pageSize: number;
+  sortBy: { id: string; desc: boolean };
+}
+
+export interface Port {
+  host: string;
+  public: string;
+  private: string;
+}
+
+export type ContainerId = string;
+
+export type DockerContainer = {
+  IsPortainer: boolean;
+  Status: DockerContainerStatus;
+  NodeName: string;
+  Id: ContainerId;
+  IP: string;
+  Names: string[];
+  Created: string;
+  ResourceControl: ResourceControlViewModel;
+  Ports: Port[];
+  StackName?: string;
+  Image: string;
+};
--- a/app/docker/rest/container.js
+++ b/app/docker/rest/container.js
@ -24,26 +24,6 @@ angular.module('portainer.docker').factory('Container', [
          method: 'GET',
          params: { action: 'json' },
        },
-        stop: {
-          method: 'POST',
-          params: { id: '@id', action: 'stop' },
-        },
-        restart: {
-          method: 'POST',
-          params: { id: '@id', action: 'restart' },
-        },
-        kill: {
-          method: 'POST',
-          params: { id: '@id', action: 'kill' },
-        },
-        pause: {
-          method: 'POST',
-          params: { id: '@id', action: 'pause' },
-        },
-        unpause: {
-          method: 'POST',
-          params: { id: '@id', action: 'unpause' },
-        },
        logs: {
          method: 'GET',
          params: { id: '@id', action: 'logs' },
@ -60,27 +40,12 @@ angular.module('portainer.docker').factory('Container', [
          params: { id: '@id', action: 'top' },
          ignoreLoadingBar: true,
        },
-        start: {
-          method: 'POST',
-          params: { id: '@id', action: 'start' },
-          transformResponse: genericHandler,
-        },
        create: {
          method: 'POST',
          params: { action: 'create' },
          transformResponse: genericHandler,
          ignoreLoadingBar: true,
        },
-        remove: {
-          method: 'DELETE',
-          params: { id: '@id', v: '@v', force: '@force' },
-          transformResponse: genericHandler,
-        },
-        rename: {
-          method: 'POST',
-          params: { id: '@id', action: 'rename', name: '@name' },
-          transformResponse: genericHandler,
-        },
        exec: {
          method: 'POST',
          params: { id: '@id', action: 'exec' },
--- a/app/docker/services/containerService.js
+++ b/app/docker/services/containerService.js
@ -1,232 +1,206 @@
+import angular from 'angular';
+import {
+  killContainer,
+  pauseContainer,
+  removeContainer,
+  renameContainer,
+  restartContainer,
+  resumeContainer,
+  startContainer,
+  stopContainer,
+} from '@/docker/containers/containers.service';
 import { ContainerDetailsViewModel, ContainerStatsViewModel, ContainerViewModel } from '../models/container';

-angular.module('portainer.docker').factory('ContainerService', [
-  '$q',
-  'Container',
-  'ResourceControlService',
-  'LogHelper',
-  '$timeout',
-  function ContainerServiceFactory($q, Container, ResourceControlService, LogHelper, $timeout) {
-    'use strict';
-    var service = {};
+angular.module('portainer.docker').factory('ContainerService', ContainerServiceFactory);

-    service.container = function (id) {
-      var deferred = $q.defer();
+/* @ngInject */
+function ContainerServiceFactory($q, Container, LogHelper, $timeout, EndpointProvider) {
+  const service = {
+    killContainer: withEndpointId(killContainer),
+    pauseContainer: withEndpointId(pauseContainer),
+    renameContainer: withEndpointId(renameContainer),
+    restartContainer: withEndpointId(restartContainer),
+    resumeContainer: withEndpointId(resumeContainer),
+    startContainer: withEndpointId(startContainer),
+    stopContainer: withEndpointId(stopContainer),
+    remove: withEndpointId(removeContainer),
+    updateRestartPolicy,
+    updateLimits,
+  };

-      Container.get({ id: id })
-        .$promise.then(function success(data) {
-          var container = new ContainerDetailsViewModel(data);
-          deferred.resolve(container);
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to retrieve container information', err: err });
+  service.container = function (id) {
+    var deferred = $q.defer();
+
+    Container.get({ id: id })
+      .$promise.then(function success(data) {
+        var container = new ContainerDetailsViewModel(data);
+        deferred.resolve(container);
+      })
+      .catch(function error(err) {
+        deferred.reject({ msg: 'Unable to retrieve container information', err: err });
+      });
+
+    return deferred.promise;
+  };
+
+  service.containers = function (all, filters) {
+    var deferred = $q.defer();
+    Container.query({ all: all, filters: filters })
+      .$promise.then(function success(data) {
+        var containers = data.map(function (item) {
+          return new ContainerViewModel(item);
        });
+        deferred.resolve(containers);
+      })
+      .catch(function error(err) {
+        deferred.reject({ msg: 'Unable to retrieve containers', err: err });
+      });

-      return deferred.promise;
-    };
+    return deferred.promise;
+  };

-    service.containers = function (all, filters) {
-      var deferred = $q.defer();
-      Container.query({ all: all, filters: filters })
-        .$promise.then(function success(data) {
-          var containers = data.map(function (item) {
-            return new ContainerViewModel(item);
-          });
-          deferred.resolve(containers);
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to retrieve containers', err: err });
-        });
+  service.resizeTTY = function (id, width, height, timeout) {
+    var deferred = $q.defer();

-      return deferred.promise;
-    };
-
-    service.resizeTTY = function (id, width, height, timeout) {
-      var deferred = $q.defer();
-
-      $timeout(function () {
-        Container.resize({}, { id: id, height: height, width: width })
-          .$promise.then(function success(data) {
-            if (data.message) {
-              deferred.reject({ msg: 'Unable to resize tty of container ' + id, err: data.message });
-            } else {
-              deferred.resolve(data);
-            }
-          })
-          .catch(function error(err) {
-            deferred.reject({ msg: 'Unable to resize tty of container ' + id, err: err });
-          });
-      }, timeout);
-
-      return deferred.promise;
-    };
-
-    service.startContainer = function (id) {
-      return Container.start({ id: id }, {}).$promise;
-    };
-
-    service.stopContainer = function (id) {
-      return Container.stop({ id: id }, {}).$promise;
-    };
-
-    service.restartContainer = function (id) {
-      return Container.restart({ id: id }, {}).$promise;
-    };
-
-    service.killContainer = function (id) {
-      return Container.kill({ id: id }, {}).$promise;
-    };
-
-    service.pauseContainer = function (id) {
-      return Container.pause({ id: id }, {}).$promise;
-    };
-
-    service.resumeContainer = function (id) {
-      return Container.unpause({ id: id }, {}).$promise;
-    };
-
-    service.renameContainer = function (id, newContainerName) {
-      return Container.rename({ id: id, name: newContainerName }, {}).$promise;
-    };
-
-    service.updateRestartPolicy = updateRestartPolicy;
-    service.updateLimits = updateLimits;
-
-    function updateRestartPolicy(id, restartPolicy, maximumRetryCounts) {
-      return Container.update({ id: id }, { RestartPolicy: { Name: restartPolicy, MaximumRetryCount: maximumRetryCounts } }).$promise;
-    }
-
-    function updateLimits(id, config) {
-      return Container.update(
-        { id: id },
-        {
-          // MemorySwap: must be set
-          // -1: non limits, 0: treated as unset(cause update error).
-          MemoryReservation: config.HostConfig.MemoryReservation,
-          Memory: config.HostConfig.Memory,
-          MemorySwap: -1,
-          NanoCpus: config.HostConfig.NanoCpus,
-        }
-      ).$promise;
-    }
-
-    service.createContainer = function (configuration) {
-      var deferred = $q.defer();
-      Container.create(configuration)
-        .$promise.then(function success(data) {
-          deferred.resolve(data);
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to create container', err: err });
-        });
-      return deferred.promise;
-    };
-
-    service.createAndStartContainer = function (configuration) {
-      var deferred = $q.defer();
-      var container;
-      service
-        .createContainer(configuration)
-        .then(function success(data) {
-          container = data;
-          return service.startContainer(container.Id);
-        })
-        .then(function success() {
-          deferred.resolve(container);
-        })
-        .catch(function error(err) {
-          deferred.reject(err);
-        });
-      return deferred.promise;
-    };
-
-    service.remove = function (container, removeVolumes) {
-      var deferred = $q.defer();
-
-      Container.remove({ id: container.Id, v: removeVolumes ? 1 : 0, force: true })
+    $timeout(function () {
+      Container.resize({}, { id: id, height: height, width: width })
        .$promise.then(function success(data) {
          if (data.message) {
-            deferred.reject({ msg: data.message, err: data.message });
-          } else {
-            deferred.resolve();
-          }
-        })
-        .catch(function error(err) {
-          deferred.reject({ msg: 'Unable to remove container', err: err });
-        });
-
-      return deferred.promise;
-    };
-
-    service.createExec = function (execConfig) {
-      var deferred = $q.defer();
-
-      Container.exec({}, execConfig)
-        .$promise.then(function success(data) {
-          if (data.message) {
-            deferred.reject({ msg: data.message, err: data.message });
+            deferred.reject({ msg: 'Unable to resize tty of container ' + id, err: data.message });
          } else {
            deferred.resolve(data);
          }
        })
        .catch(function error(err) {
-          deferred.reject(err);
+          deferred.reject({ msg: 'Unable to resize tty of container ' + id, err: err });
        });
+    }, timeout);

-      return deferred.promise;
+    return deferred.promise;
+  };
+
+  function updateRestartPolicy(id, restartPolicy, maximumRetryCounts) {
+    return Container.update({ id: id }, { RestartPolicy: { Name: restartPolicy, MaximumRetryCount: maximumRetryCounts } }).$promise;
+  }
+
+  function updateLimits(id, config) {
+    return Container.update(
+      { id: id },
+      {
+        // MemorySwap: must be set
+        // -1: non limits, 0: treated as unset(cause update error).
+        MemoryReservation: config.HostConfig.MemoryReservation,
+        Memory: config.HostConfig.Memory,
+        MemorySwap: -1,
+        NanoCpus: config.HostConfig.NanoCpus,
+      }
+    ).$promise;
+  }
+
+  service.createContainer = function (configuration) {
+    var deferred = $q.defer();
+    Container.create(configuration)
+      .$promise.then(function success(data) {
+        deferred.resolve(data);
+      })
+      .catch(function error(err) {
+        deferred.reject({ msg: 'Unable to create container', err: err });
+      });
+    return deferred.promise;
+  };
+
+  service.createAndStartContainer = function (configuration) {
+    var deferred = $q.defer();
+    var container;
+    service
+      .createContainer(configuration)
+      .then(function success(data) {
+        container = data;
+        return service.startContainer(container.Id);
+      })
+      .then(function success() {
+        deferred.resolve(container);
+      })
+      .catch(function error(err) {
+        deferred.reject(err);
+      });
+    return deferred.promise;
+  };
+
+  service.createExec = function (execConfig) {
+    var deferred = $q.defer();
+
+    Container.exec({}, execConfig)
+      .$promise.then(function success(data) {
+        if (data.message) {
+          deferred.reject({ msg: data.message, err: data.message });
+        } else {
+          deferred.resolve(data);
+        }
+      })
+      .catch(function error(err) {
+        deferred.reject(err);
+      });
+
+    return deferred.promise;
+  };
+
+  service.logs = function (id, stdout, stderr, timestamps, since, tail, stripHeaders) {
+    var deferred = $q.defer();
+
+    var parameters = {
+      id: id,
+      stdout: stdout || 0,
+      stderr: stderr || 0,
+      timestamps: timestamps || 0,
+      since: since || 0,
+      tail: tail || 'all',
    };

-    service.logs = function (id, stdout, stderr, timestamps, since, tail, stripHeaders) {
-      var deferred = $q.defer();
+    Container.logs(parameters)
+      .$promise.then(function success(data) {
+        var logs = LogHelper.formatLogs(data.logs, stripHeaders);
+        deferred.resolve(logs);
+      })
+      .catch(function error(err) {
+        deferred.reject(err);
+      });

-      var parameters = {
-        id: id,
-        stdout: stdout || 0,
-        stderr: stderr || 0,
-        timestamps: timestamps || 0,
-        since: since || 0,
-        tail: tail || 'all',
-      };
+    return deferred.promise;
+  };

-      Container.logs(parameters)
-        .$promise.then(function success(data) {
-          var logs = LogHelper.formatLogs(data.logs, stripHeaders);
-          deferred.resolve(logs);
-        })
-        .catch(function error(err) {
-          deferred.reject(err);
-        });
+  service.containerStats = function (id) {
+    var deferred = $q.defer();

-      return deferred.promise;
-    };
+    Container.stats({ id: id })
+      .$promise.then(function success(data) {
+        var containerStats = new ContainerStatsViewModel(data);
+        deferred.resolve(containerStats);
+      })
+      .catch(function error(err) {
+        deferred.reject(err);
+      });

-    service.containerStats = function (id) {
-      var deferred = $q.defer();
+    return deferred.promise;
+  };

-      Container.stats({ id: id })
-        .$promise.then(function success(data) {
-          var containerStats = new ContainerStatsViewModel(data);
-          deferred.resolve(containerStats);
-        })
-        .catch(function error(err) {
-          deferred.reject(err);
-        });
+  service.containerTop = function (id) {
+    return Container.top({ id: id }).$promise;
+  };

-      return deferred.promise;
-    };
+  service.inspect = function (id) {
+    return Container.inspect({ id: id }).$promise;
+  };

-    service.containerTop = function (id) {
-      return Container.top({ id: id }).$promise;
-    };
+  service.prune = function (filters) {
+    return Container.prune({ filters: filters }).$promise;
+  };

-    service.inspect = function (id) {
-      return Container.inspect({ id: id }).$promise;
-    };
+  return service;

-    service.prune = function (filters) {
-      return Container.prune({ filters: filters }).$promise;
-    };
+  function withEndpointId(func) {
+    const endpointId = EndpointProvider.endpointID();

-    return service;
-  },
-]);
+    return func.bind(null, endpointId);
+  }
+}
--- a/app/docker/views/containers/containers.html
+++ b/app/docker/views/containers/containers.html
@ -7,19 +7,15 @@
  <rd-header-content>Containers</rd-header-content>
 </rd-header>
 <information-panel-offline ng-if="offlineMode"></information-panel-offline>
+
 <div class="row">
  <div class="col-sm-12" ng-if="containers">
    <containers-datatable
-      title-text="Containers"
-      title-icon="fa-cubes"
+      endpoint="endpoint"
      dataset="containers"
-      table-key="containers"
-      order-by="Status"
-      show-host-column="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
-      show-add-action="true"
-      offline-mode="offlineMode"
-      refresh-callback="getContainers"
-      endpoint-public-url="endpoint.PublicURL"
+      is-host-column-visible="applicationState.endpoint.mode.agentProxy && applicationState.endpoint.mode.provider === 'DOCKER_SWARM_MODE'"
+      is-add-action-visible="true"
+      on-refresh="(getContainers)"
    ></containers-datatable>
  </div>
 </div>
--- a/app/docker/views/containers/edit/containerController.js
+++ b/app/docker/views/containers/edit/containerController.js
@ -1,6 +1,7 @@
 import moment from 'moment';
 import _ from 'lodash-es';
 import { PorImageRegistryModel } from 'Docker/models/porImageRegistry';
+import { confirmContainerDeletion } from '@/portainer/services/modal.service/prompt';

 angular.module('portainer.docker').controller('ContainerController', [
  '$q',
@ -246,7 +247,8 @@ angular.module('portainer.docker').controller('ContainerController', [
      if ($scope.container.State.Running) {
        title = 'You are about to remove a running container.';
      }
-      ModalService.confirmContainerDeletion(title, function (result) {
+
+      confirmContainerDeletion(title, function (result) {
        if (!result) {
          return;
        }