feat(Table): New emptyContent prop

src/Table/README.mdx

@@ -6,6 +6,7 @@ menu: Components
 import {Playground, Props} from 'docz';
 import Icon from '../Icon';
 import Table, {Column} from './';
+import CenterContent from '../CenterContent';
 import dummyData from './dummyData';
 
 # Table
@@ -34,7 +35,7 @@ The table data is provided as an array of objects. The column names defined will
 ```
 
 <Playground>
-	<Table data={dummyData.slice(0, 4)} itemKey="name">
+	<Table isLoading data={dummyData.slice(0, 4)} itemKey="name">
 		<Column isHeading name="Name" />
 		<Column name="Email" />
 		<Column name="Country" cellRenderer={item => item.region} />
@@ -129,6 +130,26 @@ The table below uses both modes – on medium sized screens, columns that don't
 			width="40%"
 			cellRenderer={item => <strong>{item.name}</strong>}
 		/>
+		<Column name="Region" />
+		<Column name="Type" />
+		<Column name="Time" />
+	</Table>
+</Playground>
+
+### Empty state
+
+When no `data` array is provided, or when its length is `0`, the message "No data to display" will be shown below the column headers. You can customise this message using the `emptyContent` prop.
+
+Use the `CenterContent` component to make the content appear centred and take up a minimum height.
+
+<Playground>
+	<Table
+		emptyContent={
+			<CenterContent height={180}>Here be dragons</CenterContent>
+		}
+	>
+		<Column name="Role" width={32} />
+		<Column isHeading name="Name" width="40%" />
 		<Column name="Region" hideBelowBreakpoint="m" />
 		<Column name="Type" hideBelowBreakpoint="xs" />
 		<Column name="Time" />

src/Table/index.js

@@ -9,6 +9,7 @@ import {positionProps, marginProps} from '../styleProps';
 import {getSpacing} from '../utils/spacing';
 
 import Text from '../Text';
+import CenterContent from '../CenterContent';
 
 import getColumnConfigFromChildren from './getColumnConfigFromChildren';
 
@@ -75,6 +76,10 @@ const StyledTable = styled.table`
 		${stickyHeaderStyles}
 	}
 
+	caption {
+		caption-side: bottom;
+	}
+
 	/* Border-radius madness */
 	border-radius: inherit;
 
@@ -228,6 +233,7 @@ function Table(props) {
 		children,
 		columns: columnsProp,
 		data,
+		emptyContent,
 		itemKey,
 		headerRenderer,
 		stickyHeaderOffset,
@@ -241,6 +247,8 @@ function Table(props) {
 		? getColumnConfigFromChildren(children)
 		: columnsProp;
 
+	const hasData = data && data.length > 0;
+
 	return (
 		<StyledTable
 			mobileViewBreakpoint={mobileViewBreakpoint}
@@ -282,37 +290,47 @@ function Table(props) {
 			</thead>
 			{/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
 			<tbody role="rowgroup">
-				{data.map(item => (
-					<tr key={item[itemKey]} role="row">
-						{columns.map(column => {
-							const {
-								cellRenderer,
-								isHeading,
-								hideBelowBreakpoint,
-								name,
-							} = column;
-
-							return (
-								<Cell
-									key={name}
-									as={isHeading && 'th'}
-									role={isHeading ? 'rowheader' : 'cell'}
-									scope={isHeading ? 'row' : null}
-									hideBelowBreakpoint={hideBelowBreakpoint}
-									data-columnheader={name}
-								>
-									{getCellContent(item, cellRenderer || name)}
-								</Cell>
-							);
-						})}
-					</tr>
-				))}
+				{hasData &&
+					data.map(item => (
+						<tr key={item[itemKey]} role="row">
+							{columns.map(column => {
+								const {
+									cellRenderer,
+									isHeading,
+									hideBelowBreakpoint,
+									name,
+								} = column;
+
+								return (
+									<Cell
+										key={name}
+										as={isHeading && 'th'}
+										role={isHeading ? 'rowheader' : 'cell'}
+										scope={isHeading ? 'row' : null}
+										hideBelowBreakpoint={
+											hideBelowBreakpoint
+										}
+										data-columnheader={name}
+									>
+										{getCellContent(
+											item,
+											cellRenderer || name
+										)}
+									</Cell>
+								);
+							})}
+						</tr>
+					))}
 			</tbody>
+			{!hasData && <caption>{emptyContent}</caption>}
 		</StyledTable>
 	);
 }
 
 Table.defaultProps = {
+	emptyContent: (
+		<CenterContent height={200}>No data to display</CenterContent>
+	),
 	itemKey: 'id',
 	headerRenderer: defaultHeaderRenderer,
 	mobileViewBreakpoint: 'xs',
@@ -323,6 +341,10 @@ Table.defaultProps = {
 Table.propTypes = {
 	columns: PropTypes.arrayOf(PropTypes.shape(columnPropsShape)),
 	data: PropTypes.array.isRequired,
+	/**
+	 * Content to be displayed when the passed data is empty
+	 */
+	emptyContent: PropTypes.element,
 	/**
 	 * Specify a unique key by which each item in
 	 * the provided `data` array can be identified