From d8db8718bdd6ce11978f2ac89ee31adee98fc732 Mon Sep 17 00:00:00 2001
From: Rex Wang <109048808+RexWangPT@users.noreply.github.com>
Date: Wed, 3 Aug 2022 17:43:29 +0800
Subject: [PATCH] EE-3831 Replace sort icon and search icon in all docker pages
 (#7400)

---
 .../files-datatable/filesDatatable.html       |  36 +++--
 .../configs-datatable/configsDatatable.html   |  46 +++---
 .../events-datatable/eventsDatatable.html     |  36 +++--
 .../macvlanNodesDatatable.html                |  64 +++++----
 .../networks-datatable/networksDatatable.html | 132 ++++++++++--------
 .../nodeTasksDatatable.html                   |  64 +++++----
 .../nodes-datatable/nodesDatatable.html       |  96 +++++++------
 .../secrets-datatable/secretsDatatable.html   |  46 +++---
 .../serviceTasksDatatable.html                |  36 +++--
 .../services-datatable/servicesDatatable.html |  84 ++++++-----
 .../tasks-datatable/tasksDatatable.html       |  87 +++++++-----
 .../ContainerQuickActions.tsx                 |   4 +-
 12 files changed, 426 insertions(+), 305 deletions(-)

diff --git a/app/agent/components/files-datatable/filesDatatable.html b/app/agent/components/files-datatable/filesDatatable.html
index 1b4a9b793..0c7b7e31f 100644
--- a/app/agent/components/files-datatable/filesDatatable.html
+++ b/app/agent/components/files-datatable/filesDatatable.html
@@ -25,25 +25,31 @@
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('Size')">
-                  Size
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Size' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Size'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Size'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Size' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Size')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('ModTime')">
-                  Last modification
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ModTime' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ModTime' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Last modification'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'ModTime'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'ModTime' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('ModTime')"
+                ></table-column-header>
               </th>
               <th> Actions </th>
             </tr>
diff --git a/app/docker/components/datatables/configs-datatable/configsDatatable.html b/app/docker/components/datatables/configs-datatable/configsDatatable.html
index aea6cdc19..c8ac0d43d 100644
--- a/app/docker/components/datatables/configs-datatable/configsDatatable.html
+++ b/app/docker/components/datatables/configs-datatable/configsDatatable.html
@@ -82,29 +82,37 @@
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox" authorization="DockerConfigDelete, DockerConfigCreate">
-                  <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('Name')">
-                  Name
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <div class="flex flex-nowrap items-center">
+                  <span class="md-checkbox vertical-center" authorization="DockerConfigDelete, DockerConfigCreate">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <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>
+                </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('CreatedAt')">
-                  Creation Date
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Creation Date'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'CreatedAt'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('CreatedAt')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
-                  Ownership
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Ownership'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/docker/components/datatables/events-datatable/eventsDatatable.html b/app/docker/components/datatables/events-datatable/eventsDatatable.html
index c7fcbb0ab..33ecf72c0 100644
--- a/app/docker/components/datatables/events-datatable/eventsDatatable.html
+++ b/app/docker/components/datatables/events-datatable/eventsDatatable.html
@@ -25,25 +25,31 @@
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Time')">
-                  Date
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Time' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Time' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Date'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Time'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Time' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Time')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Type')">
-                  Category
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Type' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Category'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Type'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Type' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Type')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Details')">
-                  Details
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Details' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Details' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Details'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Details'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Details' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Details')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
index 88ecceec2..f16d9a3e9 100644
--- a/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
+++ b/app/docker/components/datatables/macvlan-nodes-datatable/macvlanNodesDatatable.html
@@ -4,8 +4,8 @@
       <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>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+      <div class="searchBar vertical-center">
+        <pr-icon icon="'search'" feather="true"></pr-icon>
         <input
           type="text"
           class="searchInput"
@@ -25,39 +25,49 @@
                   <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('Hostname')">
