Skip to content

Commit

Permalink
Merge pull request #2336 from carbon-design-system/1376-table-multi-sort
Browse files Browse the repository at this point in the history 
feat(table): add multi-sort columns to table
  • Loading branch information
@kodiakhq
kodiakhq[bot] authored Jun 16, 2021
2 parents a5252cc + e383c54 commit 3994c71
Show file tree
Hide file tree
Showing 34 changed files with 328,864 additions and 341,834 deletions.
1 change: 1 addition & 0 deletions packages/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,7 @@
"react-visibility-sensor": "^5.0.2",
"scroll-into-view-if-needed": "^2.2.26",
"styled-components": "^4.1.3",
"thenby": "^1.3.4",
"use-deep-compare-effect": "^1.2.0",
"use-lang-direction": "^0.1.11",
"use-resize-observer": "^6.1.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/ComboChartCard/ComboChartCard.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const commonOptions = {
values: comboHealthData,
};

/*
/*
FYI: the underlying Carbon Charts controls have been mocked.
Check __mocks__/@carbon/charts-react/ for details
*/
Expand Down
24,361 changes: 24,360 additions & 1 deletion packages/react/src/components/MapCard/storyFiles/data.json
View file

Large diffs are not rendered by default.

137 changes: 97 additions & 40 deletions packages/react/src/components/Table/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
- [Sorting](#sorting)
- [Programmatic sorting](#programmatic-sorting)
- [Custom sorting](#custom-sorting)
- [Multi-sorting](#multi-sorting)
- [Expansion](#expansion)
- [Programmatic expansion](#programmatic-expansion)
- [Selection](#selection)
Expand Down Expand Up @@ -287,6 +288,45 @@ const columns = [
];
```

### Multi-sorting

By passing `options.hasMultiSort` you can enable multi-sort columns functionality. If you want to set the sorted column order,
you can pass an array of sort objects to the `view.table.sort`, and interact with this data via the callbacks on `actions.table`. See example below.

```jsx
<Table
id="table"
columns={columns}
data={data}
actions={{
table: {
onAddMultiSortColumn: (index) => {},
onRemoveMultiSortColumn: (index) => {},
/* example onSaveMultiSortColumns param structure: ([{columnId: 'select', direction: 'ASC'}, {columnId: 'string', direction: 'ASC'}]) => {} */
onSaveMultiSortColumns: (multiSortedColumns) => {},
onCancelMultiSortColumns: () => {},
},
}}
options={{
hasMultiSort: true,
}}
view={{
table: {
sort: [
{
columnId: 'select',
direction: 'ASC',
},
{
columnId: 'string',
direction: 'ASC',
},
],
},
}}
/>
```

## Expansion

The `Table` components supports row-level expansion by passing options.hasRowExpansion=true and passing the row content via the view.table.expandedRows prop.
Expand Down Expand Up @@ -808,6 +848,7 @@ the following props:
| | | | \_ always - Wrap if needed for all table column configurations |
| | | | \_ never - Tables with dynamic columns widths grow larger and tables with fixed or resizable columns truncate. |
| | | | \_ alwaysTruncate - Always truncate if needed for all table column configurations |
| hasMultiSort | bool | | If true, the sortable columns in the table will be able to be sorted by multiple dimensions |

### View Prop

Expand Down Expand Up @@ -853,7 +894,7 @@ the following props:
| table.isSelectAllSelected | bool | | If true, the select all option is checked |
| table.isSelectAllIndeterminate | bool | | |
| table.selectedIds | string[] | | An array of row ids that are currently selected |
| table.sort | object | | an object in the form of {columnId: string; direction: 'NONE' or 'ASC' or 'DESC' } |
| table.sort | object, array | | an object or array of objects in the form of {columnId: string; direction: 'NONE' or 'ASC' or 'DESC' } |
| table.sort.columnId | string | | the id of the column to sort |
| table.sort.direction | 'NONE', 'ASC', or 'DESC' | | |
| table.ordering | object[] | | an array of objects representing the order and visibility of the columns |
Expand Down Expand Up @@ -914,50 +955,66 @@ the following props:
| table.onColumnSelectionConfig | func | | |
| table.onColumnResize | func | | |
| table.onOverflowItemClicked | func | | |
| table.onSaveMultiSortColumns | func | | |
| table.onCancelMultiSortColumns | func | | |
| table.onAddMultiSortColumn | func | | |
| table.onRemoveMultiSortColumn | func | | |
| table.onTableErrorStateAction | func | | callback action relavent on error state. This can be used with `error` message. When `view.table.errorState` property is used then this callback function has no effect. |
| onUserViewModified | func | | callback for actions relevant for view management |

### i18n Prop

| Name | Type | Default | Description |
| :------------------------ | :----- | :------ | :----------------------------------------------------- |
| pageBackwardAria | string | | pagination |
| pageForwardAria | string | |
| pageNumberAria | string | |
| itemsPerPage | string | |
| itemsRange | func | | (min, max) => `${min}-${max} items` |
| currentPage | func | | (page) => `page ${page}` |
| itemsRangeWithTotal | func | | (min, max, total) => `${min}-${max} of ${total} items` |
| pageRange | func | | (current, total) => `${current} of ${total} pages` |
| overflowMenuAria | string | |
| clickToExpandAria | string | |
| clickToCollapseAria | string | |
| selectAllAria | string | |
| selectRowAria | string | |
| searchLabel | string | | toolbar |
| searchPlaceholder | string | |
| clearAllFilters | string | |
| columnSelectionButtonAria | string | |
| columnSelectionConfig | string | |
| filterButtonAria | string | |
| editButtonAria | string | |
| clearFilterAria | string | |
| filterAria | string | |
| downloadIconDescription | string | |
| openMenuAria | string | |
| closeMenuAria | string | |
| clearSelectionAria | string | |
| batchCancel | string | |
| itemsSelected | string | |
| itemSelected | string | |
| inProgressText | string | | I18N label for in progress |
| actionFailedText | string | | I18N label for action failed |
| learnMoreText | string | | I18N label for learn more |
| dismissText | string | | I18N label for dismiss |
| filterNone | string | | |
| filterAscending | string | | |
| filterDescending | string | | |
| rowCountInHeader | func | | |
| Name | Type | Default | Description |
| :------------------------------- | :----- | :----------------------- | :----------------------------------------------------- |
| pageBackwardAria | string | | pagination |
| pageForwardAria | string | |
| pageNumberAria | string | |
| itemsPerPage | string | |
| itemsRange | func | | (min, max) => `${min}-${max} items` |
| currentPage | func | | (page) => `page ${page}` |
| itemsRangeWithTotal | func | | (min, max, total) => `${min}-${max} of ${total} items` |
| pageRange | func | | (current, total) => `${current} of ${total} pages` |
| overflowMenuAria | string | |
| clickToExpandAria | string | |
| clickToCollapseAria | string | |
| selectAllAria | string | |
| selectRowAria | string | |
| searchLabel | string | | toolbar |
| searchPlaceholder | string | |
| clearAllFilters | string | |
| columnSelectionButtonAria | string | |
| columnSelectionConfig | string | |
| filterButtonAria | string | |
| editButtonAria | string | |
| clearFilterAria | string | |
| filterAria | string | |
| downloadIconDescription | string | |
| openMenuAria | string | |
| closeMenuAria | string | |
| clearSelectionAria | string | |
| batchCancel | string | |
| itemsSelected | string | |
| itemSelected | string | |
| inProgressText | string | | I18N label for in progress |
| actionFailedText | string | | I18N label for action failed |
| learnMoreText | string | | I18N label for learn more |
| dismissText | string | | I18N label for dismiss |
| filterNone | string | | |
| filterAscending | string | | |
| filterDescending | string | | |
| rowCountInHeader | func | | |
| multiSortModalTitle | string | 'Select columns to sort' | |
| multiSortModalPrimaryLabel | string | 'Sort' | |
| multiSortModalSecondaryLabel | string | 'Cancel' | |
| multiSortSelectColumnLabel | string | 'Select a column' | |
| multiSortSelectColumnSortByTitle | string | 'Sort by' | |
| multiSortSelectColumnThenByTitle | string | 'Then by' | |
| multiSortDirectionLabel | string | 'Select a direction' | |
| multiSortDirectionTitle | string | 'Sort order' | |
| multiSortAddColumn | string | 'Add column' | |
| multiSortRemoveColumn | string | 'Remove column' | |
| multiSortAscending | string | 'Ascending' | |
| multiSortDescending | string | 'Descending' | |

## Source Code

Expand Down
34 changes: 34 additions & 0 deletions packages/react/src/components/Table/StatefulTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,12 @@ import {
tableAdvancedFiltersApply,
tableAdvancedFiltersCancel,
tableAdvancedFiltersCreate,
tableMultiSortToggleModal,
tableSaveMultiSortColumns,
tableCancelMultiSortColumns,
tableAddMultiSortColumn,
tableRemoveMultiSortColumn,
tableClearMultiSortColumns,
} from './tableActionCreators';
import Table, { defaultProps } from './Table';

Expand Down Expand Up @@ -144,6 +150,11 @@ const StatefulTable = ({ data: initialData, expandedData, ...other }) => {
onChangeOrdering,
onColumnResize,
onOverflowItemClicked,
onSaveMultiSortColumns,
onCancelMultiSortColumns,
onClearMultiSortColumns,
onAddMultiSortColumn,
onRemoveMultiSortColumn,
} = table || {};

const getRowAction = (data, actionId, rowId) => {
Expand Down Expand Up @@ -293,8 +304,31 @@ const StatefulTable = ({ data: initialData, expandedData, ...other }) => {
callbackParent(onColumnResize, resizedColumns);
},
onOverflowItemClicked: (id) => {
if (id === 'multi-sort') {
dispatch(tableMultiSortToggleModal());
}
callbackParent(onOverflowItemClicked, id);
},
onSaveMultiSortColumns: (sortColumns) => {
dispatch(tableSaveMultiSortColumns(sortColumns));
callbackParent(onSaveMultiSortColumns, sortColumns);
},
onCancelMultiSortColumns: () => {
dispatch(tableCancelMultiSortColumns());
callbackParent(onCancelMultiSortColumns);
},
onClearMultiSortColumns: () => {
dispatch(tableClearMultiSortColumns());
callbackParent(onClearMultiSortColumns);
},
onAddMultiSortColumn: (index) => {
dispatch(tableAddMultiSortColumn(index));
callbackParent(onAddMultiSortColumn, index);
},
onRemoveMultiSortColumn: (index) => {
dispatch(tableRemoveMultiSortColumn(index));
callbackParent(onRemoveMultiSortColumn, index);
},
},
onUserViewModified: (viewConfiguration) => {
callbackParent(onUserViewModified, viewConfiguration);
Expand Down
Loading

0 comments on commit 3994c71

Please sign in to comment.