Send tracks event when table sorting is changed.

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

@@ -38,6 +38,7 @@ class ReportTable extends Component {
 
 		this.onColumnsChange = this.onColumnsChange.bind( this );
 		this.onPageChange = this.onPageChange.bind( this );
+		this.onSort = this.onSort.bind( this );
 		this.scrollPointRef = createRef();
 	}
 
@@ -76,6 +77,19 @@ class ReportTable extends Component {
 		}
 	}
 
+	onSort( key, direction ) {
+		onQueryChange( 'sort' )( key, direction );
+
+		const { endpoint } = this.props;
+		const eventProps = {
+			report: endpoint,
+			column: key,
+			direction,
+		};
+
+		recordEvent( 'analytics_table_sort', eventProps );
+	}
+
 	filterShownHeaders( headers, hiddenKeys ) {
 		if ( ! hiddenKeys || ! hiddenKeys.length ) {
 			return headers;
@@ -160,6 +174,7 @@ class ReportTable extends Component {
 					isLoading={ isLoading }
 					onQueryChange={ onQueryChange }
 					onColumnsChange={ this.onColumnsChange }
+					onSort={ this.onSort }
 					onPageChange={ this.onPageChange }
 					rows={ rows }
 					rowsPerPage={ parseInt( query.per_page ) || QUERY_DEFAULTS.pageSize }

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

@@ -266,6 +266,7 @@ class TableCard extends Component {
 			isLoading,
 			onClickDownload,
 			onQueryChange,
+			onSort,
 			query,
 			rowHeader,
 			rowsPerPage,
@@ -376,7 +377,6 @@ class TableCard extends Component {
 							rowHeader={ rowHeader }
 							caption={ title }
 							query={ query }
-							onSort={ onQueryChange( 'sort' ) }
 						/>
 					</Fragment>
 				) : (
@@ -386,7 +386,7 @@ class TableCard extends Component {
 						rowHeader={ rowHeader }
 						caption={ title }
 						query={ query }
-						onSort={ onQueryChange( 'sort' ) }
+						onSort={ onSort || onQueryChange( 'sort' ) }
 					/>
 				) }
 
@@ -453,6 +453,10 @@ TableCard.propTypes = {
 	 * A function which returns a callback function which is called upon the user changing the visiblity of columns.
 	 */
 	onColumnsChange: PropTypes.func,
+	/**
+	 * A function which is called upon the user changing the sorting of the table.
+	 */
+	onSort: PropTypes.func,
 	/**
 	 * Whether the table must be downloadable. If true, the download button will appear.
 	 */
@@ -522,6 +526,7 @@ TableCard.defaultProps = {
 	isLoading: false,
 	onQueryChange: noop,
 	onColumnsChange: noop,
+	onSort: undefined,
 	query: {},
 	rowHeader: 0,
 	rows: [],