feat: New subtitle prop for Table columns

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
 
 <Playground>
@@ -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 => (
-				<Icon name={item.role === 'manager' ? 'star' : 'user'} />
+				<Icon
+					name={item.role === 'manager' ? 'star' : 'user'}
+					aria-label={item.role === 'manager' ? 'Manager' : 'User'}
+				/>
 			)}
 		/>
 		<Column
@@ -83,7 +87,7 @@ The table above can also be set up using an array of objects to define the colum
 			width="40%"
 			cellRenderer={item => <strong>{item.name}</strong>}
 		/>
-		<Column name="Type" />
+		<Column name="Type" subtitle="Random characters" />
 		<Column name="Time" />
 	</Table>
 </Playground>

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({
 				<thead role="rowgroup">
 					<tr role="row">
 						{columns.map(column => {
-							const {name, width} = column;
+							const {name, subtitle, width} = column;
 							return (
 								<th
 									hidden={hiddenColumns.includes(name)}
@@ -140,6 +142,11 @@ function Table({
 									style={width ? {width} : null}
 								>
 									{headerRenderer(column)}
+									{subtitle && (
+										<Text dimmed size="xs" display="block">
+											{subtitle}
+										</Text>
+									)}
 								</th>
 							);
 						})}
@@ -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]),
 };