diff --git a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
deleted file mode 100644
index 3e7274195..000000000
--- a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
+++ /dev/null
@@ -1,118 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle vertical-center">
-          <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
-          </div>
-          {{ $ctrl.titleText }}
-        </div>
-      </div>
-      <div class="searchBar vertical-center">
-        <pr-icon icon="'search'"></pr-icon>
-        <input
-          type="text"
-          class="searchInput"
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          placeholder="Search..."
-          auto-focus
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <table-column-header
-                  col-title="'Id'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Id'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Id')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Status'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Status'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Status')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Slot'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Slot'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Slot')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Image'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Spec.ContainerSpec.Image'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Spec.ContainerSpec.Image' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Spec.ContainerSpec.Image')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Last Update'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Updated'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Updated')"
-                ></table-column-header>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit))"
-              ng-class="{ active: item.Checked }"
-            >
-              <td
-                ><a ui-sref="docker.tasks.task({id: item.Id})" class="monospaced">{{ item.Id }}</a></td
-              >
-              <td
-                ><span class="label label-{{ item.Status.State | taskstatusbadge }}">{{ item.Status.State }}</span></td
-              >
-              <td>{{ item.Slot ? item.Slot : '-' }}</td>
-              <td>{{ item.Spec.ContainerSpec.Image | hideshasum }}</td>
-              <td>{{ item.Updated | getisodate }}</td>
-            </tr>
-            <tr ng-if="!$ctrl.dataset">
-              <td colspan="5" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-muted text-center">No task available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="$ctrl.dataset">
-        <div class="paginationControls">
-          <form class="form-inline vertical-center">
-            <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>
diff --git a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.js b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.js
deleted file mode 100644
index 5455fb33d..000000000
--- a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.js
+++ /dev/null
@@ -1,12 +0,0 @@
-angular.module('portainer.docker').component('nodeTasksDatatable', {
-  templateUrl: './nodeTasksDatatable.html',
-  controller: 'GenericDatatableController',
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    dataset: '<',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-  },
-});
diff --git a/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatable.html b/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatable.html
deleted file mode 100644
index abff507bb..000000000
--- a/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatable.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<div class="datatable">
-  <rd-widget>
-    <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle vertical-center">
-          <div class="widget-icon space-right">
-            <pr-icon icon="$ctrl.titleIcon"></pr-icon>
-          </div>
-          {{ $ctrl.titleText }}
-        </div>
-      </div>
-      <div class="searchBar">
-        <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
-        <input
-          type="text"
-          class="searchInput"
-          auto-focus
-          placeholder="Search..."
-          ng-model="$ctrl.state.textFilter"
-          ng-change="$ctrl.onTextFilterChange()"
-          ng-model-options="{ debounce: 300 }"
-        />
-      </div>
-      <div class="table-responsive">
-        <table class="table-hover nowrap-cells table">
-          <thead>
-            <tr>
-              <th>
-                <table-column-header
-                  col-title="'Name'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'Name'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('Name')"
-                ></table-column-header>
-              </th>
-              <th>
-                <table-column-header
-                  col-title="'Group'"
-                  can-sort="true"
-                  is-sorted="$ctrl.state.orderBy === 'GroupName'"
-                  is-sorted-desc="$ctrl.state.orderBy === 'GroupName' && $ctrl.state.reverseOrder"
-                  ng-click="$ctrl.changeOrderBy('GroupName')"
-                ></table-column-header>
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              dir-paginate="item in $ctrl.state.filteredDataSet | itemsPerPage: $ctrl.state.paginatedItemLimit"
-              total-items="$ctrl.state.totalFilteredDataSet"
-              ng-class="{ active: item.Checked }"
-            >
-              <td>
-                <span>{{ item.Name }}</span>
-              </td>
-
-              <td>{{ item.GroupName }}</td>
-            </tr>
-            <tr ng-if="$ctrl.state.loading">
-              <td colspan="5" class="text-muted text-center">Loading...</td>
-            </tr>
-            <tr ng-if="!$ctrl.state.loading && $ctrl.state.filteredDataSet.length === 0">
-              <td colspan="5" class="text-muted text-center">No environment available.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div class="footer" ng-if="!$ctrl.state.loading">
-        <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" on-page-change="$ctrl.onPageChange(newPageNumber, oldPageNumber)"></dir-pagination-controls>
-          </form>
-        </div>
-      </div>
-    </rd-widget-body>
-  </rd-widget>
-</div>
diff --git a/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatableController.js b/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatableController.js
deleted file mode 100644
index 5b551af12..000000000
--- a/app/edge/components/associated-endpoints-datatable/associatedEndpointsDatatableController.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import angular from 'angular';
-
-export class AssociatedEndpointsDatatableController {
-  /* @ngInject */
-  constructor($scope, $controller, DatatableService, PaginationService) {
-    this.extendGenericController($controller, $scope);
-    this.DatatableService = DatatableService;
-    this.PaginationService = PaginationService;
-
-    this.state = Object.assign(this.state, {
-      orderBy: this.orderBy,
-      loading: true,
-      filteredDataSet: [],
-      totalFilteredDataset: 0,
-      pageNumber: 1,
-    });
-
-    this.onPageChange = this.onPageChange.bind(this);
-    this.paginationChanged = this.paginationChanged.bind(this);
-  }
-
-  extendGenericController($controller, $scope) {
-    // extending the controller overrides the current controller functions
-    const $onInit = this.$onInit.bind(this);
-    const changePaginationLimit = this.changePaginationLimit.bind(this);
-    const onTextFilterChange = this.onTextFilterChange.bind(this);
-    angular.extend(this, $controller('GenericDatatableController', { $scope }));
-    this.$onInit = $onInit;
-    this.changePaginationLimit = changePaginationLimit;
-    this.onTextFilterChange = onTextFilterChange;
-  }
-
-  $onInit() {
-    this.setDefaults();
-    this.prepareTableFromDataset();
-
-    var storedOrder = this.DatatableService.getDataTableOrder(this.tableKey);
-    if (storedOrder !== null) {
-      this.state.reverseOrder = storedOrder.reverse;
-      this.state.orderBy = storedOrder.orderBy;
-    }
-
-    var textFilter = this.DatatableService.getDataTableTextFilters(this.tableKey);
-    if (textFilter !== null) {
-      this.state.textFilter = textFilter;
-      this.onTextFilterChange();
-    }
-
-    var storedFilters = this.DatatableService.getDataTableFilters(this.tableKey);
-    if (storedFilters !== null) {
-      this.filters = storedFilters;
-    }
-    if (this.filters && this.filters.state) {
-      this.filters.state.open = false;
-    }
-
-    this.paginationChanged();
-  }
-
-  $onChanges({ updateKey }) {
-    if (updateKey.currentValue && !updateKey.isFirstChange()) {
-      this.paginationChanged();
-    }
-  }
-
-  onPageChange(newPageNumber) {
-    this.state.pageNumber = newPageNumber;
-    this.paginationChanged();
-  }
-
-  /**
-   * Overridden
-   */
-  changePaginationLimit() {
-    this.PaginationService.setPaginationLimit(this.tableKey, this.state.paginatedItemLimit);
-    this.paginationChanged();
-  }
-
-  /**
-   * Overridden
-   */
-  onTextFilterChange() {
-    var filterValue = this.state.textFilter;
-    this.DatatableService.setDataTableTextFilters(this.tableKey, filterValue);
-    this.paginationChanged();
-  }
-
-  paginationChanged() {
-    this.state.loading = true;
-    this.state.filteredDataSet = [];
-    const start = (this.state.pageNumber - 1) * this.state.paginatedItemLimit + 1;
-    this.retrievePage(start, this.state.paginatedItemLimit, this.state.textFilter)
-      .then((data) => {
-        this.state.filteredDataSet = data.endpoints;
-        this.state.totalFilteredDataSet = data.totalCount;
-      })
-      .finally(() => {
-        this.state.loading = false;
-      });
-  }
-}
diff --git a/app/edge/components/associated-endpoints-datatable/index.js b/app/edge/components/associated-endpoints-datatable/index.js
deleted file mode 100644
index 7defaa58a..000000000
--- a/app/edge/components/associated-endpoints-datatable/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import angular from 'angular';
-
-import { AssociatedEndpointsDatatableController } from './associatedEndpointsDatatableController';
-
-angular.module('portainer.edge').component('associatedEndpointsDatatable', {
-  templateUrl: './associatedEndpointsDatatable.html',
-  controller: AssociatedEndpointsDatatableController,
-  bindings: {
-    titleText: '@',
-    titleIcon: '@',
-    tableKey: '@',
-    orderBy: '@',
-    reverseOrder: '<',
-    retrievePage: '<',
-    updateKey: '<',
-  },
-});
diff --git a/app/portainer/components/access-table/access-table.js b/app/portainer/components/access-table/access-table.js
deleted file mode 100644
index fcf929f97..000000000
--- a/app/portainer/components/access-table/access-table.js
+++ /dev/null
@@ -1,21 +0,0 @@
-angular.module('portainer.app').component('accessTable', {
-  templateUrl: './accessTable.html',
-  controller: function () {
-    this.state = {
-      orderBy: 'Name',
-      reverseOrder: false,
-      paginatedItemLimit: '10',
-      textFilter: '',
-    };
-
-    this.changeOrderBy = function (orderField) {
-      this.state.reverseOrder = this.state.orderBy === orderField ? !this.state.reverseOrder : false;
-      this.state.orderBy = orderField;
-    };
-  },
-  bindings: {
-    dataset: '<',
-    entryClick: '<',
-    emptyDatasetMessage: '@',
-  },
-});
diff --git a/app/portainer/components/access-table/accessTable.html b/app/portainer/components/access-table/accessTable.html
deleted file mode 100644
index eade123c8..000000000
--- a/app/portainer/components/access-table/accessTable.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<div class="datatable">
-  <table class="table-hover table">
-    <div class="col-sm-12">
-      <pr-icon icon="'search'" class-name="'searchIcon'"></pr-icon>
-      <input
-        type="text"
-        class="searchInput"
-        ng-model="$ctrl.state.textFilter"
-        ng-change="$ctrl.onTextFilterChange()"
-        placeholder="Search..."
-        ng-model-options="{ debounce: 300 }"
-      />
-    </div>
-    <thead>
-      <tr>
-        <th>
-          <a ng-click="$ctrl.changeOrderBy('Name')">
-            Name
-            <span ng-show="$ctrl.state.orderBy == 'Name' && !$ctrl.state.reverseOrder" class="glyphicon glyphicon-chevron-down"></span>
-            <span ng-show="$ctrl.state.orderBy == 'Name' && $ctrl.state.reverseOrder" class="glyphicon glyphicon-chevron-up"></span>
-          </a>
-        </th>
-        <th>
-          <a ng-click="$ctrl.changeOrderBy('Type')">
-            Type
-            <span ng-show="$ctrl.state.orderBy == 'Type' && !$ctrl.state.reverseOrder" class="glyphicon glyphicon-chevron-down"></span>
-            <span ng-show="$ctrl.state.orderBy == 'Type' && $ctrl.state.reverseOrder" class="glyphicon glyphicon-chevron-up"></span>
-          </a>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        ng-click="!item.Inherited && $ctrl.entryClick(item)"
-        ng-class="{ interactive: !item.Inherited }"
-        dir-paginate="item in $ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit"
-      >
-        <td>
-          {{ item.Name }}
-          <!-- <span class="image-tag label label-">inherited</span> -->
-          <span ng-if="item.Inherited" class="text-muted small" style="margin-left: 2px"><code style="font-size: 85% !important">inherited</code></span>
-        </td>
-        <td>
-          <pr-icon ng-if="item.Type === 'user'" icon="'user'" class-name="'mr-0.5'"></pr-icon>
-          <pr-icon ng-if="!item.Type === 'user'" icon="'users'" class-name="'mr-0.5'"></pr-icon>
-          {{ item.Type }}
-        </td>
-      </tr>
-      <tr ng-if="!$ctrl.dataset">
-        <td colspan="2" class="text-muted text-center">Loading...</td>
-      </tr>
-      <tr
-        ng-if="
-          $ctrl.dataset.length === 0 ||
-          ($ctrl.dataset | filter: $ctrl.state.textFilter | orderBy: $ctrl.state.orderBy : $ctrl.state.reverseOrder | itemsPerPage: $ctrl.state.paginatedItemLimit).length === 0
-        "
-      >
-        <td colspan="2" class="text-muted text-center">{{ $ctrl.emptyDatasetMessage }}</td>
-      </tr>
-    </tbody>
-  </table>
-  <div class="footer" ng-if="$ctrl.dataset">
-    <div class="paginationControls">
-      <form class="form-inline">
-        <span class="limitSelector">
-          <span style="margin-right: 5px"> Items per page </span>
-          <select ng-model="$ctrl.state.paginatedItemLimit">
-            <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>
-</div>