From 769bb30f4487c0e554513ad0da4cccca4660924e Mon Sep 17 00:00:00 2001 From: Jen Huang Date: Wed, 21 Mar 2018 11:09:29 -0700 Subject: [PATCH] Add ability to specify initial sorting to EuiInMemoryTable (#547) * Add ability to specify initial sorting to EuiInMemoryTable --- CHANGELOG.md | 2 +- .../src/views/tables/in_memory/in_memory.js | 9 +++- .../src/views/tables/in_memory/props_info.js | 6 +-- .../in_memory_table.test.js.snap | 41 +++++++++++++++++++ src/components/basic_table/in_memory_table.js | 13 ++++-- .../basic_table/in_memory_table.test.js | 31 ++++++++++++++ 6 files changed, 93 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ded728de110..98d28bc6c7a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ # [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `0.0.32`. +- Added initial sorting option to `EuiInMemoryTable` ([#547](https://github.com/elastic/eui/pull/547)) # [`0.0.32`](https://github.com/elastic/eui/tree/v0.0.32) diff --git a/src-docs/src/views/tables/in_memory/in_memory.js b/src-docs/src/views/tables/in_memory/in_memory.js index bd2c1069cc7..7c79af01daf 100644 --- a/src-docs/src/views/tables/in_memory/in_memory.js +++ b/src-docs/src/views/tables/in_memory/in_memory.js @@ -70,12 +70,19 @@ export const Table = () => { sortable: true }]; + const sorting = { + sort: { + field: 'dateOfBirth', + direction: 'desc', + } + }; + return ( ); }; diff --git a/src-docs/src/views/tables/in_memory/props_info.js b/src-docs/src/views/tables/in_memory/props_info.js index 53d6d5ae9dd..4086813622e 100644 --- a/src-docs/src/views/tables/in_memory/props_info.js +++ b/src-docs/src/views/tables/in_memory/props_info.js @@ -2,7 +2,7 @@ import { omit } from '../../../../../src/services/objects'; import { propsInfo as basicPropsInfo } from '../basic/props_info'; import { propsInfo as searchBarPropsInfo } from '../../search_bar/props_info'; -const basicTableProps = omit(basicPropsInfo, [ 'EuiBasicTable', 'Pagination', 'Sorting' ]); +const basicTableProps = omit(basicPropsInfo, [ 'EuiBasicTable', 'Pagination' ]); const searchBarProps = omit(searchBarPropsInfo, [ 'EuiSearchBar' ]); export const propsInfo = { @@ -39,9 +39,9 @@ export const propsInfo = { type: { name: 'boolean | #Pagination' } }, sorting: { - description: 'Enables/disables sorting', + description: 'Enables/disables sorting. Can be an object that configures initial sorting when enabled', required: false, - type: { name: 'boolean' } + type: { name: 'boolean | #Sorting' } }, search: { description: 'Configures a search bar for the table', diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap index e53d33fcbf1..bf7b0366d4d 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap @@ -17,6 +17,47 @@ exports[`EuiInMemoryTable empty array 1`] = ` /> `; +exports[`EuiInMemoryTable with initial sorting 1`] = ` + +`; + exports[`EuiInMemoryTable with items 1`] = ` { }; const getInitialSorting = (sorting) => { - if (!sorting) { + if (!sorting || !sorting.sort) { return { sortField: undefined, sortDirection: undefined, @@ -91,7 +96,7 @@ const getInitialSorting = (sorting) => { const { field: sortField, direction: sortDirection, - } = sorting; + } = sorting.sort; return { sortField, diff --git a/src/components/basic_table/in_memory_table.test.js b/src/components/basic_table/in_memory_table.test.js index ba007533bcf..8761cc6f05c 100644 --- a/src/components/basic_table/in_memory_table.test.js +++ b/src/components/basic_table/in_memory_table.test.js @@ -226,6 +226,37 @@ describe('EuiInMemoryTable', () => { expect(component).toMatchSnapshot(); }); + test('with initial sorting', () => { + + const props = { + ...requiredProps, + items: [ + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + { id: '3', name: 'name3' } + ], + columns: [ + { + field: 'name', + name: 'Name', + description: 'description', + sortable: true + } + ], + sorting: { + sort: { + field: 'name', + direction: 'desc' + } + } + }; + const component = shallow( + + ); + + expect(component).toMatchSnapshot(); + }); + test('with pagination and selection', () => { const props = {