diff --git a/lib/MultiColumnList/MCLRenderer.js b/lib/MultiColumnList/MCLRenderer.js index 64572e898..f1b29f773 100644 --- a/lib/MultiColumnList/MCLRenderer.js +++ b/lib/MultiColumnList/MCLRenderer.js @@ -254,6 +254,7 @@ class MCLRenderer extends React.Component { selectedClass: PropTypes.string, selectedRow: PropTypes.object, showSortIndicator: PropTypes.bool, + sortableFields: PropTypes.arrayOf(PropTypes.string), sortDirection: PropTypes.oneOf(['ascending', 'descending']), sortedColumn: PropTypes.string, sortOrder: PropTypes.string, @@ -297,6 +298,7 @@ class MCLRenderer extends React.Component { scrollToIndex: 0, selectedClass: css.mclSelected, showSortIndicator: false, + sortableFields: [], striped: true, totalCount: 0, minimumRowHeight: 30.8, @@ -1550,7 +1552,14 @@ class MCLRenderer extends React.Component { }; getHeaderClassName = (column, sortedBy, isInteractive) => { - const { showSortIndicator } = this.props; + const { + showSortIndicator, + sortableFields, + } = this.props; + + const isSortable = sortableFields.length + ? sortableFields.includes(column) + : isInteractive; return classnames( css.mclHeader, @@ -1558,7 +1567,7 @@ class MCLRenderer extends React.Component { { [`${css.mclSorted}`]: sortedBy }, { [`${css.mclAscending}`]: (sortedBy && this.props.sortDirection === 'ascending') }, { [`${css.mclDescending}`]: (sortedBy && this.props.sortDirection === 'descending') }, - { [`${css.mclSortIndicator}`]: showSortIndicator && isInteractive && !sortedBy }, + { [`${css.mclSortIndicator}`]: showSortIndicator && isSortable && !sortedBy }, ); }; diff --git a/lib/MultiColumnList/readme.md b/lib/MultiColumnList/readme.md index d77c6c8df..2a1e430a3 100644 --- a/lib/MultiColumnList/readme.md +++ b/lib/MultiColumnList/readme.md @@ -113,7 +113,8 @@ Name | type | description | default | required `rowUpdater` | func(`rowData`, `rowIndex`) | This function should return a shallow data structure (flattened object) or primitive (string, number) that will indicate that exterior data for a row has changed. It will receive two parameters of the `rowData` and the `rowIndex` that can be used to base return values. This result is fed directly to the data rows via props, keeping them pure. You should rarely have to use this prop, as most changes will be relayed directly in the `contentData` array itself. | `noop` | `selectedClass` | string | override class for the default style applied to selected rows. | built-in | `selectedRow` | object | **legacy API** Applies 'selected' class to the table row matching the property in the object, e.g. {id: '1224'}. | | -`showSortIndicator` | bool | If true, an icon for sortable fields will be displayed next to the column name. It will not be displayed for the currently sorted column. | false | +`showSortIndicator` | bool | If true, an icon for sortable fields will be displayed next to the column name. It will not be displayed for the currently sorted column. Also add the `sortableFields` property so that screen readers can read all column names, not just those not in `nonInteractiveHeaders`. | false | +`sortableFields` | array | A list of sortable field names, allowing the sort indicator to be displayed for sortable fields rather than those not in `nonInteractiveHeaders`. | `[]` | `sortedColumn` | string | Used to apply styling to the appropriate column. | | `sortDirection` | string | 'ascending' or 'descending' direction. | | `stickyFirstColumn` | bool | Pins the first column in place so that it will remain visible when scrolled out of view. | | diff --git a/lib/MultiColumnList/stories/BasicMCL.js b/lib/MultiColumnList/stories/BasicMCL.js index 535fc9c1f..41641674c 100644 --- a/lib/MultiColumnList/stories/BasicMCL.js +++ b/lib/MultiColumnList/stories/BasicMCL.js @@ -54,6 +54,7 @@ export default class BasicMCL extends React.Component { active: (row) => {row.active ? 'active' : 'inactive'} }} nonInteractiveHeaders={['phone']} + sortableFields={['active', 'name']} /> ); }