Disable table controls (except column visibility) when the table is empty.

plugins/woocommerce-admin/packages/components/src/filters/compare/button.js

@@ -12,8 +12,8 @@ import { Button, Tooltip } from '@wordpress/components';
  *
  * @return { object } -
  */
-const CompareButton = ( { className, count, children, helpText, onClick } ) =>
-	count < 2 ? (
+const CompareButton = ( { className, count, children, disabled, helpText, onClick } ) =>
+	! disabled && count < 2 ? (
 		<Tooltip text={ helpText }>
 			<span className={ className }>
 				<Button className="woocommerce-compare-button" isDefault disabled={ true }>
@@ -26,6 +26,7 @@ const CompareButton = ( { className, count, children, helpText, onClick } ) =>
 			className={ classnames( 'woocommerce-compare-button', className ) }
 			isDefault
 			onClick={ onClick }
+			disabled={ disabled }
 		>
 			{ children }
 		</Button>
@@ -52,6 +53,10 @@ CompareButton.propTypes = {
 	 * The function called when the button is clicked.
 	 */
 	onClick: PropTypes.func.isRequired,
+	/**
+	 * Whether the control is disabled or not.
+	 */
+	disabled: PropTypes.bool,
 };
 
 export default CompareButton;

plugins/woocommerce-admin/packages/components/src/search/index.js

@@ -178,6 +178,7 @@ class Search extends Component {
 			selected,
 			showClearButton,
 			staticResults,
+			disabled,
 		} = this.props;
 		const { value = '', isActive } = this.state;
 		const aria = {
@@ -239,6 +240,7 @@ class Search extends Component {
 											shouldRenderTags ? `search-inline-input-${ instanceId }` : null
 										}
 										{ ...aria }
+										disabled={ disabled }
 									/>
 									<span id={ `search-inline-input-${ instanceId }` } className="screen-reader-text">
 										{ __( 'Move backward for selected items', 'woocommerce-admin' ) }
@@ -257,6 +259,7 @@ class Search extends Component {
 									aria-owns={ listBoxId }
 									aria-activedescendant={ activeId }
 									{ ...aria }
+									disabled={ disabled }
 								/>
 							</Fragment>
 						)
@@ -338,6 +341,10 @@ Search.propTypes = {
 	 * Render results list positioned statically instead of absolutely.
 	 */
 	staticResults: PropTypes.bool,
+	/**
+	 * Whether the control is disabled or not.
+	 */
+	disabled: PropTypes.bool,
 };
 
 Search.defaultProps = {
@@ -347,6 +354,7 @@ Search.defaultProps = {
 	inlineTags: false,
 	showClearButton: false,
 	staticResults: false,
+	disabled: false,
 };
 
 export default withInstanceId( Search );

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

@@ -250,7 +250,8 @@ class TableCard extends Component {
 	getAllCheckbox() {
 		const { ids = [] } = this.props;
 		const { selectedRows } = this.state;
-		const isAllChecked = ids.length > 0 && ids.length === selectedRows.length;
+		const hasData = ids.length > 0;
+		const isAllChecked = hasData && ids.length === selectedRows.length;
 		return {
 			cellClassName: 'is-checkbox-column',
 			label: (
@@ -259,6 +260,7 @@ class TableCard extends Component {
 					onChange={ this.selectAllRows }
 					aria-label={ __( 'Select All' ) }
 					checked={ isAllChecked }
+					disabled={ ! hasData }
 				/>
 			),
 			required: true,
@@ -295,6 +297,7 @@ class TableCard extends Component {
 			} );
 			headers = [ this.getAllCheckbox(), ...headers ];
 		}
+		const hasData = 0 < totalRows;
 
 		const className = classnames( 'woocommerce-analytics__card', {
 			'woocommerce-table': true,
@@ -316,6 +319,7 @@ class TableCard extends Component {
 								labels.helpText || __( 'Check at least two items below to compare', 'woocommerce-admin' )
 							}
 							onClick={ this.onCompare }
+							disabled={ ! hasData }
 						>
 							{ labels.compareButton || __( 'Compare', 'woocommerce-admin' ) }
 						</CompareButton>
@@ -330,13 +334,14 @@ class TableCard extends Component {
 							selected={ searchedLabels }
 							showClearButton={ true }
 							type={ searchBy }
+							disabled={ ! hasData }
 						/>
 					),
 					( downloadable || onClickDownload ) && (
 						<IconButton
 							key="download"
 							className="woocommerce-table__download-button"
-							disabled={ isLoading }
+							disabled={ isLoading || ! hasData }
 							onClick={ this.onClickDownload }
 							isLink
 						>

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

@@ -184,7 +184,7 @@ class Table extends Component {
 														)
 													}
 													aria-describedby={ labelId }
-													onClick={ this.sortBy( key ) }
+													onClick={ hasData ? this.sortBy( key ) : noop }
 													isDefault
 												>
 													{ textLabel }