Support lookup/master_detail object grouping with proper label display

Author: hotlong

packages/plugin-grid/src/__tests__/useGroupedData.test.ts

@@ -252,4 +252,61 @@ describe('useGroupedData – collapsed state management', () => {
       expect(result.current.groups[0].label).toBe('Alpha, Beta');
     });
   });
+
+  describe('lookup / master_detail object values', () => {
+    it('groups by lookup object using id and shows display name', () => {
+      const data = [
+        { id: 1, account: { id: 'a1', name: 'Acme Corporation' } },
+        { id: 2, account: { id: 'a1', name: 'Acme Corporation' } },
+        { id: 3, account: { id: 'a2', name: 'Beta Industries' } },
+      ];
+      const config = { fields: [{ field: 'account', order: 'asc' as const, collapsed: false }] };
+
+      const { result } = renderHook(() => useGroupedData(config, data));
+
+      expect(result.current.groups).toHaveLength(2);
+      expect(result.current.groups.map((g) => g.label)).toEqual([
+        'Acme Corporation',
+        'Beta Industries',
+      ]);
+      expect(result.current.groups[0].rows).toHaveLength(2);
+      expect(result.current.groups[1].rows).toHaveLength(1);
+      // No "[object Object]" anywhere in labels
+      for (const g of result.current.groups) {
+        expect(g.label).not.toContain('[object Object]');
+      }
+    });
+
+    it('keeps distinct groups for same display name but different ids', () => {
+      const data = [
+        { account: { id: 'a1', name: 'Same Name' } },
+        { account: { id: 'a2', name: 'Same Name' } },
+      ];
+      const config = { fields: [{ field: 'account', order: 'asc' as const, collapsed: false }] };
+
+      const { result } = renderHook(() => useGroupedData(config, data));
+
+      expect(result.current.groups).toHaveLength(2);
+    });
+
+    it('falls back to id when no display name field is present', () => {
+      const data = [{ owner: { id: 'u1' } }];
+      const config = { fields: [{ field: 'owner', order: 'asc' as const, collapsed: false }] };
+
+      const { result } = renderHook(() => useGroupedData(config, data));
+
+      expect(result.current.groups[0].label).toBe('u1');
+    });
+
+    it('handles null lookup values as (empty)', () => {
+      const data = [{ account: null }, { account: { id: 'a1', name: 'Acme' } }];
+      const config = { fields: [{ field: 'account', order: 'asc' as const, collapsed: false }] };
+
+      const { result } = renderHook(() => useGroupedData(config, data));
+
+      const labels = result.current.groups.map((g) => g.label);
+      expect(labels).toContain('(empty)');
+      expect(labels).toContain('Acme');
+    });
+  });
 });

packages/plugin-grid/src/useGroupedData.ts

@@ -64,12 +64,38 @@ export interface UseGroupedDataResult {
   toggleGroup: (key: string) => void;
 }
 
+/**
+ * Extract a stable identity key from a value. For lookup / master_detail
+ * fields the cell contains an expanded object (e.g. `{ id, name, ... }`); we
+ * key off `id` so different referenced records produce distinct groups even
+ * when they happen to share the same display name. Plain primitives are
+ * stringified directly.
+ */
+function extractValueKey(value: any): string {
+  if (value === undefined || value === null || value === '') return '';
+  if (Array.isArray(value)) {
+    return value.map((v) => extractValueKey(v)).join('|');
+  }
+  if (typeof value === 'object') {
+    const id = (value as any).id ?? (value as any)._id ?? (value as any).pk ?? (value as any).value;
+    if (id !== undefined && id !== null && id !== '') return String(id);
+    const label = (value as any).name ?? (value as any).label ?? (value as any).title;
+    if (label !== undefined && label !== null && label !== '') return String(label);
+    try {
+      return JSON.stringify(value);
+    } catch {
+      return '';
+    }
+  }
+  return String(value);
+}
+
 /**
  * Build a value-only key segment for a single grouping field. Used to compose
  * stable composite keys across nesting levels.
  */
 function buildSegmentKey(row: Record<string, any>, field: string): string {
-  return String(row[field] ?? '');
+  return extractValueKey(row[field]);
 }
 
 /**
@@ -102,11 +128,28 @@ function buildSegmentLabel(
           const f2 = formatValue(field, v);
           if (f2 !== undefined && f2 !== '') return f2;
         }
-        return String(v);
+        return buildSegmentLabel(v, field);
       })
       .join(', ');
     return joined || '(empty)';
   }
+  // Lookup / master_detail fields: the cell is an expanded object such as
+  // `{ id, name, ... }`. Stringifying directly produces "[object Object]",
+  // so prefer common display fields, falling back to the id.
+  if (typeof value === 'object') {
+    const label =
+      (value as any).name ??
+      (value as any).label ??
+      (value as any).title ??
+      (value as any).display_name ??
+      (value as any).displayName ??
+      (value as any).fullName ??
+      (value as any).full_name;
+    if (label !== undefined && label !== null && label !== '') return String(label);
+    const id = (value as any).id ?? (value as any)._id ?? (value as any).pk;
+    if (id !== undefined && id !== null && id !== '') return String(id);
+    return '(empty)';
+  }
   return String(value);
 }
 
@@ -214,7 +257,11 @@ export function useGroupedData(
       }
 
       const order = f.order ?? 'asc';
-      keyOrder.sort((a, b) => compareGroups(a, b, order));
+      keyOrder.sort((a, b) => {
+        const labelA = map.get(a)?.label ?? a;
+        const labelB = map.get(b)?.label ?? b;
+        return compareGroups(labelA, labelB, order);
+      });
 
       return keyOrder.map((segment) => {
         const entry = map.get(segment)!;