diff --git a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js b/plugins/woocommerce-admin/client/analytics/components/report-table/index.js index 6f672fd209c..322e9a3a017 100644 --- a/plugins/woocommerce-admin/client/analytics/components/report-table/index.js +++ b/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 } diff --git a/plugins/woocommerce-admin/packages/components/src/table/index.js b/plugins/woocommerce-admin/packages/components/src/table/index.js index 1963389a5a8..0bca88cc20a 100644 --- a/plugins/woocommerce-admin/packages/components/src/table/index.js +++ b/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' ) } /> ) : ( @@ -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: [],