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
nordnet · Dec 19, 2018 · 1de324b · 1de324b
1 parent d1aeb25
commit 1de324b
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git 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
@@ -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
@@ -4,6 +4,9 @@ export default ({ typography, palette, mixins }) => ({
       display: 'none',
     },
   },
+  th: {
+    verticalAlign: 'bottom',
+  },
   button: {
     position: 'relative',
     fontFamily: typography.primary.fontFamily,