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]), };