Remove legacy grouping props

CHANGELOG.md

@@ -40,6 +40,9 @@
     - ⚠️ `onHeaderDrop`
     - ⚠️ `draggableHeaderCell`
       - Check [#2007](https://github.com/adazzle/react-data-grid/pull/2007) on how to migrate
+    - ⚠️ `rowGroupRenderer`
+    - ⚠️ `onRowExpandToggle`
+      - Check [#2012](https://github.com/adazzle/react-data-grid/pull/2012) on how to migrate
     - ⚠️ `rowsContainer`
     - ⚠️ Subrow props: `getSubRowDetails`, `onCellExpand`, `onDeleteSubRow`, and `onAddSubRow`
       - Check [#1853](https://github.com/adazzle/react-data-grid/pull/1853) on how to migrate

package.json

@@ -51,6 +51,7 @@
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/faker": "^4.1.11",
     "@types/jest": "^25.2.1",
+    "@types/lodash.groupby": "^4.6.6",
     "@types/node": "~13.11.1",
     "@types/react": "^16.9.32",
     "@types/react-dom": "^16.9.6",
@@ -74,6 +75,7 @@
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "less": "^3.11.1",
     "less-loader": "^5.0.0",
+    "lodash.groupby": "^4.6.0",
     "mini-css-extract-plugin": "^0.9.0",
     "react": "^16.13.1",
     "react-contextmenu": "^2.13.0",

src/DataGrid.tsx

@@ -34,7 +34,6 @@ import {
   Filters,
   FormatterProps,
   Position,
-  RowExpandToggleEvent,
   RowRendererProps,
   RowsUpdateEvent,
   ScrollPosition,
@@ -110,7 +109,6 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> {
    */
   defaultFormatter?: React.ComponentType<FormatterProps<R, SR>>;
   rowRenderer?: React.ComponentType<RowRendererProps<R, SR>>;
-  rowGroupRenderer?: React.ComponentType;
   emptyRowsRenderer?: React.ComponentType<{}>;
 
   /**
@@ -122,7 +120,6 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> {
   onScroll?: (scrollPosition: ScrollPosition) => void;
   /** Called when a column is resized */
   onColumnResize?: (idx: number, width: number) => void;
-  onRowExpandToggle?: (event: RowExpandToggleEvent) => void;
   /** Function called whenever selected cell is changed */
   onSelectedCellChange?: (position: Position) => void;
   /** called before cell is set active, returns a boolean to determine whether cell is editable */
@@ -178,13 +175,11 @@ function DataGrid<R, K extends keyof R, SR>({
   // Custom renderers
   defaultFormatter = ValueFormatter,
   rowRenderer,
-  rowGroupRenderer,
   emptyRowsRenderer,
   // Event props
   onRowClick,
   onScroll,
   onColumnResize,
-  onRowExpandToggle,
   onSelectedCellChange,
   onCheckCellIsEditable,
   // Toggles and modes
@@ -398,11 +393,9 @@ function DataGrid<R, K extends keyof R, SR>({
           viewportColumns={viewportColumns}
           lastFrozenColumnIndex={lastFrozenColumnIndex}
           eventBus={eventBus}
-          rowGroupRenderer={rowGroupRenderer}
           rowRenderer={rowRenderer}
           isRowSelected={isRowSelected}
           onRowClick={onRowClick}
-          onRowExpandToggle={onRowExpandToggle}
         />
       );
     }

src/RowRenderer.tsx

@@ -1,40 +1,26 @@
 import React, { memo } from 'react';
 
 import Row from './Row';
-import RowGroup from './RowGroup';
 import { DataGridProps } from './DataGrid';
-import { RowRendererProps, RowData, CalculatedColumn } from './common/types';
-import EventBus from './EventBus';
+import { RowRendererProps } from './common/types';
 
 type SharedDataGridProps<R, SR> = Pick<DataGridProps<R, never, SR>,
-  | 'rowGroupRenderer'
   | 'rowRenderer'
   | 'onRowClick'
-  | 'onRowExpandToggle'
 >;
 
-interface IRowRendererProps<R, SR> extends SharedDataGridProps<R, SR> {
-  viewportColumns: readonly CalculatedColumn<R, SR>[];
-  lastFrozenColumnIndex: number;
-  rowIdx: number;
-  row: R;
-  eventBus: EventBus;
-  isRowSelected: boolean;
-}
+type IRowRendererProps<R, SR> = RowRendererProps<R, SR> & SharedDataGridProps<R, SR>;
 
 function RowRenderer<R, SR>({
   viewportColumns,
   lastFrozenColumnIndex,
   eventBus,
   rowIdx,
   row,
-  rowGroupRenderer,
   rowRenderer,
   isRowSelected,
-  onRowClick,
-  onRowExpandToggle
-}: IRowRendererProps<R, SR>) {
-  const { __metaData } = row as RowData;
+  onRowClick
+}: RowRendererProps<R, SR> & SharedDataGridProps<R, SR>) {
   const rendererProps: RowRendererProps<R, SR> = {
     rowIdx,
     row,
@@ -45,24 +31,6 @@ function RowRenderer<R, SR>({
     onRowClick
   };
 
-  if (__metaData) {
-    if (__metaData.getRowRenderer) {
-      return __metaData.getRowRenderer(rendererProps, rowIdx);
-    }
-    if (__metaData.isGroup) {
-      return (
-        <RowGroup<R, SR>
-          {...rendererProps}
-          {...__metaData!}
-          name={(row as RowData).name!}
-          eventBus={eventBus}
-          renderer={rowGroupRenderer}
-          onRowExpandToggle={onRowExpandToggle}
-        />
-      );
-    }
-  }
-
   return React.createElement<RowRendererProps<R, SR>>(rowRenderer || Row, rendererProps);
 }
 

src/common/enums.ts

@@ -4,10 +4,6 @@ export enum CellNavigationMode {
   LOOP_OVER_ROW = 'loopOverRow'
 }
 
-export enum DragItemTypes {
-  Column = 'column'
-}
-
 export enum UpdateActions {
   CELL_UPDATE = 'CELL_UPDATE',
   COLUMN_FILL = 'COLUMN_FILL',

src/common/types.ts

@@ -51,11 +51,6 @@ export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TR
   formatter: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;
 }
 
-export interface RowData {
-  name?: string;
-  __metaData?: RowGroupMetaData;
-}
-
 export interface Position {
   idx: number;
   rowIdx: number;
@@ -140,15 +135,6 @@ export interface ScrollPosition {
   scrollTop: number;
 }
 
-export interface RowGroupMetaData {
-  isGroup: boolean;
-  treeDepth: number;
-  isExpanded: boolean;
-  columnGroupName: string;
-  columnGroupDisplayName: string;
-  getRowRenderer?: (props: unknown, rowIdx: number) => React.ReactElement;
-}
-
 export type Filters = Record<string, any>;
 
 export interface CommitEvent<TUpdatedValue = never> {
@@ -157,13 +143,6 @@ export interface CommitEvent<TUpdatedValue = never> {
   updated: TUpdatedValue;
 }
 
-export interface RowExpandToggleEvent {
-  rowIdx: number;
-  shouldExpand: boolean;
-  columnGroupName: string;
-  name: string;
-}
-
 export interface RowsUpdateEvent<TUpdatedValue = never> {
   cellKey: string;
   fromRow: number;

stories/demos/LegacyGrouping.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useState, useMemo } from 'react';
+import groupBy from 'lodash/groupBy';
+
+import { GroupRowRenderer, RowData, RowExpandToggleEvent } from './components/RowRenderers';
+import DataGrid, { Column } from '../../src';
+
+interface Row extends RowData<Row, unknown> {
+  id: number;
+  task: string;
+  complete: number;
+  priority: string;
+  issueType: string;
+}
+
+const columns: Column<any>[] = [
+  {
+    key: 'id',
+    name: 'ID',
+    width: 80
+  },
+  {
+    key: 'task',
+    name: 'Title'
+  },
+  {
+    key: 'priority',
+    name: 'Priority'
+  },
+  {
+    key: 'issueType',
+    name: 'Issue Type'
+  },
+  {
+    key: 'complete',
+    name: '% Complete'
+  }
+];
+
+function createRows(): Row[] {
+  const rows = [];
+  for (let i = 1; i < 500; i++) {
+    rows.push({
+      id: i,
+      task: `Task ${i}`,
+      complete: Math.min(100, Math.round(Math.random() * 110)),
+      priority: ['Critical', 'High', 'Medium', 'Low'][Math.floor((Math.random() * 3) + 1)],
+      issueType: ['Bug', 'Improvement', 'Epic', 'Story'][Math.floor((Math.random() * 3) + 1)]
+    });
+  }
+
+  return rows;
+}
+
+function groupByColumn(rows: Row[], columnKeys: string[], expandedGroups: Set<string>, treeDepth = 0, parentKey = '') {
+  if (columnKeys.length === 0) return rows;
+  const gridRows: any = [];
+  const [columnKey, ...remainingColumnKeys] = columnKeys;
+  const groupedRows = groupBy(rows, columnKey);
+  const groupedKeys = Object.keys(groupedRows);
+  for (const key of groupedKeys) {
+    const groupKey = parentKey ? `${parentKey}_${key}` : key;
+    const isExpanded = expandedGroups.has(groupKey);
+    const rowGroupHeader = {
+      groupKey,
+      name: key,
+      __metaData: {
+        isGroup: true,
+        treeDepth,
+        isExpanded,
+        columnGroupName: groupByColumn,
+        columnGroupDisplayName: columns.find(c => c.key === columnKey)!.name
+      }
+    };
+    gridRows.push(rowGroupHeader);
+    if (isExpanded) {
+      gridRows.push(...groupByColumn(groupedRows[key], remainingColumnKeys, expandedGroups, treeDepth + 1, key));
+    }
+  }
+
+  return gridRows;
+}
+
+export default function LegacyGrouping() {
+  const [rows] = useState(createRows);
+  const [groupByColumns] = useState(['priority', 'issueType']);
+  const [expandedGroups, setExpandedGroups] = useState(new Set(['Low', 'Low_Epic']));
+
+  const gridRows = useMemo(() => {
+    return groupByColumn(rows, groupByColumns, expandedGroups);
+  }, [rows, groupByColumns, expandedGroups]);
+
+  function onRowExpandToggle({ groupKey }: RowExpandToggleEvent) {
+    const newExpandedGroups = new Set(expandedGroups);
+    if (newExpandedGroups.has(groupKey)) {
+      newExpandedGroups.delete(groupKey);
+    } else {
+      newExpandedGroups.add(groupKey);
+    }
+    setExpandedGroups(newExpandedGroups);
+  }
+
+  return (
+    <DataGrid
+      columns={columns}
+      rows={gridRows}
+      height={650}
+      rowRenderer={p => <GroupRowRenderer {...p} onRowExpandToggle={onRowExpandToggle} />}
+    />
+  );
+}

stories/demos/components/RowRenderers/GroupRowRenderer.less

@@ -0,0 +1,15 @@
+.rdg-row-expand-icon {
+  cursor: pointer;
+
+  &:hover {
+    color: #777;
+  }
+}
+
+.rdg-row-default-group {
+  width: var(--row-width);
+  height: var(--row-height);
+  line-height: var(--row-height);
+  padding: 0 8px;
+  border-bottom: 1px solid #ddd;
+}

stories/demos/components/RowRenderers/GroupRowRenderer.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { Row, RowRendererProps } from '../../../../src';
+import RowGroup from './RowGroup';
+
+import './GroupRowRenderer.less';
+
+export interface RowData<R, SR> {
+  name?: string;
+  groupKey?: string;
+  __metaData?: RowGroupMetaData<R, SR>;
+}
+
+export interface RowGroupMetaData<R, SR> {
+  isGroup: boolean;
+  treeDepth: number;
+  isExpanded: boolean;
+  columnGroupName: string;
+  columnGroupDisplayName: string;
+  getRowRenderer?: (props: RowRendererProps<R, SR>, rowIdx: number) => React.ReactElement;
+}
+
+export interface RowExpandToggleEvent {
+  rowIdx: number;
+  shouldExpand: boolean;
+  columnGroupName: string;
+  name: string;
+  groupKey: string;
+}
+
+export interface GroupRowRendererProps<R, SR> extends RowRendererProps<R, SR> {
+  onRowExpandToggle: (event: RowExpandToggleEvent) => void;
+  rowGroupRenderer?: React.ComponentType;
+}
+
+export function GroupRowRenderer<R extends RowData<R, SR>, SR>(props: GroupRowRendererProps<R, SR>) {
+  const { __metaData } = props.row;
+
+  if (__metaData) {
+    if (__metaData.getRowRenderer) {
+      return __metaData.getRowRenderer(props, props.rowIdx);
+    }
+    if (__metaData.isGroup) {
+      return (
+        <RowGroup<R, SR>
+          {...props}
+          {...__metaData}
+          name={props.row.name!}
+          groupKey={props.row.groupKey!}
+        />
+      );
+    }
+  }
+
+  return <Row {...props} />;
+}