fix: Sort items correctly when empty custom group is present #2268

h2oai · Feb 23, 2024 · 8979756 · 8979756
1 parent 261e506
commit 8979756
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 19 deletions.
diff --git a/ui/src/table.test.tsx b/ui/src/table.test.tsx
@@ -1535,31 +1535,30 @@ 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,
         columns: [
           { 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(<XTable model={props} />)
+
+      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
@@ -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)))