-                  Name
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Hostname' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Hostname'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Hostname')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Role')">
-                  Role
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Role'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Role'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Role')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('EngineVersion')">
-                  Engine
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EngineVersion' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'EngineVersion' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Engine'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'EngineVersion'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'EngineVersion' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('EngineVersion')"
+                ></table-column-header>
               </th>
               <th ng-if="$ctrl.showIpAddressColumn">
-                <a ng-click="$ctrl.changeOrderBy('Addr')">
-                  IP Address
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Addr' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Addr' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'IP Address'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Addr'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Addr' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Addr')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Status')">
-                  Status
-                  <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>
+                <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>
             </tr>
           </thead>
diff --git a/app/docker/components/datatables/networks-datatable/networksDatatable.html b/app/docker/components/datatables/networks-datatable/networksDatatable.html
index 823af344f..e6da1e9d0 100644
--- a/app/docker/components/datatables/networks-datatable/networksDatatable.html
+++ b/app/docker/components/datatables/networks-datatable/networksDatatable.html
@@ -91,81 +91,103 @@
                 </a>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('StackName')">
-                  Stack
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Stack'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'StackName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('StackName')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Driver')">
-                  Driver
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Driver' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Driver'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Driver'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Driver' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Driver')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Attachable')">
-                  Attachable
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Attachable' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Attachable' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Attachable'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Attachable'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Attachable' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Attachable')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('IPAM.Driver')">
-                  IPAM Driver
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.Driver' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.Driver' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'IPAM Driver'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'IPAM.Driver'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'IPAM.Driver' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('IPAM.Driver')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')">
-                  IPV4 IPAM Subnet
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'IPV4 IPAM Subnet'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Subnet' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Subnet')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')">
-                  IPV4 IPAM Gateway
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'IPV4 IPAM Gateway'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV4Configs[0].Gateway' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('IPAM.IPV4Configs[0].Gateway')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')">
-                  IPV6 IPAM Subnet
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'IPV6 IPAM Subnet'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Subnet' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Subnet')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')">
-                  IPV6 IPAM Gateway
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'IPV6 IPAM Gateway'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'IPAM.IPV6Configs[0].Gateway' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('IPAM.IPV6Configs[0].Gateway')"
+                ></table-column-header>
               </th>
               <th ng-if="$ctrl.showHostColumn">
-                <a ng-click="$ctrl.changeOrderBy('NodeName')">
-                  Host
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'NodeName' && !$ctrl.state.reverseOrder"> </pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"> </pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Host'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'NodeName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'NodeName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('NodeName')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
-                  Ownership
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Ownership'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
index 8c7c99a9e..e3eeff25c 100644
--- a/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
+++ b/app/docker/components/datatables/node-tasks-datatable/nodeTasksDatatable.html
@@ -4,8 +4,8 @@
       <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>
-      <div class="searchBar">
-        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
+      <div class="searchBar vertical-center">
+        <pr-icon icon="'search'" feather="true"></pr-icon>
         <input
           type="text"
           class="searchInput"
@@ -21,39 +21,49 @@
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Id')">
-                  Id
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('Status')">
-                  Status
-                  <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>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('Slot')">
-                  Slot
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('Spec.ContainerSpec.Image')">
-                  Image
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Spec.ContainerSpec.Image' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Spec.ContainerSpec.Image' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('Updated')">
-                  Last Update
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <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>
diff --git a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
index a91397e28..ab4086e42 100644
--- a/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
+++ b/app/docker/components/datatables/nodes-datatable/nodesDatatable.html
@@ -61,60 +61,76 @@
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Hostname')">
-                  Name
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Hostname' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Name'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Hostname'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Hostname' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Hostname')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Role')">
-                  Role
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Role' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Role'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Role'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Role' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Role')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('CPUs')">
-                  CPU
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'CPUs' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'CPUs' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'CPU'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'CPUs'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'CPUs' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('CPUs')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Memory')">
-                  Memory
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Memory' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Memory'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Memory'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Memory' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Memory')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('EngineVersion')">
-                  Engine
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'EngineVersion' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'EngineVersion' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Engine'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'EngineVersion'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'EngineVersion' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('EngineVersion')"
+                ></table-column-header>
               </th>
               <th ng-if="$ctrl.showIpAddressColumn">
