From eb851adeb87094a52c2459b495b50a9ebc9c563d Mon Sep 17 00:00:00 2001 From: Anupam Dagar Date: Sun, 23 Feb 2020 21:54:24 +0800 Subject: [PATCH 1/3] Add enableSorting prop to EuiBasicTable for default sorting of table. Fixes: #1866 --- CHANGELOG.md | 1 + src-docs/src/views/tables/basic/props_info.js | 5 + .../views/tables/sorting/sorting_section.js | 6 +- .../__snapshots__/basic_table.test.tsx.snap | 117 ++++++++++++++++++ .../basic_table/basic_table.test.tsx | 28 +++++ src/components/basic_table/basic_table.tsx | 43 +++++-- src/components/basic_table/table_types.ts | 1 + 7 files changed, 192 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e70017473dd..8f1243b2225 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 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..4ee2f4838a9 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 to + 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..e1b81ebfe52 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 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 { From 069693faf0b4b6df44474a392145c41853f28aa2 Mon Sep 17 00:00:00 2001 From: Anupam Dagar Date: Sun, 1 Mar 2020 05:18:24 +0800 Subject: [PATCH 2/3] fix props description typo in sorting section docs. --- src-docs/src/views/tables/sorting/sorting_section.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src-docs/src/views/tables/sorting/sorting_section.js b/src-docs/src/views/tables/sorting/sorting_section.js index 4ee2f4838a9..6b376b090c8 100644 --- a/src-docs/src/views/tables/sorting/sorting_section.js +++ b/src-docs/src/views/tables/sorting/sorting_section.js @@ -24,9 +24,9 @@ export const section = { The following example shows how to configure column sorting via the{' '} sorting property and flagging the sortable columns as{' '} - sortable: true.To enable the default sorting ability to - every column, pass - enableAllColumns: true to the + sortable: true.To enable the default sorting ability + for every column, pass{' '} + enableAllColumns: true to the{' '} sorting prop.

From 37b0d49ac37d23b0d84fbb58356bf27d58b0a55b Mon Sep 17 00:00:00 2001 From: Anupam Dagar Date: Sun, 1 Mar 2020 09:01:02 +0800 Subject: [PATCH 3/3] fix typo and update test snapshot. --- .../src/views/tables/sorting/sorting_section.js | 2 +- .../__snapshots__/basic_table.test.tsx.snap | 16 +++++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/tables/sorting/sorting_section.js b/src-docs/src/views/tables/sorting/sorting_section.js index 6b376b090c8..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,7 @@ export const section = { The following example shows how to configure column sorting via the{' '} sorting property and flagging the sortable columns as{' '} - sortable: true.To enable the default sorting ability + sortable: true. To enable the default sorting ability for every column, pass{' '} enableAllColumns: true to the{' '} sorting 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 e1b81ebfe52..1d218906b7c 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -3607,7 +3607,21 @@ exports[`EuiBasicTable with sorting enabled and enable all columns for sorting 1 /> + > + +