diff --git a/CHANGELOG.md b/CHANGELOG.md index bbd1d779aaab..293d85454558 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Added `enableAllColumns` to `EuiBasicTable` component ([#2906](https://github.com/elastic/eui/pull/2906)) - Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896)) - Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934)) - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919)) diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js index 71a366f9e744..723ea341e11a 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 7b58283bce3e..0a2d721493c7 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. You can also set the default sorting + behavior of field columns by passing + enableAllColumns: true to sorting + prop of EuiBasicTable without the need to specify it for each individual + column.

), 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 45c31a06558c..e1b81ebfe52a 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,120 @@ 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 15ecfd059bba..301909b7796d 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 e1b96ead9784..a7c63d33fab1 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 {