Add a "no data" cell to the Table component.

plugins/woocommerce-admin/packages/components/src/table/style.scss

@@ -186,10 +186,15 @@
 }
 
 .woocommerce-table__header,
-.woocommerce-table__item {
-	@include font-size( 13 );
+.woocommerce-table__item,
+.woocommerce-table__empty-item {
 	padding: $gap $gap-large;
 	border-bottom: 1px solid $core-grey-light-500;
+}
+
+.woocommerce-table__header,
+.woocommerce-table__item {
+	@include font-size( 13 );
 	text-align: left;
 
 	> a:only-child {
@@ -243,6 +248,17 @@
 	}
 }
 
+.woocommerce-table__empty-item {
+	text-align: center;
+	@include font-size( 18 );
+	color: $core-grey-dark-300;
+	font-weight: bold;
+
+	@include breakpoint( '<782px' ) {
+		@include font-size( 13 );
+	}
+}
+
 th.woocommerce-table__item {
 	font-weight: normal;
 }

plugins/woocommerce-admin/packages/components/src/table/table.js

@@ -117,6 +117,7 @@ class Table extends Component {
 		} );
 		const sortedBy = query.orderby || get( find( headers, { defaultSort: true } ), 'key', false );
 		const sortDir = query.order || get( find( headers, { key: sortedBy } ), 'defaultOrder', DESC );
+		const hasData = !! rows.length;
 
 		return (
 			<div
@@ -199,25 +200,36 @@ class Table extends Component {
 								);
 							} ) }
 						</tr>
-						{ rows.map( ( row, i ) => (
-							<tr key={ i }>
-								{ row.map( ( cell, j ) => {
-									const { cellClassName, isLeftAligned, isNumeric } = headers[ j ];
-									const isHeader = rowHeader === j;
-									const Cell = isHeader ? 'th' : 'td';
-									const cellClasses = classnames( 'woocommerce-table__item', cellClassName, {
-										'is-left-aligned': isLeftAligned,
-										'is-numeric': isNumeric,
-										'is-sorted': sortedBy === headers[ j ].key,
-									} );
-									return (
-										<Cell scope={ isHeader ? 'row' : null } key={ j } className={ cellClasses }>
-											{ getDisplay( cell ) }
-										</Cell>
-									);
-								} ) }
-							</tr>
-						) ) }
+						{ hasData
+							? (
+								rows.map( ( row, i ) => (
+									<tr key={ i }>
+										{ row.map( ( cell, j ) => {
+											const { cellClassName, isLeftAligned, isNumeric } = headers[ j ];
+											const isHeader = rowHeader === j;
+											const Cell = isHeader ? 'th' : 'td';
+											const cellClasses = classnames( 'woocommerce-table__item', cellClassName, {
+												'is-left-aligned': isLeftAligned,
+												'is-numeric': isNumeric,
+												'is-sorted': sortedBy === headers[ j ].key,
+											} );
+											return (
+												<Cell scope={ isHeader ? 'row' : null } key={ j } className={ cellClasses }>
+													{ getDisplay( cell ) }
+												</Cell>
+											);
+										} ) }
+									</tr>
+								) )
+							)
+							: (
+								<tr>
+									<td className="woocommerce-table__empty-item" colSpan={ headers.length }>
+										{ __( 'No data for the selected date range', 'woocommerce-admin' ) }
+									</td>
+								</tr>
+							)
+						}
 					</tbody>
 				</table>
 			</div>