Merge pull request woocommerce/woocommerce-admin#2139 from woocommerce/add/table-default-order

add defaultOrder field to tablecard header

plugins/woocommerce-admin/packages/components/CHANGELOG.md

@@ -1,6 +1,7 @@
 # 3.0.0 (unreleased)
 - <DateInput> and <DatePicker> got a `disabled` prop.
 - TableCard component: new `onPageChange` prop.
+- TableCard now has a `defaultOrder` parameter to specify default sort column sort order.
 - Pagination no longer considers `0` a valid input and triggers `onPageChange` on the input blur event.
 - Tweaks to SummaryListPlaceholder height in order to better match SummaryNumber.
 - EllipsisMenu component (breaking change): Remove `children` prop in favor of a render prop `renderContent` so that function arguments `isOpen`, `onToggle`, and `onClose` can be passed down.

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

@@ -83,7 +83,7 @@ class Table extends Component {
 		return () => {
 			const currentKey =
 				query.orderby || get( find( headers, { defaultSort: true } ), 'key', false );
-			const currentDir = query.order || DESC;
+			const currentDir = query.order || get( find( headers, { key: currentKey } ), 'defaultOrder', DESC );
 			let dir = DESC;
 			if ( key === currentKey ) {
 				dir = DESC === currentDir ? ASC : DESC;
@@ -116,7 +116,7 @@ class Table extends Component {
 			'is-scrollable': isScrollable,
 		} );
 		const sortedBy = query.orderby || get( find( headers, { defaultSort: true } ), 'key', false );
-		const sortDir = query.order || DESC;
+		const sortDir = query.order || get( find( headers, { key: sortedBy } ), 'defaultOrder', DESC );
 
 		return (
 			<div
@@ -248,6 +248,10 @@ Table.propTypes = {
 			 * Boolean, true if this column is the default for sorting. Only one column should have this set.
 			 */
 			defaultSort: PropTypes.bool,
+			/**
+			 * String, asc|desc if this column is the default for sorting. Only one column should have this set.
+			 */
+			defaultOrder: PropTypes.string,
 			/**
 			 * Boolean, true if this column should be aligned to the left.
 			 */