Add noDataLabel into Table component allowing to customise No Data Label message. (#36124)

* Add noDataLabel property to allow No Data Message customization

* Adding changelog

* Update variable name

* Add story book use case

packages/js/components/changelog/enhancement-table-add-no-data-label-property

@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add noDataLabel property into table.js component to allow No Data label customization.

packages/js/components/src/table/README.md

@@ -241,6 +241,7 @@ Name | Type | Default | Description
 `rows` | Array | `null` | (required) An array of arrays of display/value object pairs
 `rowHeader` | One of type: number, bool | `0` | Which column should be the row header, defaults to the first item (`0`) (but could be set to `1`, if the first col is checkboxes, for example). Set to false to disable row headers
 `rowKey` | Function(row, index): string | `null` | Function used to get the row key.
+`emptyMessage` | String | `undefined` | Customize the message to show when there are no rows in the table.
 
 ### `headers` structure
 

packages/js/components/src/table/index.js

@@ -153,6 +153,7 @@ class TableCard extends Component {
 			title,
 			totalRows,
 			rowKey,
+			emptyMessage,
 		} = this.props;
 		const { showCols } = this.state;
 		const allHeaders = this.props.headers;
@@ -237,6 +238,7 @@ class TableCard extends Component {
 							query={ query }
 							onSort={ onSort || onQueryChange( 'sort' ) }
 							rowKey={ rowKey }
+							emptyMessage={ emptyMessage }
 						/>
 					) }
 				</CardBody>
@@ -361,6 +363,10 @@ TableCard.propTypes = {
 	 * This uses the index if not defined.
 	 */
 	rowKey: PropTypes.func,
+	/**
+	 * Customize the message to show when there are no rows in the table.
+	 */
+	emptyMessage: PropTypes.string,
 };
 
 TableCard.defaultProps = {
@@ -372,6 +378,7 @@ TableCard.defaultProps = {
 	rowHeader: 0,
 	rows: [],
 	showMenu: true,
+	emptyMessage: undefined,
 };
 
 export default TableCard;

packages/js/components/src/table/stories/table.js

@@ -20,6 +20,18 @@ export const Basic = () => (
 	</Card>
 );
 
+export const NoDataCustomMessage = () => (
+	<Card size={ null }>
+		<Table
+			caption="Revenue last week"
+			rows={ [] }
+			headers={ headers }
+			rowKey={ ( row ) => row[ 0 ].value }
+			emptyMessage="Custom empty message"
+		/>
+	</Card>
+);
+
 export default {
 	title: 'WooCommerce Admin/components/Table',
 	component: Table,

packages/js/components/src/table/table.js

@@ -148,6 +148,7 @@ class Table extends Component {
 			query,
 			rowHeader,
 			rows,
+			emptyMessage,
 		} = this.props;
 		const { isScrollableRight, isScrollableLeft, tabIndex } = this.state;
 
@@ -361,10 +362,11 @@ class Table extends Component {
 									className="woocommerce-table__empty-item"
 									colSpan={ headers.length }
 								>
-									{ __(
-										'No data to display',
-										'woocommerce'
-									) }
+									{ emptyMessage ??
+										__(
+											'No data to display',
+											'woocommerce'
+										) }
 								</td>
 							</tr>
 						) }
@@ -471,6 +473,10 @@ Table.propTypes = {
 	 * Defaults to index.
 	 */
 	rowKey: PropTypes.func,
+	/**
+	 * Customize the message to show when there are no rows in the table.
+	 */
+	emptyMessage: PropTypes.string,
 };
 
 Table.defaultProps = {
@@ -479,6 +485,7 @@ Table.defaultProps = {
 	onSort: noop,
 	query: {},
 	rowHeader: 0,
+	emptyMessage: undefined,
 };
 
 export default withInstanceId( Table );

packages/js/components/src/table/test/index.js

@@ -172,6 +172,39 @@ describe( 'TableCard', () => {
 			'is-left-aligned'
 		);
 	} );
+
+	it( 'should render the default "No data to display" when there are no data and emptyMessage is unset', () => {
+		render(
+			<TableCard
+				title="My table"
+				headers={ mockHeaders }
+				isLoading={ false }
+				rows={ [] }
+				rowsPerPage={ 5 }
+			/>
+		);
+
+		expect(
+			screen.queryByText( 'No data to display' )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should render the custom label set in emptyMessage when there are no data.', () => {
+		const emptyMessage = 'My no data label';
+
+		render(
+			<TableCard
+				title="My table"
+				headers={ mockHeaders }
+				isLoading={ false }
+				rows={ [] }
+				rowsPerPage={ 5 }
+				emptyMessage={ emptyMessage }
+			/>
+		);
+
+		expect( screen.queryByText( emptyMessage ) ).toBeInTheDocument();
+	} );
 } );
 
 describe( 'Table', () => {