From 41b626de420e3a6c2c5d39998fe9c7a6b9d7be75 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Tue, 15 Feb 2022 11:24:43 +0000
Subject: [PATCH 1/4] Fix arrow position

---
 superset-frontend/plugins/plugin-chart-table/src/Styles.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
index d6993520faaae..2b41a1d6ed275 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
@@ -40,9 +40,9 @@ export default styled.div`
   }
   th svg {
     color: ${({ theme: { colors } }) => colors.grayscale.light2};
-    position: relative;
+    position: absolute;
     vertical-align: middle;
-    margin: 0 ${({ theme: { gridUnit } }) => gridUnit}px;
+    margin: ${({ theme: { gridUnit } }) => `${gridUnit / 2}px ${gridUnit}px`};
   }
   th.is-sorted svg {
     color: ${({ theme: { colors } }) => colors.grayscale.base};

From ea95566a7e7d0472ee758f108160ea124f24c6c1 Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Tue, 15 Feb 2022 11:33:18 +0000
Subject: [PATCH 2/4] Improve position

---
 superset-frontend/plugins/plugin-chart-table/src/Styles.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
index 2b41a1d6ed275..fffda0055a303 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
@@ -42,7 +42,8 @@ export default styled.div`
     color: ${({ theme: { colors } }) => colors.grayscale.light2};
     position: absolute;
     vertical-align: middle;
-    margin: ${({ theme: { gridUnit } }) => `${gridUnit / 2}px ${gridUnit}px`};
+    top: ${({ theme: { gridUnit } }) => gridUnit * 2}px;
+    margin: 0 ${({ theme: { gridUnit } }) => gridUnit}px;
   }
   th.is-sorted svg {
     color: ${({ theme: { colors } }) => colors.grayscale.base};

From dd3143f4d70e6ca4fb3e649b9739675797a72f7d Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Mon, 21 Feb 2022 17:17:20 +0000
Subject: [PATCH 3/4] Add right position

---
 superset-frontend/plugins/plugin-chart-table/src/Styles.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
index fffda0055a303..25d2056d843ff 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
@@ -44,6 +44,7 @@ export default styled.div`
     vertical-align: middle;
     top: ${({ theme: { gridUnit } }) => gridUnit * 2}px;
     margin: 0 ${({ theme: { gridUnit } }) => gridUnit}px;
+    right: 0;
   }
   th.is-sorted svg {
     color: ${({ theme: { colors } }) => colors.grayscale.base};

From a3af166abc39ba5e3303d84481d18e10b24b0e9c Mon Sep 17 00:00:00 2001
From: geido <diegopucci.me@gmail.com>
Date: Tue, 22 Feb 2022 11:42:18 +0000
Subject: [PATCH 4/4] Improve styling

---
 .../plugins/plugin-chart-table/src/Styles.tsx         |  8 ++------
 .../plugins/plugin-chart-table/src/TableChart.tsx     | 11 +++++++++--
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
index 25d2056d843ff..68bdc141d7b75 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
@@ -33,18 +33,14 @@ export default styled.div`
   }
 
   thead > tr > th {
-    padding-right: 1.4em;
+    padding-right: 0;
     position: relative;
     background: ${({ theme: { colors } }) => colors.grayscale.light5};
     text-align: left;
   }
   th svg {
     color: ${({ theme: { colors } }) => colors.grayscale.light2};
-    position: absolute;
-    vertical-align: middle;
-    top: ${({ theme: { gridUnit } }) => gridUnit * 2}px;
-    margin: 0 ${({ theme: { gridUnit } }) => gridUnit}px;
-    right: 0;
+    margin: ${({ theme: { gridUnit } }) => gridUnit / 2}px;
   }
   th.is-sorted svg {
     color: ${({ theme: { colors } }) => colors.grayscale.base};
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index 29cc8199ed44c..85c200689e10d 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -430,8 +430,15 @@ export default function TableChart<D extends DataRecord = DataRecord>(
                 }}
               />
             ) : null}
-            {label}
-            <SortIcon column={col} />
+            <div
+              css={{
+                display: 'inline-flex',
+                alignItems: 'center',
+              }}
+            >
+              <span>{label}</span>
+              <SortIcon column={col} />
+            </div>
           </th>
         ),
         Footer: totals ? (