fix: Layout for sortable column headers (#229)

* Correct layout for sortable headers. * fix: Finalize layout of Table headers. * fix: sort icon spacing.
palmetto · Sep 11, 2020 · 804f0b9 · 804f0b9
1 parent fbc6f7b
commit 804f0b9
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/src/components/Table/Table.module.scss b/src/components/Table/Table.module.scss
@@ -15,6 +15,7 @@
   }
 
   .table {
+    margin-top: 1px;
     cursor: default;
     width: 100%;
     border-collapse: collapse;

diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss b/src/components/Table/TableHeaderCell/TableHeaderCell.module.scss
@@ -35,8 +35,10 @@
   }
 
   .heading {
-    display: inline;
-    margin-right: var(--table-header-sort-icon-spacing);
-    white-space: initial;
+    white-space: nowrap;
+
+    .sort-icon {
+      margin-left: var(--table-header-sort-icon-spacing);
+    }
   }
 }
diff --git a/src/components/Table/TableHeaderCell/TableHeaderCell.tsx b/src/components/Table/TableHeaderCell/TableHeaderCell.tsx
@@ -100,7 +100,9 @@ const TableHeaderCell: FC<TableHeaderCellProps> = ({
     };
 
     return (
-      renderArrows()
+      <span className={styles['sort-icon']}>
+        {renderArrows()}
+      </span>
     );
   };
 
@@ -145,10 +147,10 @@ const TableHeaderCell: FC<TableHeaderCellProps> = ({
       onClick={handleSort}
       onKeyDown={handleKeyPress}
     >
-      <span className={styles.heading}>
+      <div className={styles.heading}>
         {column.heading}
-      </span>
-      {isSortable && renderIcon()}
+        {isSortable && renderIcon()}
+      </div>
     </th>
   );
 };