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 && }
{headerLabel}
- {(!align || iconAfter) && }
+ {iconAfter && }
);
};
@@ -113,6 +120,8 @@ class TableHead extends Component {
scope="col"
role="columnheader"
unstyledChild
+ className={classes.th}
+ {...col.thProps}
>
{!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,