Merge pull request #1 from sethu1504/first-time-sort-direction-data-tables

First time sort direction data tables

Author: sethu1504

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

@@ -374,7 +374,7 @@ describe('DataTable: ', function() {
 	describe('Sortable', function() {
 		afterEach(removeTable);
 
-		it('first clicked on sortable column header should result in ascending sort', function(done) {
+		it('first clicked on sortable column header should result in ascending sort by default', function(done) {
 			this.onSort = (data) => {
 				data.property.should.equal('count');
 				data.sortDirection.should.equal('asc');
@@ -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/column.jsx

@@ -78,6 +78,10 @@ DataTableColumn.propTypes = {
 	 * Width of column. This is required for advanced/fixed layout tables. Please provide units. (`rems` are recommended)
 	 */
 	width: PropTypes.string,
+	/**
+	 * The default sort direction for the first time if the column is not sorted and sortDirection not given
+	 */
+	firstSortDirection: PropTypes.oneOf(['asc', 'desc'])
 };
 
 export default DataTableColumn;

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,10 @@ 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 data = {
 			property: this.props.property,
 			sortDirection,
@@ -114,7 +127,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 +157,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"