decoupled counters

Author: pan-kot

src/__tests__/use-collection-expadable-rows.test.tsx

@@ -240,29 +240,25 @@ describe('data grouping', () => {
   test('computes total counts correctly', () => {
     const expandable = renderUseCollection(items, { expandableRows: { getId, getParentId } });
     expect(expandable.result.collectionProps.totalItemsCount).toBe(3);
+    expect(expandable.result.collectionProps.expandableRows!.getItemsCount).toBe(undefined);
 
     const grouped = renderUseCollection(items, { expandableRows: { getId, getParentId, dataGrouping: true } });
-    expect(grouped.result.collectionProps.totalItemsCount).toBe(6);
+    expect(grouped.result.collectionProps.totalItemsCount).toBe(3);
+    expect(grouped.result.collectionProps.expandableRows!.getItemsCount!(null)).toBe(6);
   });
 
   test('computes total selected counts correctly', () => {
     const expandable = renderUseCollection(items, {
       expandableRows: { getId, getParentId },
       selection: { defaultSelectedItems: [{ id: 'a' }, { id: 'a.1.1' }], keepSelection: true },
     });
-    expect(expandable.result.collectionProps.totalSelectedItemsCount).toBe(2);
+    expect(expandable.result.collectionProps.expandableRows!.getSelectedItemsCount).toBe(undefined);
 
     const grouped = renderUseCollection(items, {
       expandableRows: { getId, getParentId, dataGrouping: true },
       selection: { defaultSelectedItems: [{ id: 'a' }, { id: 'a.1.1' }], keepSelection: true },
     });
-    expect(grouped.result.collectionProps.totalSelectedItemsCount).toBe(1);
-  });
-
-  test('does not return per-item counts when dataGrouping=undefined', () => {
-    const { result } = renderUseCollection(items, { expandableRows: { getId, getParentId }, selection: {} });
-    expect(result.collectionProps.expandableRows!.getItemsCount).toBe(undefined);
-    expect(result.collectionProps.expandableRows!.getSelectedItemsCount).toBe(undefined);
+    expect(grouped.result.collectionProps.expandableRows!.getSelectedItemsCount!(null)).toBe(1);
   });
 
   test('can call selection counts on missing items', () => {
@@ -297,7 +293,7 @@ describe('data grouping', () => {
       });
       const expandableRows = result.collectionProps.expandableRows!;
       const sumCounts = result.items.reduce((sum, i) => sum + expandableRows.getItemsCount!(i), 0);
-      expect(sumCounts).toBe(result.collectionProps.totalItemsCount);
+      expect(sumCounts).toBe(result.collectionProps.expandableRows!.getItemsCount!(null));
     }
   });
 

src/interfaces.ts

@@ -117,16 +117,15 @@ interface UseCollectionResultBase<T> {
       groupSelection?: GroupSelectionState<T>;
       onGroupSelectionChange(event: CustomEventLike<GroupSelectionChangeDetail<T>>): void;
       // The counts reflect the number of nested selectable/selected nodes (deeply), including the given one.
-      // When expandableRows.dataGrouping={}, only leaf nodes are considered. They return 1 when called on leaf nodes.
-      getItemsCount?: (item: T) => number;
-      getSelectedItemsCount?: (item: T) => number;
+      // When expandableRows.dataGrouping={}, only leaf nodes are counted.
+      // The getters return 1 when called on leaf nodes. They can be called with null, indicating table's root level.
+      getItemsCount?: (item: null | T) => number;
+      getSelectedItemsCount?: (item: null | T) => number;
     };
     trackBy?: string | ((item: T) => string);
     ref: React.RefObject<CollectionRef>;
-    // The counts reflect the number of selectable/selected nodes (deeply).
-    // When expandableRows.dataGrouping={}, only leaf nodes are considered.
+    // The count of all root items (on all pages). It is used together with the firstIndex to announce page changes.
     totalItemsCount: number;
-    totalSelectedItemsCount: number;
     firstIndex: number;
   };
   filterProps: {

src/operations/index.ts

@@ -21,8 +21,8 @@ export function processItems<T>(
   totalItemsCount: number;
   filteredItemsCount: number | undefined;
   selectedItems: undefined | T[];
-  getItemsCount?: (item: T) => number;
-  getSelectedItemsCount?: (item: T) => number;
+  getItemsCount?: (item: null | T) => number;
+  getSelectedItemsCount?: (item: null | T) => number;
   getChildren: (item: T) => T[];
 } {
   const filterPredicate = composeFilters(
@@ -35,14 +35,15 @@ export function processItems<T>(
     : computeFlatItems(allItems, filterPredicate, sortingComparator);
   const filteredItemsCount = filterPredicate ? totalItemsCount : undefined;
 
-  let getSelectedItemsCount: undefined | ((item: T) => number) = undefined;
+  let getSelectedItemsCount: undefined | ((item: null | T) => number) = undefined;
   let selectedItems: undefined | T[] = undefined;
   if (selection && expandableRows?.dataGrouping && state.groupSelection) {
     const trackBy = selection?.trackBy ?? expandableRows?.getId;
     const selectionTreeProps = { getChildren: getChildren, trackBy };
     const selectionTree = new SelectionTree(items, selectionTreeProps, state.groupSelection);
-    getSelectedItemsCount = selectionTree.getSelectedItemsCount;
     selectedItems = selectionTree.getSelectedItems();
+    getSelectedItemsCount = (item: null | T) =>
+      !item ? selectedItems!.length : selectionTree.getSelectedItemsCount(item);
   }
 
   const pageProps = createPageProps(pagination, state.currentPageIndex, items);

src/operations/items-tree.ts

@@ -32,7 +32,8 @@ export function computeTreeItems<T>(
   const idToChildren = new Map<string, T[]>();
   const idToCount = new Map<string, number>();
   let items: T[] = [];
-  let totalItemsCount = 0;
+  let rootItemsCount = 0;
+  let selectableItemsCount = 0;
 
   for (const item of allItems) {
     const parentId = treeProps.getParentId(item);
@@ -67,19 +68,23 @@ export function computeTreeItems<T>(
     sortLevel(items);
   }
 
-  function computeGroupCounts(item: T) {
+  function computeSelectableCount(item: T) {
     const children = getChildren(item);
+    // In grouped table, we count all leaf nodes as selectable.
     let itemCount = children.length === 0 ? 1 : 0;
     for (const child of children) {
-      itemCount += computeGroupCounts(child);
+      itemCount += computeSelectableCount(child);
     }
     idToCount.set(treeProps.getId(item), itemCount);
     return itemCount;
   }
   for (const item of items) {
-    totalItemsCount += treeProps.dataGrouping ? computeGroupCounts(item) : 1;
+    rootItemsCount += 1;
+    selectableItemsCount += computeSelectableCount(item);
   }
-  const getItemsCount = treeProps.dataGrouping ? (item: T) => idToCount.get(treeProps.getId(item)) ?? 0 : undefined;
+  const getItemsCount = treeProps.dataGrouping
+    ? (item: null | T) => (!item ? selectableItemsCount : idToCount.get(treeProps.getId(item)) ?? 0)
+    : undefined;
 
-  return { items, totalItemsCount, getChildren, getItemsCount };
+  return { items, totalItemsCount: rootItemsCount, getChildren, getItemsCount };
 }

src/utils.ts

@@ -144,8 +144,8 @@ export function createSyncProps<T>(
     actualPageIndex?: number;
     allItems: readonly T[];
     totalItemsCount: number;
-    getItemsCount?: (item: T) => number;
-    getSelectedItemsCount?: (item: T) => number;
+    getItemsCount?: (item: null | T) => number;
+    getSelectedItemsCount?: (item: null | T) => number;
     getChildren: (item: T) => T[];
   }
 ): Pick<UseCollectionResult<T>, 'collectionProps' | 'filterProps' | 'paginationProps' | 'propertyFilterProps'> {
@@ -239,7 +239,6 @@ export function createSyncProps<T>(
       ref: collectionRef,
       firstIndex: 1,
       totalItemsCount,
-      totalSelectedItemsCount: selectedItems.length,
       ...(options.pagination?.pageSize
         ? {
             firstIndex: ((actualPageIndex ?? currentPageIndex) - 1) * options.pagination.pageSize + 1,