diff --git a/CHANGELOG.md b/CHANGELOG.md index c55059a96cb..cb24f6ba961 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Added `sections` and `position` props to `EuiHeader` ([#2928](https://github.com/elastic/eui/pull/2928)) - Added `gutterSize` prop to `EuiListGroup` ([#2980](https://github.com/elastic/eui/pull/2980)) - Added `color` prop to `EuiListGroupItem` and updated size style ([#2980](https://github.com/elastic/eui/pull/2980)) +- Added `enableAllColumns` to `EuiBasicTable` component ([#2906](https://github.com/elastic/eui/pull/2906)) **Bug Fixes** diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js index 71a366f9e74..723ea341e11 100644 --- a/src-docs/src/views/tables/basic/props_info.js +++ b/src-docs/src/views/tables/basic/props_info.js @@ -171,6 +171,11 @@ export const propsInfo = { required: false, type: { name: 'bool' }, }, + enableAllColumns: { + description: 'Enables the default sorting ability for each column.', + required: false, + type: { name: 'bool' }, + }, }, }, }, diff --git a/src-docs/src/views/tables/sorting/sorting_section.js b/src-docs/src/views/tables/sorting/sorting_section.js index 7b58283bce3..10bcb0474b3 100644 --- a/src-docs/src/views/tables/sorting/sorting_section.js +++ b/src-docs/src/views/tables/sorting/sorting_section.js @@ -24,7 +24,11 @@ export const section = { The following example shows how to configure column sorting via the{' '} sorting property and flagging the sortable columns as{' '} - sortable: true + sortable: true. To enable the default sorting ability + for every column, pass{' '} + enableAllColumns: true to the{' '} + sorting + prop.

), components: { EuiBasicTable }, diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 45c31a06558..1d218906b7c 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -3590,3 +3590,134 @@ exports[`EuiBasicTable with sorting 1`] = ` `; + +exports[`EuiBasicTable with sorting enabled and enable all columns for sorting 1`] = ` +
+
+ + + + + + + + + + + + + + + + + + + Name + + + + + + name1 + + + + + name2 + + + + + name3 + + + + +
+
+`; diff --git a/src/components/basic_table/basic_table.test.tsx b/src/components/basic_table/basic_table.test.tsx index 15ecfd059bb..301909b7796 100644 --- a/src/components/basic_table/basic_table.test.tsx +++ b/src/components/basic_table/basic_table.test.tsx @@ -394,6 +394,34 @@ describe('EuiBasicTable', () => { expect(component).toMatchSnapshot(); }); + test('with sorting enabled and enable all columns for sorting', () => { + const props: EuiBasicTableProps = { + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + { id: '3', name: 'name3' }, + ], + columns: [ + { + field: 'name', + name: 'Name', + description: 'description', + }, + ], + sorting: { + sort: { + field: 'name', + direction: SortDirection.ASC, + }, + enableAllColumns: true, + }, + onChange: () => {}, + }; + const component = shallow(); + + expect(component).toMatchSnapshot(); + }); + test('with pagination and selection', () => { const props: EuiBasicTableProps = { items: [ diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index e1b96ead978..a7c63d33fab 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -511,6 +511,18 @@ export class EuiBasicTable extends Component< } columns.forEach((column: EuiBasicTableColumn, index: number) => { + if ( + (column as EuiTableFieldDataColumnType).field && + sorting.sort && + !!sorting.enableAllColumns && + (column as EuiTableFieldDataColumnType).sortable == null + ) { + column = { + ...(column as EuiTableFieldDataColumnType), + sortable: true, + }; + } + if ( !(column as EuiTableFieldDataColumnType).sortable || (column as EuiTableFieldDataColumnType).hideForMobile @@ -690,14 +702,29 @@ export class EuiBasicTable extends Component< // field data column const sorting: SortOptions = {}; - if (this.props.sorting && sortable) { - const sortDirection = this.resolveColumnSortDirection(column); - sorting.isSorted = !!sortDirection; - sorting.isSortAscending = sortDirection - ? SortDirection.isAsc(sortDirection) - : undefined; - sorting.onSort = this.resolveColumnOnSort(column); - sorting.allowNeutralSort = this.props.sorting.allowNeutralSort; + if (this.props.sorting) { + if ( + this.props.sorting.sort && + !!this.props.sorting.enableAllColumns && + (column as EuiTableFieldDataColumnType).sortable == null + ) { + column = { + ...(column as EuiTableFieldDataColumnType), + sortable: true, + }; + } + + const { sortable } = column as EuiTableFieldDataColumnType; + + if (sortable) { + const sortDirection = this.resolveColumnSortDirection(column); + sorting.isSorted = !!sortDirection; + sorting.isSortAscending = sortDirection + ? SortDirection.isAsc(sortDirection) + : undefined; + sorting.onSort = this.resolveColumnOnSort(column); + sorting.allowNeutralSort = this.props.sorting.allowNeutralSort; + } } headers.push( { direction: Direction; }; allowNeutralSort?: boolean; + enableAllColumns?: boolean; } export interface EuiTableSelectionType {