diff --git a/ui/src/table.test.tsx b/ui/src/table.test.tsx index 7f26766031..b10ce7fc11 100644 --- a/ui/src/table.test.tsx +++ b/ui/src/table.test.tsx @@ -1535,7 +1535,22 @@ describe('Table.tsx', () => { const items = 3, firstGroupLabel = 'GroupA', - secondGroupLabel = 'GroupB' + secondGroupLabel = 'GroupB', + groupA = { + label: firstGroupLabel, + rows: [ + { name: 'rowname1', cells: [cell11, 'Group2'] }, + { name: 'rowname2', cells: [cell21, 'Group1'] } + ], + collapsed: false + }, + groupB = { + label: secondGroupLabel, + rows: [ + { name: 'rowname3', cells: [cell31, 'Group2'] } + ], + collapsed: false + } beforeEach(() => { tableProps = { name, @@ -1543,23 +1558,7 @@ describe('Table.tsx', () => { { name: 'colname1', label: 'Col1', sortable: true, searchable: true }, { name: 'colname2', label: 'Col2', sortable: true, filterable: true }, ], - groups: [ - { - label: firstGroupLabel, - rows: [ - { name: 'rowname1', cells: [cell11, 'Group2'] }, - { name: 'rowname2', cells: [cell21, 'Group1'] }, - ], - collapsed: false - }, - { - label: secondGroupLabel, - rows: [ - { name: 'rowname3', cells: [cell31, 'Group2'] } - ], - collapsed: false - } - ] + groups: [groupA, groupB] } }) @@ -1765,6 +1764,22 @@ describe('Table.tsx', () => { expectAllGroupsToBeVisible() expectAllItemsToBePresent() }) + + it("Sort items correctly when empty custom group is present", () => { + const + props = { ...tableProps, groups: [groupA, groupB, { label: 'GroupC', rows: [], collapsed: false }] }, + { container, getAllByRole } = render() + + expect(getAllByRole('gridcell')[3].textContent).toBe(cell11) + expect(getAllByRole('gridcell')[6].textContent).toBe(cell21) + expect(getAllByRole('gridcell')[11].textContent).toBe(cell31) + + fireEvent.click(container.querySelector('.ms-DetailsHeader-cellTitle')!) + + expect(getAllByRole('gridcell')[3].textContent).toBe(cell21) + expect(getAllByRole('gridcell')[6].textContent).toBe(cell11) + expect(getAllByRole('gridcell')[11].textContent).toBe(cell31) + }) }) describe('Reset', () => { diff --git a/ui/src/table.tsx b/ui/src/table.tsx index 66e741613b..59165fd001 100644 --- a/ui/src/table.tsx +++ b/ui/src/table.tsx @@ -818,7 +818,9 @@ export const setFilteredItems(filteredItems => [...groups] // sorts groups by startIndex to match its order in filteredItems .sort((group1, group2) => group1.startIndex - group2.startIndex) - .reduce((acc, group) => [...acc, ...filteredItems.slice(group.startIndex, acc.length + group.count).sort(sortingF(column, sortAsc))], + .reduce((acc, group) => group.count + ? [...acc, ...filteredItems.slice(group.startIndex, acc.length + group.count).sort(sortingF(column, sortAsc))] + : acc, [] as any[]) || []) } else setFilteredItems(filteredItems => [...filteredItems].sort(sortingF(column, sortAsc)))