From 0cb093784d9c0ae62543af9bec65fea66168afff Mon Sep 17 00:00:00 2001
From: Fredrik Hallberg <saccer92@gmail.com>
Date: Wed, 19 Dec 2018 13:59:45 +0100
Subject: [PATCH 1/2] fix(TableContentWrapper): add ability to set thProps on
 cols

---
 src/components/table-content-wrapper/shapes.js      |  1 +
 .../table-content-wrapper/table-head/table-head.jsx | 13 +++++++++++--
 2 files changed, 12 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..90ed7f53 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
+                valign="bottom"
+                {...col.thProps}
               >
                 <span className={cn({ [classes.screenReadersOnly]: col.hideHeaderLabel })}>
                   {!col.sortable ? (

From 3be2d3d6cc90a5736deab04ed6f703a23f048476 Mon Sep 17 00:00:00 2001
From: Fredrik Hallberg <saccer92@gmail.com>
Date: Wed, 19 Dec 2018 16:28:02 +0100
Subject: [PATCH 2/2] fix(TableContentWrapper): use css vertical-align instead
 of valign

---
 src/components/table-content-wrapper/table-head/table-head.jsx | 2 +-
 .../table-content-wrapper/table-head/table-head.styles.js      | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

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 90ed7f53..7535381a 100644
--- a/src/components/table-content-wrapper/table-head/table-head.jsx
+++ b/src/components/table-content-wrapper/table-head/table-head.jsx
@@ -120,7 +120,7 @@ class TableHead extends Component {
                 scope="col"
                 role="columnheader"
                 unstyledChild
-                valign="bottom"
+                className={classes.th}
                 {...col.thProps}
               >
                 <span className={cn({ [classes.screenReadersOnly]: col.hideHeaderLabel })}>
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,