diff --git a/src/Table/README.mdx b/src/Table/README.mdx
index b7d3695d..e040a0f3 100644
--- a/src/Table/README.mdx
+++ b/src/Table/README.mdx
@@ -63,9 +63,10 @@ The table above can also be set up using an array of objects to define the colum
### Customisation example
-- Use `cellRenderer` to easily customise the way a cell's content is rendered.
-- Use fixed or percentage `width` values to customise column sizes.
+- Use `cellRenderer` to easily customise the way a cell's content is rendered
+- Use fixed or percentage `width` values to customise column sizes
- Use the `shadedHeader` prop for a shaded table header background
+- Use the `subtitle` prop to add a subtitle to a column header
- Use the `pl` or `pr` props to specify left and right inner padding on the table, to visually align the first and last columns with the rest of the design without affecting horizontal rules
@@ -74,7 +75,10 @@ The table above can also be set up using an array of objects to define the colum
name="Role"
width={30}
cellRenderer={item => (
-
+
)}
/>
{item.name}}
/>
-
+
diff --git a/src/Table/index.js b/src/Table/index.js
index d104328d..cdc52455 100644
--- a/src/Table/index.js
+++ b/src/Table/index.js
@@ -21,6 +21,7 @@ const StyledTable = styled.table`
display: table;
table-layout: fixed;
border-spacing: 0;
+ line-height: 1.3;
${marginProps}
@@ -36,7 +37,8 @@ const StyledTable = styled.table`
font-weight: inherit;
text-align: left;
height: ${p => pxToRem(p.rowMinHeight)};
- padding: 0 ${p => p.theme.globals.spacing.xs};
+ padding: ${p => p.theme.globals.spacing.xxs}
+ ${p => p.theme.globals.spacing.xs};
}
thead th {
@@ -130,7 +132,7 @@ function Table({
{columns.map(column => {
- const {name, width} = column;
+ const {name, subtitle, width} = column;
return (
{headerRenderer(column)}
+ {subtitle && (
+
+ {subtitle}
+
+ )}
|
);
})}
@@ -204,8 +211,9 @@ const columnPropsShape = {
allowLineBreaks: PropTypes.bool,
cellRenderer: PropTypes.func,
isHeading: PropTypes.bool,
- name: PropTypes.string.isRequired,
minWidth: PropTypes.number,
+ name: PropTypes.string.isRequired,
+ subtitle: PropTypes.string,
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
};