Add filters for order tables column headers/rows (https://github.com/woocommerce/woocommerce-admin/pull/781)

* Add filters for order tables column headers/rows

* Move filters inside rows

* Rename filter constants

* Apply filters directly to rows

* Rename Orders table filter to be more consistent with core

* Filter entire reports table

plugins/woocommerce-admin/client/analytics/components/report-table/index.js

@@ -2,6 +2,7 @@
 /**
  * External dependencies
  */
+import { applyFilters } from '@wordpress/hooks';
 import { Component } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { withSelect } from '@wordpress/data';
@@ -20,6 +21,8 @@ import { onQueryChange } from '@woocommerce/navigation';
 import ReportError from 'analytics/components/report-error';
 import { getReportChartData, getReportTableData } from 'store/reports/utils';
 
+const TABLE_FILTER = 'woocommerce_admin_report_table';
+
 class ReportTable extends Component {
 	render() {
 		const {
@@ -45,14 +48,18 @@ class ReportTable extends Component {
 		}
 
 		const isRequesting = tableData.isRequesting || primaryData.isRequesting;
-
-		const headers = getHeadersContent();
 		const orderedItems = orderBy( items.data, query.orderby, query.order );
-		const ids = itemIdField ? orderedItems.map( item => item[ itemIdField ] ) : null;
-		const rows = getRowsContent( orderedItems );
 		const totals = get( primaryData, [ 'data', 'totals' ], null );
 		const totalCount = items.totalCount || 0;
-		const summary = getSummary ? getSummary( totals, totalCount ) : null;
+		const { headers, ids, rows, summary } = applyFilters( TABLE_FILTER, {
+			endpoint: endpoint,
+			headers: getHeadersContent(),
+			orderedItems: orderedItems,
+			ids: itemIdField ? orderedItems.map( item => item[ itemIdField ] ) : null,
+			rows: getRowsContent( orderedItems ),
+			totals: totals,
+			summary: getSummary ? getSummary( totals, totalCount ) : null,
+		} );
 
 		return (
 			<TableCard

plugins/woocommerce-admin/client/analytics/report/orders/table.js

@@ -106,7 +106,6 @@ class OrdersReportTable extends Component {
 		const { query } = this.props;
 		const currentInterval = getIntervalForQuery( query );
 		const { tableFormat } = getDateFormatsForInterval( currentInterval );
-
 		return map( tableData, row => {
 			const {
 				date,

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

@@ -47,8 +47,8 @@ class TableCard extends Component {
 		super( props );
 		const { compareBy, query } = props;
 		this.state = {
-			showCols: props.headers.map( ( { hiddenByDefault } ) => ! hiddenByDefault ),
 			selectedRows: getIdsFromQuery( query[ compareBy ] ),
+			showCols: props.headers.map( ( { hiddenByDefault } ) => ! hiddenByDefault ),
 		};
 		this.toggleCols = this.toggleCols.bind( this );
 		this.onClickDownload = this.onClickDownload.bind( this );
@@ -58,13 +58,22 @@ class TableCard extends Component {
 		this.selectAllRows = this.selectAllRows.bind( this );
 	}
 
-	componentDidUpdate( { query: prevQuery } ) {
-		const { compareBy, query } = this.props;
+	componentDidUpdate( { query: prevQuery, headers: prevHeaders } ) {
+		const { compareBy, headers, query } = this.props;
 		const prevIds = getIdsFromQuery( prevQuery[ compareBy ] );
 		const currentIds = getIdsFromQuery( query[ compareBy ] );
 		if ( ! isEqual( prevIds.sort(), currentIds.sort() ) ) {
 			/* eslint-disable react/no-did-update-set-state */
-			this.setState( { selectedRows: currentIds } );
+			this.setState( {
+				selectedRows: currentIds,
+			} );
+			/* eslint-enable react/no-did-update-set-state */
+		}
+		if ( ! isEqual( headers, prevHeaders ) ) {
+			/* eslint-disable react/no-did-update-set-state */
+			this.setState( {
+				showCols: headers.map( ( { hiddenByDefault } ) => ! hiddenByDefault ),
+			} );
 			/* eslint-enable react/no-did-update-set-state */
 		}
 	}