-                <a ng-click="$ctrl.changeOrderBy('Addr')">
-                  IP Address
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Addr' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Addr' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'IP Address'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Addr'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Addr' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Addr')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Status')">
-                  Status
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Status' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Status' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('Availability')">
-                  Availability
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Availability' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Availability' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Availability'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Availability'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Availability' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Availability')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
index 466edbe6c..dc5f09935 100644
--- a/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
+++ b/app/docker/components/datatables/secrets-datatable/secretsDatatable.html
@@ -82,29 +82,37 @@
           <thead>
             <tr>
               <th>
-                <span class="md-checkbox" authorization="DockerSecretDelete, DockerSecretCreate">
-                  <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('Name')">
-                  Name
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <div class="flex flex-nowrap items-center">
+                  <span class="md-checkbox vertical-center" authorization="DockerSecretDelete, DockerSecretCreate">
+                    <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                    <label for="select_all"></label>
+                  </span>
+                  <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>
+                </div>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('CreatedAt')">
-                  Creation Date
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Creation Date'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'CreatedAt'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'CreatedAt' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('CreatedAt')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
-                  Ownership
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Ownership'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
index cee98db02..f3d20bd3e 100644
--- a/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
+++ b/app/docker/components/datatables/service-tasks-datatable/serviceTasksDatatable.html
@@ -30,25 +30,31 @@
         <th style="width: 22%">Task</th>
         <th>Actions</th>
         <th>
-          <a ng-click="$ctrl.changeOrderBy('Slot')">
-            Slot
-            <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && !$ctrl.state.reverseOrder"></i>
-            <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"></i>
-          </a>
+          <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>
-          <a ng-click="$ctrl.changeOrderBy('NodeId')">
-            Node
-            <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && !$ctrl.state.reverseOrder"></i>
-            <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"></i>
-          </a>
+          <table-column-header
+            col-title="'Node'"
+            can-sort="true"
+            is-sorted="$ctrl.state.orderBy === 'NodeId'"
+            is-sorted-desc="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"
+            ng-click="$ctrl.changeOrderBy('NodeId')"
+          ></table-column-header>
         </th>
         <th>
-          <a ng-click="$ctrl.changeOrderBy('Updated')">
-            Last Update
-            <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && !$ctrl.state.reverseOrder"></i>
-            <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"></i>
-          </a>
+          <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>
diff --git a/app/docker/components/datatables/services-datatable/servicesDatatable.html b/app/docker/components/datatables/services-datatable/servicesDatatable.html
index d190d84d3..8f45f6219 100644
--- a/app/docker/components/datatables/services-datatable/servicesDatatable.html
+++ b/app/docker/components/datatables/services-datatable/servicesDatatable.html
@@ -78,53 +78,67 @@
                 </a>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Name')">
-                  Name
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Name' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <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 ng-if="$ctrl.showStackColumn">
-                <a ng-click="$ctrl.changeOrderBy('StackName')">
-                  Stack
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Stack'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'StackName'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'StackName' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('StackName')"
+                ></table-column-header>
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.image.display">
-                <a ng-click="$ctrl.changeOrderBy('Image')">
-                  Image
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Image' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Image'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Image'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Image' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Image')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Mode')">
-                  Scheduling Mode
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Mode' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Mode' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Scheduling Mode'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Mode'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Mode' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Mode')"
+                ></table-column-header>
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.ports.display">
-                <a ng-click="$ctrl.changeOrderBy('Ports')">
-                  Published Ports
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'Ports' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Published Ports'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'Ports'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'Ports' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('Ports')"
+                ></table-column-header>
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.updated.display">
-                <a ng-click="$ctrl.changeOrderBy('UpdatedAt')">
-                  Last Update
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'UpdatedAt' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'UpdatedAt' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Last Update'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'UpdatedAt'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'UpdatedAt' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('UpdatedAt')"
+                ></table-column-header>
               </th>
               <th ng-show="$ctrl.columnVisibility.columns.ownership.display">
