diff --git a/src-docs/src/views/tables/data_store.js b/src-docs/src/views/tables/data_store.js index a9d1b73082a..6dcdc60b3f3 100644 --- a/src-docs/src/views/tables/data_store.js +++ b/src-docs/src/views/tables/data_store.js @@ -70,8 +70,6 @@ const github = [ 'silne30', ]; -const dob = new Date(1980, 1, 1); - const createUsers = (countries) => { return times(20, (index) => { return { @@ -79,7 +77,11 @@ const createUsers = (countries) => { firstName: index < 10 ? firstNames[index] : firstNames[index - 10], lastName: index < 10 ? lastNames[index] : lastNames[index - 10], github: index < 10 ? github[index] : github[index - 10], - dateOfBirth: dob, + dateOfBirth: new Date( + 1980, + Math.floor(Math.random() * 12), + Math.floor(Math.random() * 27) + 1 + ), nationality: random.oneToOne( countries.map((country) => country.code), index diff --git a/src/components/basic_table/in_memory_table.test.tsx b/src/components/basic_table/in_memory_table.test.tsx index c006d1bcad1..eb0b5133a7c 100644 --- a/src/components/basic_table/in_memory_table.test.tsx +++ b/src/components/basic_table/in_memory_table.test.tsx @@ -453,6 +453,85 @@ describe('EuiInMemoryTable', () => { mount(); }).not.toThrow(); }); + + test('changing the sort field and direction via sorting prop', () => { + // regression for https://github.com/elastic/eui/issues/6032 + const props: EuiInMemoryTableProps = { + ...requiredProps, + items: [ + { id: '3', name: 'name3' }, + { id: '1', name: 'name1' }, + { id: '2', name: 'name2' }, + ], + columns: [ + { + field: 'id', + name: 'Id', + sortable: true, + }, + { + field: 'name', + name: 'Name', + sortable: true, + }, + ], + sorting: { + sort: { + field: 'id', + direction: SortDirection.ASC, + }, + }, + }; + + const component = mount(); + + // initial sorting: id asc + expect( + component + .find('tbody .euiTableCellContent__text') + .map((cell) => cell.text()) + ).toEqual(['1', 'name1', '2', 'name2', '3', 'name3']); + + // sorting: id desc + component.setProps({ + sorting: { sort: { field: 'id', direction: SortDirection.DESC } }, + }); + expect( + component + .find('tbody .euiTableCellContent__text') + .map((cell) => cell.text()) + ).toEqual(['3', 'name3', '2', 'name2', '1', 'name1']); + + // sorting: name asc + component.setProps({ + sorting: { sort: { field: 'name', direction: SortDirection.ASC } }, + }); + expect( + component + .find('tbody .euiTableCellContent__text') + .map((cell) => cell.text()) + ).toEqual(['1', 'name1', '2', 'name2', '3', 'name3']); + + // sorting: name desc + component.setProps({ + sorting: { sort: { field: 'name', direction: SortDirection.DESC } }, + }); + expect( + component + .find('tbody .euiTableCellContent__text') + .map((cell) => cell.text()) + ).toEqual(['3', 'name3', '2', 'name2', '1', 'name1']); + + // can return to initial sorting: id asc + component.setProps({ + sorting: { sort: { field: 'id', direction: SortDirection.ASC } }, + }); + expect( + component + .find('tbody .euiTableCellContent__text') + .map((cell) => cell.text()) + ).toEqual(['1', 'name1', '2', 'name2', '3', 'name3']); + }); }); test('with initial sorting', () => { diff --git a/src/components/basic_table/in_memory_table.tsx b/src/components/basic_table/in_memory_table.tsx index a0da84671f8..ffdd81efd4d 100644 --- a/src/components/basic_table/in_memory_table.tsx +++ b/src/components/basic_table/in_memory_table.tsx @@ -319,6 +319,11 @@ export class EuiInMemoryTable extends Component< ) { updatedPrevState = { ...updatedPrevState, + prevProps: { + ...updatedPrevState.prevProps, + sortName, + sortDirection, + }, sortName, sortDirection, }; diff --git a/upcoming_changelogs/6228.md b/upcoming_changelogs/6228.md new file mode 100644 index 00000000000..f631214bd27 --- /dev/null +++ b/upcoming_changelogs/6228.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiInMemoryTable`'s internal state tracking to include changes of `sorting.sort` values