From 1de324b04a0bb9b7d08d0a470568e87dcb454c04 Mon Sep 17 00:00:00 2001
From: Fredrik Hallberg <saccer92@gmail.com>
Date: Wed, 19 Dec 2018 17:17:04 +0100
Subject: [PATCH] fix(TableContentWrapper): add ability to set thProps on cols
 (#485)

* fix(TableContentWrapper): add ability to set thProps on cols

* fix(TableContentWrapper): use css vertical-align instead of valign
---
 src/components/table-content-wrapper/shapes.js      |  1 +
 .../table-content-wrapper/table-head/table-head.jsx | 13 +++++++++++--
 .../table-head/table-head.styles.js                 |  3 +++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/table-content-wrapper/shapes.js b/src/components/table-content-wrapper/shapes.js
index 521f7a7f..e82e593c 100644
--- a/src/components/table-content-wrapper/shapes.js
+++ b/src/components/table-content-wrapper/shapes.js
@@ -12,6 +12,7 @@ export const colShape = PropTypes.shape({
   type: PropTypes.string,
   padding: PropTypes.bool,
   tdProps: PropTypes.shape({}),
+  thProps: PropTypes.shape({}),
   responsiveProps: PropTypes.shape({
     flexOrder: PropTypes.number,
     flexBasisMobile: PropTypes.number,
diff --git a/src/components/table-content-wrapper/table-head/table-head.jsx b/src/components/table-content-wrapper/table-head/table-head.jsx
index 2551e431..7535381a 100644
--- a/src/components/table-content-wrapper/table-head/table-head.jsx
+++ b/src/components/table-content-wrapper/table-head/table-head.jsx
@@ -32,7 +32,14 @@ TableHeadIcon.propTypes = {
   isSortedOn: PropTypes.bool.isRequired,
 };
 
-const TableHeadContent = ({ colSpec: { headerLabel, align, sortable }, classes, sortHandler, sortField, sortOrder, isSortedOn }) => {
+const TableHeadContent = ({
+  colSpec: { headerLabel, align = 'left', sortable },
+  classes,
+  sortHandler,
+  sortField,
+  sortOrder,
+  isSortedOn,
+}) => {
   const iconBefore = sortable && align === 'right';
   const iconAfter = sortable && align === 'left';
 
@@ -50,7 +57,7 @@ const TableHeadContent = ({ colSpec: { headerLabel, align, sortable }, classes,
     >
       {iconBefore && <TableHeadIcon classes={classes} sortOrder={sortOrder} isSortedOn={isSortedOn} />}
       {headerLabel}
-      {(!align || iconAfter) && <TableHeadIcon classes={classes} sortOrder={sortOrder} isSortedOn={isSortedOn} />}
+      {iconAfter && <TableHeadIcon classes={classes} sortOrder={sortOrder} isSortedOn={isSortedOn} />}
     </span>
   );
 };
@@ -113,6 +120,8 @@ class TableHead extends Component {
                 scope="col"
                 role="columnheader"
                 unstyledChild
+                className={classes.th}
+                {...col.thProps}
               >
                 <span className={cn({ [classes.screenReadersOnly]: col.hideHeaderLabel })}>
                   {!col.sortable ? (
diff --git a/src/components/table-content-wrapper/table-head/table-head.styles.js b/src/components/table-content-wrapper/table-head/table-head.styles.js
index 0c510c67..1f8f6951 100644
--- a/src/components/table-content-wrapper/table-head/table-head.styles.js
+++ b/src/components/table-content-wrapper/table-head/table-head.styles.js
@@ -4,6 +4,9 @@ export default ({ typography, palette, mixins }) => ({
       display: 'none',
     },
   },
+  th: {
+    verticalAlign: 'bottom',
+  },
   button: {
     position: 'relative',
     fontFamily: typography.primary.fontFamily,