fix: Position of arrows in Table chart (#18739)

* Fix arrow position * Improve position * Add right position * Improve styling
apache · Feb 22, 2022 · a9a8929 · a9a8929
1 parent 7cad143
commit a9a8929
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
@@ -33,16 +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: relative;
-    vertical-align: middle;
-    margin: 0 ${({ theme: { gridUnit } }) => gridUnit}px;
+    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
@@ -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 ? (