change default InMemoryTable sorting behavior

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `allowNeutralSort` prop to `EuiInMemoryTable` to support unsorting table columns ([#1591](https://github.com/elastic/eui/pull/1591))
 - Added `mobileOptions` object prop for handling of all the mobile specific options of `EuiBasicTable` ([#1462](https://github.com/elastic/eui/pull/1462))
 - Table headers now accept `React.node` types ([#1462](https://github.com/elastic/eui/pull/1462))
 - Added `displayOnly` prop to `EuiFormRow` ([#1582](https://github.com/elastic/eui/pull/1582))

src-docs/src/views/tables/basic/props_info.js

@@ -136,6 +136,11 @@ export const propsInfo = {
           description: 'Indicates the property/field to sort on',
           required: false,
           type: { name: '{ field: string, direction: "asc" | "desc" }' }
+        },
+        allowNeutralSort: {
+          description: 'Enables/disables unsorting of table columns. Supported by EuiInMemoryTable.',
+          required: false,
+          type: { name: 'bool' }
         }
       }
     }

src-docs/src/views/tables/in_memory/props_info.js

@@ -43,6 +43,11 @@ export const propsInfo = {
           required: false,
           type: { name: 'boolean | #Sorting' }
         },
+        allowNeutralSort: {
+          description: 'Enables/disables unsorting of table columns. Defaults to true.',
+          required: false,
+          type: { name: 'boolean' }
+        },
         search: {
           description: 'Configures a search bar for the table',
           required: false,

src/components/basic_table/__snapshots__/in_memory_table.test.js.snap

@@ -792,6 +792,7 @@ exports[`EuiInMemoryTable with initial sorting 1`] = `
   responsive={true}
   sorting={
     Object {
+      "allowNeutralSort": true,
       "sort": Object {
         "direction": "desc",
         "field": "name",
@@ -1265,6 +1266,7 @@ exports[`EuiInMemoryTable with pagination, selection and sorting 1`] = `
   }
   sorting={
     Object {
+      "allowNeutralSort": true,
       "sort": undefined,
     }
   }
@@ -1345,6 +1347,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting  and simple search
     }
     sorting={
       Object {
+        "allowNeutralSort": true,
         "sort": undefined,
       }
     }
@@ -1419,6 +1422,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and a single recor
   }
   sorting={
     Object {
+      "allowNeutralSort": true,
       "sort": undefined,
     }
   }
@@ -1477,6 +1481,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and column rendere
   }
   sorting={
     Object {
+      "allowNeutralSort": true,
       "sort": undefined,
     }
   }
@@ -1569,6 +1574,7 @@ exports[`EuiInMemoryTable with pagination, selection, sorting and configured sea
     }
     sorting={
       Object {
+        "allowNeutralSort": true,
         "sort": undefined,
       }
     }
@@ -1612,6 +1618,7 @@ exports[`EuiInMemoryTable with sorting 1`] = `
   responsive={true}
   sorting={
     Object {
+      "allowNeutralSort": true,
       "sort": undefined,
     }
   }

src/components/basic_table/basic_table.js

@@ -140,7 +140,8 @@ export const SelectionType = PropTypes.shape({
 });
 
 const SortingType = PropTypes.shape({
-  sort: PropertySortType
+  sort: PropertySortType,
+  allowNeutralSort: PropTypes.bool,
 });
 
 const BasicTablePropTypes = {
@@ -550,6 +551,7 @@ export class EuiBasicTable extends Component {
         sorting.isSorted = !!sortDirection;
         sorting.isSortAscending = sortDirection ? SortDirection.isAsc(sortDirection) : undefined;
         sorting.onSort = this.resolveColumnOnSort(column);
+        sorting.allowNeutralSort = this.props.sorting.allowNeutralSort;
       }
       headers.push(
         <EuiTableHeaderCell

src/components/basic_table/in_memory_table.js

@@ -72,6 +72,10 @@ const InMemoryTablePropTypes = {
       sort: PropertySortType
     })
   ]),
+  /**
+   * Set `allowNeutralSort` to false to force column sorting. Defaults to true.
+   */
+  allowNeutralSort: PropTypes.bool,
   selection: SelectionType,
   itemId: ItemIdType,
   rowProps: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -163,7 +167,7 @@ export class EuiInMemoryTable extends Component {
   constructor(props) {
     super(props);
 
-    const { search, pagination, sorting } = props;
+    const { search, pagination, sorting, allowNeutralSort } = props;
     const { pageIndex, pageSize, pageSizeOptions, hidePerPageOptions } = getInitialPagination(pagination);
     const { sortField, sortDirection } = getInitialSorting(sorting);
 
@@ -177,6 +181,7 @@ export class EuiInMemoryTable extends Component {
       pageSizeOptions,
       sortField,
       sortDirection,
+      allowNeutralSort: (allowNeutralSort === false) ? false : true,
       hidePerPageOptions
     };
   }
@@ -191,11 +196,20 @@ export class EuiInMemoryTable extends Component {
       size: pageSize
     } = page;
 
-    const {
+    let {
       field: sortField,
       direction: sortDirection
     } = sort;
 
+    // Allow going back to 'neutral' sorting
+    if (this.state.allowNeutralSort &&
+      this.state.sortField === sortField
+      && this.state.sortDirection === 'desc'
+      && sortDirection === 'asc') {
+      sortField = '';
+      sortDirection = '';
+    }
+
     this.setState({
       pageIndex,
       pageSize,
@@ -327,6 +341,7 @@ export class EuiInMemoryTable extends Component {
       search, // eslint-disable-line no-unused-vars
       onTableChange, // eslint-disable-line no-unused-vars
       executeQueryOptions, // eslint-disable-line no-unused-vars
+      allowNeutralSort, // eslint-disable-line no-unused-vars
       ...rest
     } = this.props;
 
@@ -352,12 +367,12 @@ export class EuiInMemoryTable extends Component {
     // Data loaded from a server can have a default sort order which is meaningful to the
     // user, but can't be reproduced with client-side sort logic. So we allow the table to display
     // rows in the order in which they're initially loaded by providing an undefined sorting prop.
-    // Once a user sorts a column, this will become a fully-defined sorting prop.
     const sorting = !hasSorting ? undefined : {
       sort: (!sortField && !sortDirection) ? undefined : {
         field: sortField,
         direction: sortDirection,
       },
+      allowNeutralSort: this.state.allowNeutralSort,
     };
 
     const searchBar = this.renderSearchBar();

src/components/table/table_header_cell.js

@@ -28,6 +28,7 @@ export const EuiTableHeaderCell = ({
   onSort,
   isSorted,
   isSortAscending,
+  allowNeutralSort,
   className,
   scope,
   mobileOptions,
@@ -56,6 +57,16 @@ export const EuiTableHeaderCell = ({
       ariaSortValue = isSortAscending ? 'ascending' : 'descending';
     }
 
+    function getScreenCasterDirection() {
+      if (ariaSortValue === 'ascending') {
+        return 'Click to sort in descending order';
+      } else if (allowNeutralSort && ariaSortValue === 'descending') {
+        return 'Click to unsort';
+      } else {
+        return 'Click to sort in ascending order';
+      }
+    }
+
     return (
       <th
         className={classes}
@@ -82,7 +93,7 @@ export const EuiTableHeaderCell = ({
               />
             )}
             <EuiScreenReaderOnly>
-              <span>{`Click to sort in ${(ariaSortValue === 'descending' || 'none') ? 'ascending' : 'descending'} order`}</span>
+              <span>{getScreenCasterDirection()}</span>
             </EuiScreenReaderOnly>
           </span>
         </button>
@@ -111,6 +122,11 @@ EuiTableHeaderCell.propTypes = {
   onSort: PropTypes.func,
   isSorted: PropTypes.bool,
   isSortAscending: PropTypes.bool,
+  /**
+   * Set `allowNeutralSort` on EuiInMemoryTable to false to force column sorting.
+   * EuiBasicTable always forces column sorting.
+   */
+  allowNeutralSort: PropTypes.bool,
   scope: PropTypes.oneOf(['col', 'row', 'colgroup', 'rowgroup']),
   /**
    * _DEPRECATED: use `mobileOptions.only = true`_