New propery for first time sorting direction

Author: sethu1504

components/data-table/__examples__/advanced-single-select-fixed-header.jsx

@@ -131,12 +131,12 @@ class Example extends React.Component {
 						selectRows="radio"
 					>
 						<DataTableColumn
-							isSorted={this.state.sortColumn === 'opportunityName'}
+							isSorted={false}
 							label="Name"
 							primaryColumn
 							property="opportunityName"
 							sortable
-							sortDirection={this.state.sortColumnDirection.opportunityName}
+							sortDirection={null}
 							width="10rem"
 						>
 							<CustomDataTableCell />

components/data-table/__tests__/data-table.browser-test.jsx

@@ -396,6 +396,28 @@ describe('DataTable: ', function() {
 			Simulate.click(sortButton, {});
 		});
 
+		it('first clicked on sortable column header should result in sort specifid in firstSortDirection if given', function(done) {
+			this.onSort = (data) => {
+				data.property.should.equal('count');
+				data.sortDirection.should.equal('desc');
+				done();
+			};
+
+			renderTable(
+				<DataTable {...defaultProps} fixedLayout onSort={this.onSort}>
+					{columns.map((columnProps) => (
+						<DataTableColumn {...columnProps} firstSortDirection='desc' key={columnProps.property} />
+					))}
+				</DataTable>
+			).call(this);
+
+			const thead = getTable(this.dom).querySelectorAll('thead')[0];
+			const thirdColumn = thead.querySelectorAll('th')[2];
+			const sortButton = thead.querySelectorAll('a')[0];
+
+			Simulate.click(sortButton, {});
+		});
+
 		it('does not call onSort when a non-sortable column is clicked', function(done) {
 			this.onSort = () => {
 				done('sort called');

components/data-table/private/header-cell.jsx

@@ -25,6 +25,10 @@ import {
 	DATA_TABLE_COLUMN,
 } from '../../../utilities/constants';
 
+const defaultProps = {
+	firstSortDirection: 'asc'
+};
+
 /**
  * Used internally, renders each individual column heading.
  */
@@ -70,12 +74,18 @@ class DataTableHeaderCell extends React.Component {
 		 * The current sort direction.
 		 */
 		sortDirection: PropTypes.oneOf(['desc', 'asc']),
+		/**
+		 * The default sort direction for the first time if the column is not sorted and sortDirection not given
+		 */
+		firstSortDirection: PropTypes.oneOf(['asc', 'desc']),
 		/**
 		 * Width of column. This is required for advanced/fixed layout tables. Please provide units. (`rems` are recommended)
 		 */
 		width: PropTypes.string,
 	};
 
+	static defaultProps = defaultProps;
+
 	state = {
 		sortDirection: null,
 	};
@@ -94,7 +104,11 @@ class DataTableHeaderCell extends React.Component {
 	handleSort = (e) => {
 		const oldSortDirection =
 			this.props.sortDirection || this.state.sortDirection;
-		const sortDirection = oldSortDirection === 'asc' ? 'desc' : 'asc';
+		// var sortDirection = this.props.firstSortDirection
+		// if (oldSortDirection) {
+		// 	sortDirection = oldSortDirection === 'asc' ? 'desc' : 'asc'
+		// }
+		const sortDirection = oldSortDirection ? (oldSortDirection === 'asc' ? 'desc' : 'asc') : (this.props.firstSortDirection)
 		const data = {
 			property: this.props.property,
 			sortDirection,
@@ -114,7 +128,7 @@ class DataTableHeaderCell extends React.Component {
 		const { fixedHeader, isSorted, label, sortable, width } = this.props;
 
 		const labelType = typeof label;
-		const sortDirection = this.props.sortDirection || this.state.sortDirection;
+		const sortDirection = (!this.props.sortDirection && !this.state.sortDirection) ? this.props.firstSortDirection : (this.props.sortDirection || this.state.sortDirection);
 		const expandedSortDirection =
 			sortDirection === 'desc' ? 'descending' : 'ascending';
 		const ariaSort = isSorted ? expandedSortDirection : 'none';
@@ -144,7 +158,7 @@ class DataTableHeaderCell extends React.Component {
 						name={sortDirection === 'desc' ? 'arrowdown' : 'arrowup'}
 						size="x-small"
 					/>
-					{sortDirection ? (
+					{(sortDirection && this.state.sortable) ? (
 						<span
 							className="slds-assistive-text"
 							aria-live="assertive"