-                <a ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')">
-                  Ownership
-                  <pr-icon icon="'arrow-down'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && !$ctrl.state.reverseOrder"></pr-icon>
-                  <pr-icon icon="'arrow-up'" feather="true" ng-if="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"></pr-icon>
-                </a>
+                <table-column-header
+                  col-title="'Ownership'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'ResourceControl.Ownership'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'ResourceControl.Ownership' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('ResourceControl.Ownership')"
+                ></table-column-header>
               </th>
             </tr>
           </thead>
diff --git a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
index 767223757..b184cb76f 100644
--- a/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
+++ b/app/docker/components/datatables/tasks-datatable/tasksDatatable.html
@@ -1,57 +1,72 @@
 <div class="datatable">
   <rd-widget>
-    <rd-widget-header icon="{{ $ctrl.titleIcon }}" feather-icon="true" title-text="{{ $ctrl.titleText }}"></rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <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..."
-          ng-model-options="{ debounce: 300 }"
-        />
+      <div class="toolBar">
+        <div class="toolBarTitle vertical-center">
+          <pr-icon icon="$ctrl.titleIcon" feather="true" class-name="'icon-nested-blue'" mode="'primary'"></pr-icon>
+          {{ $ctrl.titleText }}
+        </div>
+        <div class="searchBar vertical-center">
+          <pr-icon icon="'search'" feather="true"></pr-icon>
+          <input
+            type="text"
+            class="searchInput"
+            ng-model="$ctrl.state.textFilter"
+            ng-change="$ctrl.onTextFilterChange()"
+            placeholder="Search for a task..."
+            ng-model-options="{ debounce: 300 }"
+          />
+        </div>
       </div>
       <div class="table-responsive">
         <table class="table table-hover nowrap-cells">
           <thead>
             <tr>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Status')">
-                  Status
-                  <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>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('Id')">
-                  Id
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Id' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <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>Actions</th>
               <th ng-if="$ctrl.showSlotColumn">
-                <a ng-click="$ctrl.changeOrderBy('Slot')">
-                  Slot
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Slot' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <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>
-                <a ng-click="$ctrl.changeOrderBy('NodeId')">
-                  Node
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <table-column-header
+                  col-title="'Node'"
+                  can-sort="true"
+                  is-sorted="$ctrl.state.orderBy === 'NodeId'"
+                  is-sorted-desc="$ctrl.state.orderBy === 'NodeId' && $ctrl.state.reverseOrder"
+                  ng-click="$ctrl.changeOrderBy('NodeId')"
+                ></table-column-header>
               </th>
               <th>
-                <a ng-click="$ctrl.changeOrderBy('Updated')">
-                  Last Update
-                  <i class="fa fa-sort-alpha-down" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && !$ctrl.state.reverseOrder"></i>
-                  <i class="fa fa-sort-alpha-up" aria-hidden="true" ng-if="$ctrl.state.orderBy === 'Updated' && $ctrl.state.reverseOrder"></i>
-                </a>
+                <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>
diff --git a/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx b/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
index 491bd52cf..a2ebd1b2c 100644
--- a/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
+++ b/app/react/docker/containers/components/ContainerQuickActions/ContainerQuickActions.tsx
@@ -120,7 +120,7 @@ function TaskQuickActions({ taskId, state }: TaskProps) {
             params={{ id: taskId }}
             title="Logs"
           >
-            <i className="fa fa-file-alt space-right" aria-hidden="true" />
+            <Icon icon="file-text" feather className="space-right" />
           </Link>
         </Authorized>
       )}
@@ -128,7 +128,7 @@ function TaskQuickActions({ taskId, state }: TaskProps) {
       {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" />
+            <Icon icon="info" feather className="space-right" />
           </Link>
         </Authorized>
       )}