From cd928bc973ec55576e64af0dae589ddce9ba1857 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Thu, 30 Jul 2020 13:00:44 -0500
Subject: [PATCH 01/79] Initial commit

---
 src/DataGrid.tsx                       | 122 ++++++++++++++++++++-----
 src/GroupedRow.tsx                     |  69 ++++++++++++++
 src/formatters/SelectCellFormatter.tsx |   3 +-
 src/hooks/useViewportColumns.ts        |  17 +++-
 stories/demos/CommonFeatures.tsx       |   1 +
 5 files changed, 188 insertions(+), 24 deletions(-)
 create mode 100644 src/GroupedRow.tsx

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 68c05b21ea..6d33e5692e 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -6,15 +6,18 @@ import React, {
   useEffect,
   useImperativeHandle,
   useCallback,
-  createElement
+  createElement,
+  useMemo
 } from 'react';
 import clsx from 'clsx';
+import { groupBy as lodashGroupBy } from 'lodash';
 
 import { useGridWidth, useViewportColumns } from './hooks';
 import EventBus from './EventBus';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
 import Row from './Row';
+import GroupedRow from './GroupedRow';
 import SummaryRow from './SummaryRow';
 import { ValueFormatter } from './formatters';
 import { legacyCellInput } from './editors';
@@ -53,6 +56,11 @@ interface EditCellState extends Position {
   key: string | null;
 }
 
+interface GroupedRow {
+  __isGroup: boolean;
+  key: string;
+}
+
 export interface DataGridHandle {
   scrollToColumn: (colIdx: number) => void;
   scrollToRow: (rowIdx: number) => void;
@@ -121,6 +129,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   onSort?: (columnKey: string, direction: SortDirection) => void;
   filters?: Filters;
   onFiltersChange?: (filters: Filters) => void;
+  groupBy?: string; // TODO: support multiple columns and custom grouping logic
 
   /**
    * Custom renderers
@@ -189,6 +198,7 @@ function DataGrid<R, K extends keyof R, SR>({
   onSort,
   filters,
   onFiltersChange,
+  groupBy,
   // Custom renderers
   defaultFormatter = ValueFormatter,
   rowRenderer: RowRenderer = Row,
@@ -223,6 +233,7 @@ function DataGrid<R, K extends keyof R, SR>({
   const [copiedPosition, setCopiedPosition] = useState<Position & { value: unknown } | null>(null);
   const [isDragging, setDragging] = useState(false);
   const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);
+  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<string>>(new Set());
 
   const setDraggedOverRowIdx = useCallback((rowIdx?: number) => {
     setOverRowIdx(rowIdx);
@@ -252,7 +263,8 @@ function DataGrid<R, K extends keyof R, SR>({
     columnWidths,
     defaultFormatter,
     scrollLeft,
-    viewportWidth
+    viewportWidth,
+    groupBy
   });
 
   const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
@@ -262,11 +274,31 @@ function DataGrid<R, K extends keyof R, SR>({
     - summaryRowsCount * rowHeight
     - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
 
+  const groupedRows = useMemo(() => {
+    if (!groupBy) return;
+    return lodashGroupBy(rows, groupBy);
+  }, [groupBy, rows]);
+
+  const [calculatedRows, totalRowCount] = useMemo(() => {
+    if (!groupedRows) return [rows, rows.length];
+
+    const flattenedRows = [];
+    let rowCount = 0;
+    for (const key in groupedRows) {
+      flattenedRows.push({ key, __isGroup: true });
+      if (expandedGroupIds.has(key)) {
+        flattenedRows.push(...groupedRows[key]);
+      }
+      rowCount = rowCount + groupedRows[key].length + 1;
+    }
+    return [flattenedRows, rowCount];
+  }, [expandedGroupIds, groupedRows, rows]);
+
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
     clientHeight,
     rowHeight,
     scrollTop,
-    rows.length
+    calculatedRows.length
   );
 
   /**
@@ -276,8 +308,14 @@ function DataGrid<R, K extends keyof R, SR>({
     if (selectedPosition === prevSelectedPosition.current || selectedPosition.mode === 'EDIT' || !isCellWithinBounds(selectedPosition)) return;
     prevSelectedPosition.current = selectedPosition;
     scrollToCell(selectedPosition);
+
+    const row = calculatedRows[selectedPosition.rowIdx];
+    if (isGroupedRow(row)) return;
+
+    // Let the formatter handle focus
     const column = columns[selectedPosition.idx];
-    if (column.formatterOptions?.focusable) return; // Let the formatter handle focus
+    if (column.formatterOptions?.focusable) return;
+
     focusSinkRef.current!.focus();
   });
 
@@ -287,7 +325,9 @@ function DataGrid<R, K extends keyof R, SR>({
     const handleRowSelectionChange = ({ rowIdx, checked, isShiftClick }: SelectRowEvent) => {
       assertIsValidKey(rowKey);
       const newSelectedRows = new Set(selectedRows);
-      const rowId = rows[rowIdx][rowKey];
+      const row = calculatedRows[rowIdx];
+      if (isGroupedRow(row)) return; // TODO: add a checkbox to select the group
+      const rowId = row[rowKey];
 
       if (checked) {
         newSelectedRows.add(rowId);
@@ -296,7 +336,10 @@ function DataGrid<R, K extends keyof R, SR>({
         if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
           const step = Math.sign(rowIdx - previousRowIdx);
           for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
-            newSelectedRows.add(rows[i][rowKey]);
+            const row = calculatedRows[i];
+            if (!isGroupedRow(row)) {
+              newSelectedRows.add(row[rowKey]);
+            }
           }
         }
       } else {
@@ -308,7 +351,7 @@ function DataGrid<R, K extends keyof R, SR>({
     };
 
     return eventBus.subscribe('SELECT_ROW', handleRowSelectionChange);
-  }, [eventBus, onSelectedRowsChange, rows, rowKey, selectedRows]);
+  }, [calculatedRows, eventBus, onSelectedRowsChange, rowKey, selectedRows]);
 
   useEffect(() => {
     return eventBus.subscribe('SELECT_CELL', selectCell);
@@ -382,6 +425,9 @@ function DataGrid<R, K extends keyof R, SR>({
   }, [columnWidths, onColumnResize]);
 
   function handleCommit({ cellKey, rowIdx, updated }: CommitEvent) {
+    if (groupBy) {
+      rowIdx = rows.indexOf(calculatedRows[rowIdx] as R);
+    }
     onRowsUpdate?.({
       cellKey,
       fromRow: rowIdx,
@@ -426,8 +472,9 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function handleCellInput(event: React.KeyboardEvent<HTMLDivElement>) {
     const { key } = event;
+    const row = calculatedRows[selectedPosition.rowIdx];
+    if (isGroupedRow(row)) return;
     const column = columns[selectedPosition.idx];
-    const row = rows[selectedPosition.rowIdx];
     const canOpenEditor = selectedPosition.mode === 'SELECT' && isCellEditable(selectedPosition);
     const isActivatedByUser = (column.unsafe_onCellInput ?? legacyCellInput)(event, row) === true;
 
@@ -495,8 +542,12 @@ function DataGrid<R, K extends keyof R, SR>({
   /**
    * utils
    */
+  function isGroupedRow(row: R | GroupedRow): row is GroupedRow {
+    return (row as GroupedRow).__isGroup !== undefined;
+  }
+
   function isCellWithinBounds({ idx, rowIdx }: Position): boolean {
-    return rowIdx >= 0 && rowIdx < rows.length && idx >= 0 && idx < columns.length;
+    return rowIdx >= 0 && rowIdx < calculatedRows.length && idx >= 0 && idx < columns.length;
   }
 
   function isCellEditable(position: Position): boolean {
@@ -564,13 +615,13 @@ function DataGrid<R, K extends keyof R, SR>({
         return { idx: idx + 1, rowIdx };
       case 'Tab':
         if (selectedPosition.idx === -1 && selectedPosition.rowIdx === -1) {
-          return shiftKey ? { idx: columns.length - 1, rowIdx: rows.length - 1 } : { idx: 0, rowIdx: 0 };
+          return shiftKey ? { idx: columns.length - 1, rowIdx: calculatedRows.length - 1 } : { idx: 0, rowIdx: 0 };
         }
         return { idx: idx + (shiftKey ? -1 : 1), rowIdx };
       case 'Home':
         return ctrlKey ? { idx: 0, rowIdx: 0 } : { idx: 0, rowIdx };
       case 'End':
-        return ctrlKey ? { idx: columns.length - 1, rowIdx: rows.length - 1 } : { idx: columns.length - 1, rowIdx };
+        return ctrlKey ? { idx: columns.length - 1, rowIdx: calculatedRows.length - 1 } : { idx: columns.length - 1, rowIdx };
       case 'PageUp':
         return { idx, rowIdx: rowIdx - Math.floor(clientHeight / rowHeight) };
       case 'PageDown':
@@ -587,7 +638,7 @@ function DataGrid<R, K extends keyof R, SR>({
     let mode = cellNavigationMode;
     if (key === 'Tab') {
       // If we are in a position to leave the grid, stop editing but stay in that cell
-      if (canExitGrid({ shiftKey, cellNavigationMode, columns, rowsCount: rows.length, selectedPosition })) {
+      if (canExitGrid({ shiftKey, cellNavigationMode, columns, rowsCount: calculatedRows.length, selectedPosition })) {
         // Allow focus to leave the grid so the next control in the tab order can be focused
         return;
       }
@@ -602,7 +653,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
     nextPosition = getNextSelectedCellPosition<R, SR>({
       columns,
-      rowsCount: rows.length,
+      rowsCount: calculatedRows.length,
       cellNavigationMode: mode,
       nextPosition
     });
@@ -653,9 +704,38 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function getViewportRows() {
     const rowElements = [];
-
     for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
-      const row = rows[rowIdx];
+      const top = rowIdx * rowHeight + totalHeaderHeight;
+      const row = calculatedRows[rowIdx];
+      if (isGroupedRow(row)) {
+        const { key } = row;
+        rowElements.push(
+          <GroupedRow
+            aria-rowindex={headerRowsCount + rowIdx + 1}
+            key={key}
+            groupKey={key}
+            top={top}
+            width={viewportWidth - getScrollbarSize()}
+            isExpanded={expandedGroupIds.has(key)}
+            isSelected={selectedPosition.rowIdx === rowIdx}
+            onClick={() => {
+              setSelectedPosition(({ idx }) => ({ idx: idx === -1 ? 0 : idx, rowIdx, mode: 'SELECT' }));
+            }}
+            onKeyDown={handleKeyDown}
+            toggleGroup={() => {
+              const newExpandedGroupIds = new Set(expandedGroupIds);
+              if (expandedGroupIds.has(key)) {
+                newExpandedGroupIds.delete(key);
+              } else {
+                newExpandedGroupIds.add(key);
+              }
+              setExpandedGroupIds(newExpandedGroupIds);
+            }}
+          />
+        );
+        continue;
+      }
+
       let key: string | number = rowIdx;
       let isRowSelected = false;
       if (rowKey !== undefined) {
@@ -679,7 +759,7 @@ function DataGrid<R, K extends keyof R, SR>({
           isRowSelected={isRowSelected}
           onRowClick={onRowClick}
           rowClass={rowClass}
-          top={rowIdx * rowHeight + totalHeaderHeight}
+          top={top}
           copiedCellIdx={copiedPosition?.rowIdx === rowIdx ? copiedPosition.idx : undefined}
           draggedOverCellIdx={getDraggedOverCellIdx(rowIdx)}
           setDraggedOverRowIdx={isDragging ? setDraggedOverRowIdx : undefined}
@@ -692,7 +772,7 @@ function DataGrid<R, K extends keyof R, SR>({
   }
 
   // Reset the positions if the current values are no longer valid. This can happen if a column or row is removed
-  if (selectedPosition.idx >= columns.length || selectedPosition.rowIdx >= rows.length) {
+  if (selectedPosition.idx >= columns.length || selectedPosition.rowIdx >= calculatedRows.length) {
     setSelectedPosition({ idx: -1, rowIdx: -1, mode: 'SELECT' });
     setCopiedPosition(null);
     setDraggedOverRowIdx(undefined);
@@ -706,7 +786,7 @@ function DataGrid<R, K extends keyof R, SR>({
       aria-describedby={ariaDescribedBy}
       aria-multiselectable={isSelectable ? true : undefined}
       aria-colcount={columns.length}
-      aria-rowcount={headerRowsCount + rows.length + summaryRowsCount}
+      aria-rowcount={headerRowsCount + calculatedRows.length + summaryRowsCount}
       className={clsx('rdg', { 'rdg-viewport-dragging': isDragging })}
       style={{
         width,
@@ -739,7 +819,7 @@ function DataGrid<R, K extends keyof R, SR>({
           onFiltersChange={onFiltersChange}
         />
       )}
-      {rows.length === 0 && emptyRowsRenderer ? createElement(emptyRowsRenderer) : (
+      {calculatedRows.length === 0 && emptyRowsRenderer ? createElement(emptyRowsRenderer) : (
         <>
           <div
             ref={focusSinkRef}
@@ -747,11 +827,11 @@ function DataGrid<R, K extends keyof R, SR>({
             className="rdg-focus-sink"
             onKeyDown={handleKeyDown}
           />
-          <div style={{ height: Math.max(rows.length * rowHeight, clientHeight) }} />
+          <div style={{ height: Math.max(calculatedRows.length * rowHeight, clientHeight) }} />
           {getViewportRows()}
           {summaryRows?.map((row, rowIdx) => (
             <SummaryRow<R, SR>
-              aria-rowindex={headerRowsCount + rows.length + rowIdx + 1}
+              aria-rowindex={headerRowsCount + totalRowCount + rowIdx + 1}
               key={rowIdx}
               rowIdx={rowIdx}
               row={row}
diff --git a/src/GroupedRow.tsx b/src/GroupedRow.tsx
new file mode 100644
index 0000000000..bc3ae9d6b1
--- /dev/null
+++ b/src/GroupedRow.tsx
@@ -0,0 +1,69 @@
+import React, { useRef, useLayoutEffect } from 'react';
+import clsx from 'clsx';
+
+type SharedDivProps = Pick<React.HTMLAttributes<HTMLDivElement>,
+  | 'onClick'
+  | 'onKeyDown'
+  | 'aria-rowindex'
+>;
+
+interface GroupedRowProps extends SharedDivProps {
+  groupKey: string;
+  top: number;
+  width: number;
+  isExpanded: boolean;
+  isSelected: boolean;
+  toggleGroup: () => void;
+}
+
+export default function GroupedRow({
+  'aria-rowindex': ariaRowIndex,
+  groupKey,
+  top,
+  width,
+  isExpanded,
+  isSelected,
+  onClick,
+  onKeyDown,
+  toggleGroup
+}: GroupedRowProps) {
+  const cellRef = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (!isSelected) return;
+    cellRef.current?.focus();
+  }, [isSelected]);
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLSpanElement>) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      toggleGroup();
+    }
+  }
+
+  return (
+    <div
+      role="row"
+      aria-rowindex={ariaRowIndex}
+      className="rdg-row rdg-grouped-row"
+      style={{ top }}
+      onClick={onClick}
+    >
+      <div
+        className={clsx('rdg-cell', 'rdg-cell-frozen', { 'rdg-cell-selected': isSelected })}
+        style={{ left: 0, paddingLeft: 8, width }}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+      >
+        <span
+          ref={cellRef}
+          tabIndex={-1}
+          style={{ cursor: 'pointer' }}
+          onClick={toggleGroup}
+          onKeyDown={handleKeyDown}
+        >
+          {isExpanded ? '\u25BC' : '\u25B6'} {groupKey}
+        </span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/formatters/SelectCellFormatter.tsx b/src/formatters/SelectCellFormatter.tsx
index bff462c360..5d89748811 100644
--- a/src/formatters/SelectCellFormatter.tsx
+++ b/src/formatters/SelectCellFormatter.tsx
@@ -1,4 +1,4 @@
-import React, { useLayoutEffect, useRef } from 'react';
+import React, { useRef, useLayoutEffect } from 'react';
 import clsx from 'clsx';
 
 type SharedInputProps = Pick<React.InputHTMLAttributes<HTMLInputElement>,
@@ -24,7 +24,6 @@ export function SelectCellFormatter({
   'aria-labelledby': ariaLabelledBy
 }: SelectCellFormatterProps) {
   const inputRef = useRef<HTMLInputElement>(null);
-
   useLayoutEffect(() => {
     if (!isCellSelected) return;
     inputRef.current?.focus();
diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
index cb37c4488c..e96dbeae82 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.ts
@@ -12,6 +12,7 @@ interface ViewportColumnsArgs<R, K extends keyof R, SR> extends SharedDataGridPr
   viewportWidth: number;
   scrollLeft: number;
   columnWidths: ReadonlyMap<string, number>;
+  groupBy?: string;
 }
 
 export function useViewportColumns<R, K extends keyof R, SR>({
@@ -20,8 +21,22 @@ export function useViewportColumns<R, K extends keyof R, SR>({
   columnWidths,
   viewportWidth,
   defaultFormatter,
-  scrollLeft
+  scrollLeft,
+  groupBy
 }: ViewportColumnsArgs<R, K, SR>) {
+  rawColumns = useMemo(() => {
+    if (!groupBy) return rawColumns;
+    // TODO: make it generic
+    const selectColumn = rawColumns.find(c => c.key === 'select-row');
+    const groupByColumn = rawColumns.find(c => c.key === groupBy);
+    const remaningColumns = rawColumns.filter(c => c.key !== groupBy && c.key !== 'select-row');
+    return [
+      selectColumn!,
+      { ...groupByColumn!, frozen: true },
+      ...remaningColumns
+    ];
+  }, [groupBy, rawColumns]);
+
   const { columns, lastFrozenColumnIndex, totalColumnWidth } = useMemo(() => {
     return getColumnMetrics<R, SR>({
       columns: rawColumns,
diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index 22da2f096b..c1f118d75f 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -287,6 +287,7 @@ export default function CommonFeatures() {
           sortDirection={sortDirection}
           onSort={handleSort}
           summaryRows={summaryRows}
+          groupBy="country"
         />
       )}
     </AutoSizer>

From 3d6dd338097a654fe21af72cb4e938b11cba1d10 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Thu, 6 Aug 2020 15:56:10 -0500
Subject: [PATCH 02/79] Group by multiple columns

---
 src/DataGrid.tsx                              | 75 +++++--------------
 src/GroupedRow.tsx                            |  6 +-
 src/hooks/index.ts                            |  1 +
 ...wportColumns.ts => useViewportColumns.tsx} | 37 ++++++---
 src/hooks/useViewportRows.ts                  | 65 ++++++++++++++++
 src/types.ts                                  | 10 +++
 src/utils/columnUtils.ts                      |  2 +-
 src/utils/index.ts                            |  6 ++
 stories/demos/CommonFeatures.tsx              |  4 +-
 9 files changed, 138 insertions(+), 68 deletions(-)
 rename src/hooks/{useViewportColumns.ts => useViewportColumns.tsx} (62%)
 create mode 100644 src/hooks/useViewportRows.ts

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 6d33e5692e..6d8940f132 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -6,18 +6,16 @@ import React, {
   useEffect,
   useImperativeHandle,
   useCallback,
-  createElement,
-  useMemo
+  createElement
 } from 'react';
 import clsx from 'clsx';
-import { groupBy as lodashGroupBy } from 'lodash';
 
-import { useGridWidth, useViewportColumns } from './hooks';
+import { useGridWidth, useViewportColumns, useViewportRows } from './hooks';
 import EventBus from './EventBus';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
 import Row from './Row';
-import GroupedRow from './GroupedRow';
+import GroupedRowRenderer from './GroupedRow';
 import SummaryRow from './SummaryRow';
 import { ValueFormatter } from './formatters';
 import { legacyCellInput } from './editors';
@@ -29,7 +27,8 @@ import {
   getNextSelectedCellPosition,
   isSelectedCellEditable,
   canExitGrid,
-  isCtrlKeyHeldDown
+  isCtrlKeyHeldDown,
+  isGroupedRow
 } from './utils';
 
 import {
@@ -56,11 +55,6 @@ interface EditCellState extends Position {
   key: string | null;
 }
 
-interface GroupedRow {
-  __isGroup: boolean;
-  key: string;
-}
-
 export interface DataGridHandle {
   scrollToColumn: (colIdx: number) => void;
   scrollToRow: (rowIdx: number) => void;
@@ -129,7 +123,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   onSort?: (columnKey: string, direction: SortDirection) => void;
   filters?: Filters;
   onFiltersChange?: (filters: Filters) => void;
-  groupBy?: string; // TODO: support multiple columns and custom grouping logic
+  groupBy?: readonly string[]; // TODO: support custom grouping logic
 
   /**
    * Custom renderers
@@ -179,7 +173,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
 function DataGrid<R, K extends keyof R, SR>({
   // Grid and data Props
   columns: rawColumns,
-  rows,
+  rows: rawRows,
   summaryRows,
   rowKey,
   onRowsUpdate,
@@ -233,7 +227,6 @@ function DataGrid<R, K extends keyof R, SR>({
   const [copiedPosition, setCopiedPosition] = useState<Position & { value: unknown } | null>(null);
   const [isDragging, setDragging] = useState(false);
   const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);
-  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<string>>(new Set());
 
   const setDraggedOverRowIdx = useCallback((rowIdx?: number) => {
     setOverRowIdx(rowIdx);
@@ -274,25 +267,7 @@ function DataGrid<R, K extends keyof R, SR>({
     - summaryRowsCount * rowHeight
     - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
 
-  const groupedRows = useMemo(() => {
-    if (!groupBy) return;
-    return lodashGroupBy(rows, groupBy);
-  }, [groupBy, rows]);
-
-  const [calculatedRows, totalRowCount] = useMemo(() => {
-    if (!groupedRows) return [rows, rows.length];
-
-    const flattenedRows = [];
-    let rowCount = 0;
-    for (const key in groupedRows) {
-      flattenedRows.push({ key, __isGroup: true });
-      if (expandedGroupIds.has(key)) {
-        flattenedRows.push(...groupedRows[key]);
-      }
-      rowCount = rowCount + groupedRows[key].length + 1;
-    }
-    return [flattenedRows, rowCount];
-  }, [expandedGroupIds, groupedRows, rows]);
+  const { calculatedRows, totalRowCount, toggleGroup } = useViewportRows({ rawRows, groupBy });
 
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
     clientHeight,
@@ -426,7 +401,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function handleCommit({ cellKey, rowIdx, updated }: CommitEvent) {
     if (groupBy) {
-      rowIdx = rows.indexOf(calculatedRows[rowIdx] as R);
+      rowIdx = rawRows.indexOf(calculatedRows[rowIdx] as R);
     }
     onRowsUpdate?.({
       cellKey,
@@ -441,7 +416,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function handleCopy() {
     const { idx, rowIdx } = selectedPosition;
-    const value = rows[rowIdx][columns[idx].key as keyof R];
+    const value = rawRows[rowIdx][columns[idx].key as keyof R];
     setCopiedPosition({ idx, rowIdx, value });
   }
 
@@ -489,7 +464,7 @@ function DataGrid<R, K extends keyof R, SR>({
     const { idx, rowIdx } = selectedPosition;
     const column = columns[idx];
     const cellKey = column.key;
-    const value = rows[rowIdx][cellKey as keyof R];
+    const value = rawRows[rowIdx][cellKey as keyof R];
 
     onRowsUpdate?.({
       cellKey,
@@ -528,12 +503,12 @@ function DataGrid<R, K extends keyof R, SR>({
 
     const column = columns[selectedPosition.idx];
     const cellKey = column.key;
-    const value = rows[selectedPosition.rowIdx][cellKey as keyof R];
+    const value = rawRows[selectedPosition.rowIdx][cellKey as keyof R];
 
     onRowsUpdate?.({
       cellKey,
       fromRow: selectedPosition.rowIdx,
-      toRow: rows.length - 1,
+      toRow: rawRows.length - 1,
       updated: { [cellKey]: value } as unknown as never,
       action: UpdateActions.COLUMN_FILL
     });
@@ -542,9 +517,6 @@ function DataGrid<R, K extends keyof R, SR>({
   /**
    * utils
    */
-  function isGroupedRow(row: R | GroupedRow): row is GroupedRow {
-    return (row as GroupedRow).__isGroup !== undefined;
-  }
 
   function isCellWithinBounds({ idx, rowIdx }: Position): boolean {
     return rowIdx >= 0 && rowIdx < calculatedRows.length && idx >= 0 && idx < columns.length;
@@ -552,7 +524,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function isCellEditable(position: Position): boolean {
     return isCellWithinBounds(position)
-      && isSelectedCellEditable<R, SR>({ columns, rows, selectedPosition: position, onCheckCellIsEditable });
+      && isSelectedCellEditable<R, SR>({ columns, rows: rawRows, selectedPosition: position, onCheckCellIsEditable });
   }
 
   function selectCell(position: Position, enableEditor = false): void {
@@ -710,27 +682,20 @@ function DataGrid<R, K extends keyof R, SR>({
       if (isGroupedRow(row)) {
         const { key } = row;
         rowElements.push(
-          <GroupedRow
+          <GroupedRowRenderer
             aria-rowindex={headerRowsCount + rowIdx + 1}
             key={key}
             groupKey={key}
             top={top}
+            columnWidth={row.level}
             width={viewportWidth - getScrollbarSize()}
-            isExpanded={expandedGroupIds.has(key)}
+            isExpanded={row.isExpanded}
             isSelected={selectedPosition.rowIdx === rowIdx}
             onClick={() => {
               setSelectedPosition(({ idx }) => ({ idx: idx === -1 ? 0 : idx, rowIdx, mode: 'SELECT' }));
             }}
             onKeyDown={handleKeyDown}
-            toggleGroup={() => {
-              const newExpandedGroupIds = new Set(expandedGroupIds);
-              if (expandedGroupIds.has(key)) {
-                newExpandedGroupIds.delete(key);
-              } else {
-                newExpandedGroupIds.add(key);
-              }
-              setExpandedGroupIds(newExpandedGroupIds);
-            }}
+            toggleGroup={() => toggleGroup(key)}
           />
         );
         continue;
@@ -801,11 +766,11 @@ function DataGrid<R, K extends keyof R, SR>({
     >
       <HeaderRow<R, K, SR>
         rowKey={rowKey}
-        rows={rows}
+        rows={rawRows}
         columns={viewportColumns}
         onColumnResize={handleColumnResize}
         lastFrozenColumnIndex={lastFrozenColumnIndex}
-        allRowsSelected={selectedRows?.size === rows.length}
+        allRowsSelected={selectedRows?.size === rawRows.length}
         onSelectedRowsChange={onSelectedRowsChange}
         sortColumn={sortColumn}
         sortDirection={sortDirection}
diff --git a/src/GroupedRow.tsx b/src/GroupedRow.tsx
index bc3ae9d6b1..88279b00ce 100644
--- a/src/GroupedRow.tsx
+++ b/src/GroupedRow.tsx
@@ -11,6 +11,7 @@ interface GroupedRowProps extends SharedDivProps {
   groupKey: string;
   top: number;
   width: number;
+  columnWidth: number;
   isExpanded: boolean;
   isSelected: boolean;
   toggleGroup: () => void;
@@ -21,6 +22,7 @@ export default function GroupedRow({
   groupKey,
   top,
   width,
+  columnWidth,
   isExpanded,
   isSelected,
   onClick,
@@ -50,7 +52,7 @@ export default function GroupedRow({
     >
       <div
         className={clsx('rdg-cell', 'rdg-cell-frozen', { 'rdg-cell-selected': isSelected })}
-        style={{ left: 0, paddingLeft: 8, width }}
+        style={{ left: 0, paddingLeft: 8 + columnWidth, width }}
         onClick={onClick}
         onKeyDown={onKeyDown}
       >
@@ -61,7 +63,7 @@ export default function GroupedRow({
           onClick={toggleGroup}
           onKeyDown={handleKeyDown}
         >
-          {isExpanded ? '\u25BC' : '\u25B6'} {groupKey}
+          {groupKey}{' '}{isExpanded ? '\u25BC' : '\u25B6'}
         </span>
       </div>
     </div>
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 89f6b0bfc3..b48e8697e0 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -2,3 +2,4 @@ export * from './useCombinedRefs';
 export * from './useClickOutside';
 export * from './useGridWidth';
 export * from './useViewportColumns';
+export * from './useViewportRows';
diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.tsx
similarity index 62%
rename from src/hooks/useViewportColumns.ts
rename to src/hooks/useViewportColumns.tsx
index e96dbeae82..e7774d33a2 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.tsx
@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 
-import { CalculatedColumn } from '../types';
-import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns } from '../utils';
+import { CalculatedColumn, Column } from '../types';
+import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns, canEdit, isGroupedRow } from '../utils';
 import { DataGridProps } from '../DataGrid';
 
 type SharedDataGridProps<R, K extends keyof R, SR> =
@@ -12,7 +12,7 @@ interface ViewportColumnsArgs<R, K extends keyof R, SR> extends SharedDataGridPr
   viewportWidth: number;
   scrollLeft: number;
   columnWidths: ReadonlyMap<string, number>;
-  groupBy?: string;
+  groupBy?: readonly string[];
 }
 
 export function useViewportColumns<R, K extends keyof R, SR>({
@@ -25,17 +25,36 @@ export function useViewportColumns<R, K extends keyof R, SR>({
   groupBy
 }: ViewportColumnsArgs<R, K, SR>) {
   rawColumns = useMemo(() => {
-    if (!groupBy) return rawColumns;
+    if (!groupBy || groupBy.length === 0) return rawColumns;
+
     // TODO: make it generic
     const selectColumn = rawColumns.find(c => c.key === 'select-row');
-    const groupByColumn = rawColumns.find(c => c.key === groupBy);
-    const remaningColumns = rawColumns.filter(c => c.key !== groupBy && c.key !== 'select-row');
+    const groupByColumns: Column<R, SR>[] = rawColumns
+      .filter(c => groupBy.includes(c.key))
+      .map(f => {
+        const updatedColumn: Column<R, SR> = { ...f };
+        updatedColumn.frozen = true;
+        updatedColumn.formatter = (p) => {
+          if (isGroupedRow(p.row)) {
+            const F = f.formatter || defaultFormatter;
+            return <F {...p} />;
+          }
+          return null;
+        };
+        updatedColumn.editable = row => {
+          return isGroupedRow(row) ? false : canEdit(updatedColumn, row);
+        };
+        return updatedColumn;
+      })
+      .sort((c1, c2) => groupBy.findIndex(k => k === c1.key) - groupBy.findIndex(k => k === c2.key));
+
+    const remaningColumns = rawColumns.filter(c => !groupBy.includes(c.key) && c.key !== 'select-row');
     return [
       selectColumn!,
-      { ...groupByColumn!, frozen: true },
+      ...groupByColumns,
       ...remaningColumns
     ];
-  }, [groupBy, rawColumns]);
+  }, [defaultFormatter, groupBy, rawColumns]);
 
   const { columns, lastFrozenColumnIndex, totalColumnWidth } = useMemo(() => {
     return getColumnMetrics<R, SR>({
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
new file mode 100644
index 0000000000..729dbe2ad0
--- /dev/null
+++ b/src/hooks/useViewportRows.ts
@@ -0,0 +1,65 @@
+import { useMemo, useState } from 'react';
+import { groupBy as lodashGroupBy, Dictionary } from 'lodash';
+
+import { GroupedRow, GroupByDictionary } from '../types';
+
+interface CalculatedRowsArgs<R, SR> {
+  rawRows: readonly R[];
+  groupBy?: readonly string[];
+}
+
+export function useViewportRows<R, SR>({ rawRows, groupBy }: CalculatedRowsArgs<R, SR>) {
+  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<string>>(new Set());
+
+  const groupedRows = useMemo(() => {
+    if (!groupBy || groupBy.length === 0) return;
+
+    function groupParent(rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[]) {
+      const parentGroup = lodashGroupBy(rows, groupByKey);
+      if (remainingGroupByKeys.length === 0) return parentGroup;
+      const childGroups: Dictionary<GroupByDictionary<R>> = {};
+      for (const key in parentGroup) {
+        childGroups[key] = groupParent(parentGroup[key], remainingGroupByKeys);
+      }
+
+      return childGroups;
+    }
+
+    return groupParent(rawRows, groupBy);
+  }, [groupBy, rawRows]);
+
+  const [calculatedRows, totalRowCount] = useMemo(() => {
+    if (!groupedRows) return [rawRows, rawRows.length];
+
+    function expandGroup(groupedRows: GroupByDictionary<R>, level: number): Array<GroupedRow | R> {
+      const flattenedRows: Array<R | GroupedRow> = [];
+      for (const key in groupedRows) {
+        const isExpanded = expandedGroupIds.has(key);
+        flattenedRows.push({ key, __isGroup: true, level, isExpanded });
+        if (isExpanded) {
+          const groupedRow = groupedRows[key];
+          if (Array.isArray(groupedRow)) {
+            flattenedRows.push(...groupedRow);
+          } else {
+            flattenedRows.push(...expandGroup(groupedRow, level + 1));
+          }
+        }
+      }
+
+      return flattenedRows;
+    }
+    return [expandGroup(groupedRows, 0), 0];
+  }, [expandedGroupIds, groupedRows, rawRows]);
+
+  function toggleGroup(key: string) {
+    const newExpandedGroupIds = new Set(expandedGroupIds);
+    if (expandedGroupIds.has(key)) {
+      newExpandedGroupIds.delete(key);
+    } else {
+      newExpandedGroupIds.add(key);
+    }
+    setExpandedGroupIds(newExpandedGroupIds);
+  }
+
+  return { calculatedRows, totalRowCount, toggleGroup };
+}
diff --git a/src/types.ts b/src/types.ts
index 47d839d596..0b551481a0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { KeyboardEvent } from 'react';
+import { Dictionary } from 'lodash';
 import { UpdateActions } from './enums';
 import EventBus from './EventBus';
 
@@ -189,3 +190,12 @@ export interface SelectRowEvent {
   checked: boolean;
   isShiftClick: boolean;
 }
+
+export type GroupByDictionary<TRow> = Dictionary<TRow[]> | Dictionary<GroupByDictionary<TRow>>;
+
+export interface GroupedRow {
+  __isGroup: boolean;
+  key: string;
+  level: number;
+  isExpanded: boolean;
+}
diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index a41ac4a987..8475bbf3d3 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -105,7 +105,7 @@ function clampColumnWidth<R, SR>(
 
 // Logic extented to allow for functions to be passed down in column.editable
 // this allows us to decide whether we can be editing from a cell level
-export function canEdit<R, SR>(column: CalculatedColumn<R, SR>, row: R): boolean {
+export function canEdit<R, SR>(column: Column<R, SR>, row: R): boolean {
   if (typeof column.editable === 'function') {
     return column.editable(row);
   }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 07f4f17083..dc07e6ae34 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,9 +1,15 @@
+import { GroupedRow } from '../types';
+
 export * from './domUtils';
 export * from './columnUtils';
 export * from './viewportUtils';
 export * from './keyboardUtils';
 export * from './selectedCellUtils';
 
+export function isGroupedRow<R>(row: R | GroupedRow): row is GroupedRow {
+  return (row as GroupedRow).__isGroup !== undefined;
+}
+
 export function assertIsValidKey<R>(key: unknown): asserts key is keyof R {
   if (key === undefined) {
     throw new Error('Please specify the rowKey prop to use selection');
diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index c1f118d75f..c49537e400 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -214,6 +214,8 @@ function createRows(): readonly Row[] {
   return rows;
 }
 
+const groupBy = ['country', 'area'];
+
 export default function CommonFeatures() {
   const [rows, setRows] = useState(createRows);
   const [[sortColumn, sortDirection], setSort] = useState<[string, SortDirection]>(['id', 'NONE']);
@@ -287,7 +289,7 @@ export default function CommonFeatures() {
           sortDirection={sortDirection}
           onSort={handleSort}
           summaryRows={summaryRows}
-          groupBy="country"
+          groupBy={groupBy}
         />
       )}
     </AutoSizer>

From bc00cbc9cd5deaf1f5071e293305136c7c8ad518 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Thu, 6 Aug 2020 16:18:43 -0500
Subject: [PATCH 03/79] Cleanup viewport rows

---
 src/DataGrid.tsx                 | 74 ++++++++++++++++++--------------
 src/hooks/useViewportColumns.tsx |  1 +
 src/hooks/useViewportRows.ts     | 48 +++++++++++++--------
 3 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 6d8940f132..39d8e978ab 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -15,7 +15,7 @@ import EventBus from './EventBus';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
 import Row from './Row';
-import GroupedRowRenderer from './GroupedRow';
+import GroupedRow from './GroupedRow';
 import SummaryRow from './SummaryRow';
 import { ValueFormatter } from './formatters';
 import { legacyCellInput } from './editors';
@@ -23,7 +23,6 @@ import {
   assertIsValidKey,
   getColumnScrollPosition,
   getScrollbarSize,
-  getVerticalRangeToRender,
   getNextSelectedCellPosition,
   isSelectedCellEditable,
   canExitGrid,
@@ -228,6 +227,9 @@ function DataGrid<R, K extends keyof R, SR>({
   const [isDragging, setDragging] = useState(false);
   const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);
 
+  // TODO: change it to props
+  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set());
+
   const setDraggedOverRowIdx = useCallback((rowIdx?: number) => {
     setOverRowIdx(rowIdx);
     latestDraggedOverRowIdx.current = rowIdx;
@@ -267,14 +269,14 @@ function DataGrid<R, K extends keyof R, SR>({
     - summaryRowsCount * rowHeight
     - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
 
-  const { calculatedRows, totalRowCount, toggleGroup } = useViewportRows({ rawRows, groupBy });
-
-  const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
-    clientHeight,
+  const { viewportRows, rows, startRowIdx, totalRowCount } = useViewportRows({
+    rawRows,
+    groupBy,
     rowHeight,
+    clientHeight,
     scrollTop,
-    calculatedRows.length
-  );
+    expandedGroupIds
+  });
 
   /**
    * effects
@@ -284,7 +286,7 @@ function DataGrid<R, K extends keyof R, SR>({
     prevSelectedPosition.current = selectedPosition;
     scrollToCell(selectedPosition);
 
-    const row = calculatedRows[selectedPosition.rowIdx];
+    const row = rows[selectedPosition.rowIdx];
     if (isGroupedRow(row)) return;
 
     // Let the formatter handle focus
@@ -300,7 +302,7 @@ function DataGrid<R, K extends keyof R, SR>({
     const handleRowSelectionChange = ({ rowIdx, checked, isShiftClick }: SelectRowEvent) => {
       assertIsValidKey(rowKey);
       const newSelectedRows = new Set(selectedRows);
-      const row = calculatedRows[rowIdx];
+      const row = rows[rowIdx];
       if (isGroupedRow(row)) return; // TODO: add a checkbox to select the group
       const rowId = row[rowKey];
 
@@ -311,7 +313,7 @@ function DataGrid<R, K extends keyof R, SR>({
         if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
           const step = Math.sign(rowIdx - previousRowIdx);
           for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
-            const row = calculatedRows[i];
+            const row = rows[i];
             if (!isGroupedRow(row)) {
               newSelectedRows.add(row[rowKey]);
             }
@@ -326,7 +328,7 @@ function DataGrid<R, K extends keyof R, SR>({
     };
 
     return eventBus.subscribe('SELECT_ROW', handleRowSelectionChange);
-  }, [calculatedRows, eventBus, onSelectedRowsChange, rowKey, selectedRows]);
+  }, [rows, eventBus, onSelectedRowsChange, rowKey, selectedRows]);
 
   useEffect(() => {
     return eventBus.subscribe('SELECT_CELL', selectCell);
@@ -401,7 +403,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function handleCommit({ cellKey, rowIdx, updated }: CommitEvent) {
     if (groupBy) {
-      rowIdx = rawRows.indexOf(calculatedRows[rowIdx] as R);
+      rowIdx = rawRows.indexOf(rows[rowIdx] as R);
     }
     onRowsUpdate?.({
       cellKey,
@@ -447,7 +449,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function handleCellInput(event: React.KeyboardEvent<HTMLDivElement>) {
     const { key } = event;
-    const row = calculatedRows[selectedPosition.rowIdx];
+    const row = rows[selectedPosition.rowIdx];
     if (isGroupedRow(row)) return;
     const column = columns[selectedPosition.idx];
     const canOpenEditor = selectedPosition.mode === 'SELECT' && isCellEditable(selectedPosition);
@@ -519,7 +521,7 @@ function DataGrid<R, K extends keyof R, SR>({
    */
 
   function isCellWithinBounds({ idx, rowIdx }: Position): boolean {
-    return rowIdx >= 0 && rowIdx < calculatedRows.length && idx >= 0 && idx < columns.length;
+    return rowIdx >= 0 && rowIdx < rows.length && idx >= 0 && idx < columns.length;
   }
 
   function isCellEditable(position: Position): boolean {
@@ -587,13 +589,13 @@ function DataGrid<R, K extends keyof R, SR>({
         return { idx: idx + 1, rowIdx };
       case 'Tab':
         if (selectedPosition.idx === -1 && selectedPosition.rowIdx === -1) {
-          return shiftKey ? { idx: columns.length - 1, rowIdx: calculatedRows.length - 1 } : { idx: 0, rowIdx: 0 };
+          return shiftKey ? { idx: columns.length - 1, rowIdx: rows.length - 1 } : { idx: 0, rowIdx: 0 };
         }
         return { idx: idx + (shiftKey ? -1 : 1), rowIdx };
       case 'Home':
         return ctrlKey ? { idx: 0, rowIdx: 0 } : { idx: 0, rowIdx };
       case 'End':
-        return ctrlKey ? { idx: columns.length - 1, rowIdx: calculatedRows.length - 1 } : { idx: columns.length - 1, rowIdx };
+        return ctrlKey ? { idx: columns.length - 1, rowIdx: rows.length - 1 } : { idx: columns.length - 1, rowIdx };
       case 'PageUp':
         return { idx, rowIdx: rowIdx - Math.floor(clientHeight / rowHeight) };
       case 'PageDown':
@@ -610,7 +612,7 @@ function DataGrid<R, K extends keyof R, SR>({
     let mode = cellNavigationMode;
     if (key === 'Tab') {
       // If we are in a position to leave the grid, stop editing but stay in that cell
-      if (canExitGrid({ shiftKey, cellNavigationMode, columns, rowsCount: calculatedRows.length, selectedPosition })) {
+      if (canExitGrid({ shiftKey, cellNavigationMode, columns, rowsCount: rows.length, selectedPosition })) {
         // Allow focus to leave the grid so the next control in the tab order can be focused
         return;
       }
@@ -625,7 +627,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
     nextPosition = getNextSelectedCellPosition<R, SR>({
       columns,
-      rowsCount: calculatedRows.length,
+      rowsCount: rows.length,
       cellNavigationMode: mode,
       nextPosition
     });
@@ -633,6 +635,16 @@ function DataGrid<R, K extends keyof R, SR>({
     selectCell(nextPosition);
   }
 
+  function toggleGroup(key: string) {
+    const newExpandedGroupIds = new Set(expandedGroupIds);
+    if (expandedGroupIds.has(key)) {
+      newExpandedGroupIds.delete(key);
+    } else {
+      newExpandedGroupIds.add(key);
+    }
+    setExpandedGroupIds(newExpandedGroupIds);
+  }
+
   function getDraggedOverCellIdx(currentRowIdx: number): number | undefined {
     if (draggedOverRowIdx === undefined) return;
     const { rowIdx } = selectedPosition;
@@ -675,14 +687,13 @@ function DataGrid<R, K extends keyof R, SR>({
   }
 
   function getViewportRows() {
-    const rowElements = [];
-    for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
+    return viewportRows.map((row, index) => {
+      const rowIdx = startRowIdx + index;
       const top = rowIdx * rowHeight + totalHeaderHeight;
-      const row = calculatedRows[rowIdx];
       if (isGroupedRow(row)) {
         const { key } = row;
-        rowElements.push(
-          <GroupedRowRenderer
+        return (
+          <GroupedRow
             aria-rowindex={headerRowsCount + rowIdx + 1}
             key={key}
             groupKey={key}
@@ -698,7 +709,6 @@ function DataGrid<R, K extends keyof R, SR>({
             toggleGroup={() => toggleGroup(key)}
           />
         );
-        continue;
       }
 
       let key: string | number = rowIdx;
@@ -711,7 +721,7 @@ function DataGrid<R, K extends keyof R, SR>({
         }
       }
 
-      rowElements.push(
+      return (
         <RowRenderer
           aria-rowindex={headerRowsCount + rowIdx + 1}
           aria-selected={isSelectable ? isRowSelected : undefined}
@@ -731,13 +741,11 @@ function DataGrid<R, K extends keyof R, SR>({
           selectedCellProps={getSelectedCellProps(rowIdx)}
         />
       );
-    }
-
-    return rowElements;
+    });
   }
 
   // Reset the positions if the current values are no longer valid. This can happen if a column or row is removed
-  if (selectedPosition.idx >= columns.length || selectedPosition.rowIdx >= calculatedRows.length) {
+  if (selectedPosition.idx >= columns.length || selectedPosition.rowIdx >= rows.length) {
     setSelectedPosition({ idx: -1, rowIdx: -1, mode: 'SELECT' });
     setCopiedPosition(null);
     setDraggedOverRowIdx(undefined);
@@ -751,7 +759,7 @@ function DataGrid<R, K extends keyof R, SR>({
       aria-describedby={ariaDescribedBy}
       aria-multiselectable={isSelectable ? true : undefined}
       aria-colcount={columns.length}
-      aria-rowcount={headerRowsCount + calculatedRows.length + summaryRowsCount}
+      aria-rowcount={headerRowsCount + rows.length + summaryRowsCount}
       className={clsx('rdg', { 'rdg-viewport-dragging': isDragging })}
       style={{
         width,
@@ -784,7 +792,7 @@ function DataGrid<R, K extends keyof R, SR>({
           onFiltersChange={onFiltersChange}
         />
       )}
-      {calculatedRows.length === 0 && emptyRowsRenderer ? createElement(emptyRowsRenderer) : (
+      {rows.length === 0 && emptyRowsRenderer ? createElement(emptyRowsRenderer) : (
         <>
           <div
             ref={focusSinkRef}
@@ -792,7 +800,7 @@ function DataGrid<R, K extends keyof R, SR>({
             className="rdg-focus-sink"
             onKeyDown={handleKeyDown}
           />
-          <div style={{ height: Math.max(calculatedRows.length * rowHeight, clientHeight) }} />
+          <div style={{ height: Math.max(rows.length * rowHeight, clientHeight) }} />
           {getViewportRows()}
           {summaryRows?.map((row, rowIdx) => (
             <SummaryRow<R, SR>
diff --git a/src/hooks/useViewportColumns.tsx b/src/hooks/useViewportColumns.tsx
index e7774d33a2..51b409a407 100644
--- a/src/hooks/useViewportColumns.tsx
+++ b/src/hooks/useViewportColumns.tsx
@@ -32,6 +32,7 @@ export function useViewportColumns<R, K extends keyof R, SR>({
     const groupByColumns: Column<R, SR>[] = rawColumns
       .filter(c => groupBy.includes(c.key))
       .map(f => {
+        // TODO: move the logic to GroupedRow
         const updatedColumn: Column<R, SR> = { ...f };
         updatedColumn.frozen = true;
         updatedColumn.formatter = (p) => {
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 729dbe2ad0..33b44f849f 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -1,16 +1,26 @@
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { groupBy as lodashGroupBy, Dictionary } from 'lodash';
 
 import { GroupedRow, GroupByDictionary } from '../types';
+import { getVerticalRangeToRender } from '../utils';
 
-interface CalculatedRowsArgs<R, SR> {
+interface ViewportRowsArgs<R, SR> {
   rawRows: readonly R[];
+  rowHeight: number;
+  clientHeight: number;
+  scrollTop: number;
   groupBy?: readonly string[];
+  expandedGroupIds?: Set<unknown>;
 }
 
-export function useViewportRows<R, SR>({ rawRows, groupBy }: CalculatedRowsArgs<R, SR>) {
-  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<string>>(new Set());
-
+export function useViewportRows<R, SR>({
+  rawRows,
+  rowHeight,
+  clientHeight,
+  scrollTop,
+  groupBy,
+  expandedGroupIds
+}: ViewportRowsArgs<R, SR>) {
   const groupedRows = useMemo(() => {
     if (!groupBy || groupBy.length === 0) return;
 
@@ -28,13 +38,13 @@ export function useViewportRows<R, SR>({ rawRows, groupBy }: CalculatedRowsArgs<
     return groupParent(rawRows, groupBy);
   }, [groupBy, rawRows]);
 
-  const [calculatedRows, totalRowCount] = useMemo(() => {
+  const [rows, totalRowCount] = useMemo(() => {
     if (!groupedRows) return [rawRows, rawRows.length];
 
     function expandGroup(groupedRows: GroupByDictionary<R>, level: number): Array<GroupedRow | R> {
       const flattenedRows: Array<R | GroupedRow> = [];
       for (const key in groupedRows) {
-        const isExpanded = expandedGroupIds.has(key);
+        const isExpanded = expandedGroupIds?.has(key) ?? false;
         flattenedRows.push({ key, __isGroup: true, level, isExpanded });
         if (isExpanded) {
           const groupedRow = groupedRows[key];
@@ -51,15 +61,19 @@ export function useViewportRows<R, SR>({ rawRows, groupBy }: CalculatedRowsArgs<
     return [expandGroup(groupedRows, 0), 0];
   }, [expandedGroupIds, groupedRows, rawRows]);
 
-  function toggleGroup(key: string) {
-    const newExpandedGroupIds = new Set(expandedGroupIds);
-    if (expandedGroupIds.has(key)) {
-      newExpandedGroupIds.delete(key);
-    } else {
-      newExpandedGroupIds.add(key);
-    }
-    setExpandedGroupIds(newExpandedGroupIds);
-  }
+  const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
+    clientHeight,
+    rowHeight,
+    scrollTop,
+    rows.length
+  );
+
+  const viewportRows = rows.slice(rowOverscanStartIdx, rowOverscanEndIdx + 1);
 
-  return { calculatedRows, totalRowCount, toggleGroup };
+  return {
+    viewportRows,
+    rows,
+    startRowIdx: rowOverscanStartIdx,
+    totalRowCount
+  };
 }

From 654ce7ff8542483acc61c757bf928774b6b95164 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 7 Aug 2020 13:30:10 -0500
Subject: [PATCH 04/79] memoize group row, add groupRowRenderer prop

---
 src/DataGrid.tsx             | 59 ++++++++++++++++++------------
 src/EventBus.ts              |  2 +
 src/GroupRow.tsx             | 70 +++++++++++++++++++++++++++++++++++
 src/GroupedRow.tsx           | 71 ------------------------------------
 src/hooks/useViewportRows.ts | 10 ++---
 src/types.ts                 | 14 ++++++-
 src/utils/index.ts           |  6 +--
 7 files changed, 128 insertions(+), 104 deletions(-)
 create mode 100644 src/GroupRow.tsx
 delete mode 100644 src/GroupedRow.tsx

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 39d8e978ab..970049a570 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -15,7 +15,7 @@ import EventBus from './EventBus';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
 import Row from './Row';
-import GroupedRow from './GroupedRow';
+import GroupRow from './GroupRow';
 import SummaryRow from './SummaryRow';
 import { ValueFormatter } from './formatters';
 import { legacyCellInput } from './editors';
@@ -38,6 +38,7 @@ import {
   FormatterProps,
   Position,
   RowRendererProps,
+  GroupRowRendererProps,
   RowsUpdateEvent,
   SelectRowEvent,
   CommitEvent,
@@ -129,6 +130,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
    */
   defaultFormatter?: React.ComponentType<FormatterProps<R, SR>>;
   rowRenderer?: React.ComponentType<RowRendererProps<R, SR>>;
+  groupRowRenderer?: React.ComponentType<GroupRowRendererProps<R, SR>>;
   emptyRowsRenderer?: React.ComponentType;
 
   /**
@@ -195,6 +197,7 @@ function DataGrid<R, K extends keyof R, SR>({
   // Custom renderers
   defaultFormatter = ValueFormatter,
   rowRenderer: RowRenderer = Row,
+  groupRowRenderer: GroupRowRenderer = GroupRow,
   emptyRowsRenderer,
   // Event props
   onRowClick,
@@ -334,6 +337,28 @@ function DataGrid<R, K extends keyof R, SR>({
     return eventBus.subscribe('SELECT_CELL', selectCell);
   });
 
+  useEffect(() => {
+    function toggleGroup(expandedGroupId: unknown) {
+      const newExpandedGroupIds = new Set(expandedGroupIds);
+      if (expandedGroupIds.has(expandedGroupId)) {
+        newExpandedGroupIds.delete(expandedGroupId);
+      } else {
+        newExpandedGroupIds.add(expandedGroupId);
+      }
+      setExpandedGroupIds(newExpandedGroupIds);
+    }
+
+    return eventBus.subscribe('TOGGLE_GROUP', toggleGroup);
+  }, [eventBus, expandedGroupIds]);
+
+  useEffect(() => {
+    function selectGroupRow(rowIdx: number) {
+      const idx = selectedPosition.idx === -1 ? 0 : selectedPosition.idx;
+      selectCell({ idx, rowIdx });
+    }
+    return eventBus.subscribe('SELECT_GROUP_ROW', selectGroupRow);
+  });
+
   useImperativeHandle(ref, () => ({
     scrollToColumn(idx: number) {
       scrollToCell({ idx });
@@ -635,16 +660,6 @@ function DataGrid<R, K extends keyof R, SR>({
     selectCell(nextPosition);
   }
 
-  function toggleGroup(key: string) {
-    const newExpandedGroupIds = new Set(expandedGroupIds);
-    if (expandedGroupIds.has(key)) {
-      newExpandedGroupIds.delete(key);
-    } else {
-      newExpandedGroupIds.add(key);
-    }
-    setExpandedGroupIds(newExpandedGroupIds);
-  }
-
   function getDraggedOverCellIdx(currentRowIdx: number): number | undefined {
     if (draggedOverRowIdx === undefined) return;
     const { rowIdx } = selectedPosition;
@@ -692,21 +707,19 @@ function DataGrid<R, K extends keyof R, SR>({
       const top = rowIdx * rowHeight + totalHeaderHeight;
       if (isGroupedRow(row)) {
         const { key } = row;
+        const isSelected = selectedPosition.rowIdx === rowIdx;
         return (
-          <GroupedRow
-            aria-rowindex={headerRowsCount + rowIdx + 1}
-            key={key}
-            groupKey={key}
+          <GroupRowRenderer
+            aria-rowindex={headerRowsCount + rowIdx + 1} // TODO: fix index
+            key={key as string}
+            viewportColumns={viewportColumns}
+            row={row}
+            rowIdx={rowIdx}
             top={top}
-            columnWidth={row.level}
             width={viewportWidth - getScrollbarSize()}
-            isExpanded={row.isExpanded}
-            isSelected={selectedPosition.rowIdx === rowIdx}
-            onClick={() => {
-              setSelectedPosition(({ idx }) => ({ idx: idx === -1 ? 0 : idx, rowIdx, mode: 'SELECT' }));
-            }}
-            onKeyDown={handleKeyDown}
-            toggleGroup={() => toggleGroup(key)}
+            isSelected={isSelected}
+            eventBus={eventBus}
+            onKeyDown={isSelected ? handleKeyDown : undefined}
           />
         );
       }
diff --git a/src/EventBus.ts b/src/EventBus.ts
index 7acbda57e5..5f5478d320 100644
--- a/src/EventBus.ts
+++ b/src/EventBus.ts
@@ -3,6 +3,8 @@ import { Position, SelectRowEvent } from './types';
 interface EventMap {
   SELECT_CELL: (position: Position, openEditor?: boolean) => void;
   SELECT_ROW: (event: SelectRowEvent) => void;
+  SELECT_GROUP_ROW: (rowIdx: number) => void;
+  TOGGLE_GROUP: (expandedGroupId: unknown) => void;
 }
 
 type EventName = keyof EventMap;
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
new file mode 100644
index 0000000000..835c2643b5
--- /dev/null
+++ b/src/GroupRow.tsx
@@ -0,0 +1,70 @@
+import React, { useRef, useLayoutEffect, memo } from 'react';
+import clsx from 'clsx';
+import { GroupRowRendererProps } from './types';
+
+function GroupedRow<R, SR>({
+  'aria-rowindex': ariaRowIndex,
+  viewportColumns,
+  row,
+  rowIdx,
+  top,
+  width,
+  isSelected,
+  eventBus,
+  onKeyDown,
+  ...props
+}: GroupRowRendererProps<R, SR>) {
+  const cellRef = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (!isSelected) return;
+    cellRef.current?.focus();
+  }, [isSelected]);
+
+  function selectGroup() {
+    eventBus.dispatch('SELECT_GROUP_ROW', rowIdx);
+  }
+
+  function toggleGroup() {
+    eventBus.dispatch('TOGGLE_GROUP', row.key);
+  }
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
+    const { key } = event;
+    if (['ArrowLeft', 'ArrowRight', 'Enter', ' '].includes(key)) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (key === ' ' || key === 'Enter') {
+        toggleGroup();
+      }
+    }
+  }
+
+  return (
+    <div
+      role="row"
+      aria-rowindex={ariaRowIndex}
+      className="rdg-row rdg-group-row"
+      style={{ top }}
+      onClick={selectGroup}
+      {...props}
+    >
+      <div
+        className={clsx('rdg-cell', 'rdg-cell-frozen', { 'rdg-cell-selected': isSelected })}
+        style={{ left: 0, paddingLeft: viewportColumns[row.level + 1].left, width }} // TODO: how to handle checkbox?
+        onKeyDown={onKeyDown}
+      >
+        <span
+          ref={cellRef}
+          tabIndex={-1}
+          style={{ cursor: 'pointer' }}
+          onClick={toggleGroup}
+          onKeyDown={handleKeyDown}
+        >
+          {row.key}{' '}{row.isExpanded ? '\u25BC' : '\u25B6'}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+export default memo(GroupedRow) as <R, SR>(props: GroupRowRendererProps<R, SR>) => JSX.Element;
diff --git a/src/GroupedRow.tsx b/src/GroupedRow.tsx
deleted file mode 100644
index 88279b00ce..0000000000
--- a/src/GroupedRow.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useRef, useLayoutEffect } from 'react';
-import clsx from 'clsx';
-
-type SharedDivProps = Pick<React.HTMLAttributes<HTMLDivElement>,
-  | 'onClick'
-  | 'onKeyDown'
-  | 'aria-rowindex'
->;
-
-interface GroupedRowProps extends SharedDivProps {
-  groupKey: string;
-  top: number;
-  width: number;
-  columnWidth: number;
-  isExpanded: boolean;
-  isSelected: boolean;
-  toggleGroup: () => void;
-}
-
-export default function GroupedRow({
-  'aria-rowindex': ariaRowIndex,
-  groupKey,
-  top,
-  width,
-  columnWidth,
-  isExpanded,
-  isSelected,
-  onClick,
-  onKeyDown,
-  toggleGroup
-}: GroupedRowProps) {
-  const cellRef = useRef<HTMLDivElement>(null);
-  useLayoutEffect(() => {
-    if (!isSelected) return;
-    cellRef.current?.focus();
-  }, [isSelected]);
-
-  function handleKeyDown(e: React.KeyboardEvent<HTMLSpanElement>) {
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      toggleGroup();
-    }
-  }
-
-  return (
-    <div
-      role="row"
-      aria-rowindex={ariaRowIndex}
-      className="rdg-row rdg-grouped-row"
-      style={{ top }}
-      onClick={onClick}
-    >
-      <div
-        className={clsx('rdg-cell', 'rdg-cell-frozen', { 'rdg-cell-selected': isSelected })}
-        style={{ left: 0, paddingLeft: 8 + columnWidth, width }}
-        onClick={onClick}
-        onKeyDown={onKeyDown}
-      >
-        <span
-          ref={cellRef}
-          tabIndex={-1}
-          style={{ cursor: 'pointer' }}
-          onClick={toggleGroup}
-          onKeyDown={handleKeyDown}
-        >
-          {groupKey}{' '}{isExpanded ? '\u25BC' : '\u25B6'}
-        </span>
-      </div>
-    </div>
-  );
-}
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 33b44f849f..3e5eb7ccea 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { groupBy as lodashGroupBy, Dictionary } from 'lodash';
 
-import { GroupedRow, GroupByDictionary } from '../types';
+import { GroupRow, GroupByDictionary } from '../types';
 import { getVerticalRangeToRender } from '../utils';
 
 interface ViewportRowsArgs<R, SR> {
@@ -41,13 +41,13 @@ export function useViewportRows<R, SR>({
   const [rows, totalRowCount] = useMemo(() => {
     if (!groupedRows) return [rawRows, rawRows.length];
 
-    function expandGroup(groupedRows: GroupByDictionary<R>, level: number): Array<GroupedRow | R> {
-      const flattenedRows: Array<R | GroupedRow> = [];
-      for (const key in groupedRows) {
+    function expandGroup(rows: GroupByDictionary<R>, level: number): Array<GroupRow | R> {
+      const flattenedRows: Array<R | GroupRow> = [];
+      for (const key in rows) {
         const isExpanded = expandedGroupIds?.has(key) ?? false;
         flattenedRows.push({ key, __isGroup: true, level, isExpanded });
         if (isExpanded) {
-          const groupedRow = groupedRows[key];
+          const groupedRow = rows[key];
           if (Array.isArray(groupedRow)) {
             flattenedRows.push(...groupedRow);
           } else {
diff --git a/src/types.ts b/src/types.ts
index 0b551481a0..e746b85bd1 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -157,6 +157,16 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown> extends Omit<Reac
   setDraggedOverRowIdx?: (overRowIdx: number) => void;
 }
 
+export interface GroupRowRendererProps<TRow, TSummaryRow = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
+  viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
+  row: Readonly<GroupRow>;
+  rowIdx: number;
+  top: number;
+  width: number;
+  isSelected: boolean;
+  eventBus: EventBus;
+}
+
 export interface FilterRendererProps<TRow, TFilterValue = unknown, TSummaryRow = unknown> {
   column: CalculatedColumn<TRow, TSummaryRow>;
   value: TFilterValue;
@@ -193,9 +203,9 @@ export interface SelectRowEvent {
 
 export type GroupByDictionary<TRow> = Dictionary<TRow[]> | Dictionary<GroupByDictionary<TRow>>;
 
-export interface GroupedRow {
+export interface GroupRow {
   __isGroup: boolean;
-  key: string;
+  key: unknown;
   level: number;
   isExpanded: boolean;
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index dc07e6ae34..2174540bf8 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,4 @@
-import { GroupedRow } from '../types';
+import { GroupRow } from '../types';
 
 export * from './domUtils';
 export * from './columnUtils';
@@ -6,8 +6,8 @@ export * from './viewportUtils';
 export * from './keyboardUtils';
 export * from './selectedCellUtils';
 
-export function isGroupedRow<R>(row: R | GroupedRow): row is GroupedRow {
-  return (row as GroupedRow).__isGroup !== undefined;
+export function isGroupedRow<R>(row: R | GroupRow): row is GroupRow {
+  return (row as GroupRow).__isGroup !== undefined;
 }
 
 export function assertIsValidKey<R>(key: unknown): asserts key is keyof R {

From 067f4e60784c76d2d43bae6590c474fa34081e26 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 7 Aug 2020 14:51:22 -0500
Subject: [PATCH 05/79] Cleanup useViewportColumns

---
 src/Cell.tsx                                  |  2 +
 src/Columns.tsx                               |  4 +-
 src/DataGrid.tsx                              |  2 +-
 src/GroupRow.tsx                              |  5 ++-
 ...wportColumns.tsx => useViewportColumns.ts} | 43 +++++++------------
 src/types.ts                                  |  3 +-
 src/utils/selectedCellUtils.ts                |  1 +
 stories/demos/CommonFeatures.tsx              |  2 +-
 8 files changed, 30 insertions(+), 32 deletions(-)
 rename src/hooks/{useViewportColumns.tsx => useViewportColumns.ts} (67%)

diff --git a/src/Cell.tsx b/src/Cell.tsx
index bb082ab643..1d9c3bc53f 100644
--- a/src/Cell.tsx
+++ b/src/Cell.tsx
@@ -85,6 +85,8 @@ function Cell<R, SR>({
       );
     }
 
+    if (column.rowGroup) return;
+
     return (
       <>
         <column.formatter
diff --git a/src/Columns.tsx b/src/Columns.tsx
index 41a421a5f9..61227f1ecb 100644
--- a/src/Columns.tsx
+++ b/src/Columns.tsx
@@ -2,10 +2,12 @@ import React from 'react';
 import { SelectCellFormatter } from './formatters';
 import { Column } from './types';
 
+export const SELECT_COLUMN_KEY = 'select-row';
+
 // TODO: fix type
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const SelectColumn: Column<any, any> = {
-  key: 'select-row',
+  key: SELECT_COLUMN_KEY,
   name: '',
   width: 35,
   maxWidth: 35,
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 970049a570..2d48bc0588 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -123,7 +123,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   onSort?: (columnKey: string, direction: SortDirection) => void;
   filters?: Filters;
   onFiltersChange?: (filters: Filters) => void;
-  groupBy?: readonly string[]; // TODO: support custom grouping logic
+  groupBy?: readonly string[]; // TODO: support custom grouping logic amd totals
 
   /**
    * Custom renderers
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 835c2643b5..db13d50ccf 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -1,6 +1,7 @@
 import React, { useRef, useLayoutEffect, memo } from 'react';
 import clsx from 'clsx';
 import { GroupRowRendererProps } from './types';
+import { SELECT_COLUMN_KEY } from './Columns';
 
 function GroupedRow<R, SR>({
   'aria-rowindex': ariaRowIndex,
@@ -39,6 +40,8 @@ function GroupedRow<R, SR>({
     }
   }
 
+  const columnIndex = viewportColumns[0].key === SELECT_COLUMN_KEY ? row.level + 1 : row.level;
+
   return (
     <div
       role="row"
@@ -50,7 +53,7 @@ function GroupedRow<R, SR>({
     >
       <div
         className={clsx('rdg-cell', 'rdg-cell-frozen', { 'rdg-cell-selected': isSelected })}
-        style={{ left: 0, paddingLeft: viewportColumns[row.level + 1].left, width }} // TODO: how to handle checkbox?
+        style={{ left: 0, paddingLeft: viewportColumns[columnIndex].left, width }}
         onKeyDown={onKeyDown}
       >
         <span
diff --git a/src/hooks/useViewportColumns.tsx b/src/hooks/useViewportColumns.ts
similarity index 67%
rename from src/hooks/useViewportColumns.tsx
rename to src/hooks/useViewportColumns.ts
index 51b409a407..4bea663287 100644
--- a/src/hooks/useViewportColumns.tsx
+++ b/src/hooks/useViewportColumns.ts
@@ -1,8 +1,9 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { CalculatedColumn, Column } from '../types';
-import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns, canEdit, isGroupedRow } from '../utils';
+import { CalculatedColumn } from '../types';
+import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns } from '../utils';
 import { DataGridProps } from '../DataGrid';
+import { SELECT_COLUMN_KEY } from '../Columns';
 
 type SharedDataGridProps<R, K extends keyof R, SR> =
   Pick<DataGridProps<R, K, SR>, 'columns'> &
@@ -27,35 +28,23 @@ export function useViewportColumns<R, K extends keyof R, SR>({
   rawColumns = useMemo(() => {
     if (!groupBy || groupBy.length === 0) return rawColumns;
 
-    // TODO: make it generic
-    const selectColumn = rawColumns.find(c => c.key === 'select-row');
-    const groupByColumns: Column<R, SR>[] = rawColumns
+    const selectColumn = rawColumns.find(c => c.key === SELECT_COLUMN_KEY);
+    const groupByColumns = rawColumns
       .filter(c => groupBy.includes(c.key))
-      .map(f => {
-        // TODO: move the logic to GroupedRow
-        const updatedColumn: Column<R, SR> = { ...f };
-        updatedColumn.frozen = true;
-        updatedColumn.formatter = (p) => {
-          if (isGroupedRow(p.row)) {
-            const F = f.formatter || defaultFormatter;
-            return <F {...p} />;
-          }
-          return null;
-        };
-        updatedColumn.editable = row => {
-          return isGroupedRow(row) ? false : canEdit(updatedColumn, row);
-        };
-        return updatedColumn;
-      })
+      .map(c => ({ ...c, frozen: true, rowGroup: true }))
       .sort((c1, c2) => groupBy.findIndex(k => k === c1.key) - groupBy.findIndex(k => k === c2.key));
-
-    const remaningColumns = rawColumns.filter(c => !groupBy.includes(c.key) && c.key !== 'select-row');
-    return [
-      selectColumn!,
+    const remaningColumns = rawColumns.filter(c => !groupBy.includes(c.key) && c.key !== SELECT_COLUMN_KEY);
+    const sortedColumns = [
       ...groupByColumns,
       ...remaningColumns
     ];
-  }, [defaultFormatter, groupBy, rawColumns]);
+
+    if (selectColumn) {
+      sortedColumns.unshift(selectColumn);
+    }
+
+    return sortedColumns;
+  }, [groupBy, rawColumns]);
 
   const { columns, lastFrozenColumnIndex, totalColumnWidth } = useMemo(() => {
     return getColumnMetrics<R, SR>({
diff --git a/src/types.ts b/src/types.ts
index e746b85bd1..83247421f9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -52,6 +52,7 @@ export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TR
   idx: number;
   width: number;
   left: number;
+  rowGroup?: boolean;
   formatter: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;
 }
 
@@ -159,7 +160,7 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown> extends Omit<Reac
 
 export interface GroupRowRendererProps<TRow, TSummaryRow = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
   viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
-  row: Readonly<GroupRow>;
+  row: GroupRow;
   rowIdx: number;
   top: number;
   width: number;
diff --git a/src/utils/selectedCellUtils.ts b/src/utils/selectedCellUtils.ts
index c16833ca64..669218d95b 100644
--- a/src/utils/selectedCellUtils.ts
+++ b/src/utils/selectedCellUtils.ts
@@ -12,6 +12,7 @@ interface IsSelectedCellEditableOpts<R, SR> {
 export function isSelectedCellEditable<R, SR>({ selectedPosition, columns, rows, onCheckCellIsEditable }: IsSelectedCellEditableOpts<R, SR>): boolean {
   const column = columns[selectedPosition.idx];
   const row = rows[selectedPosition.rowIdx];
+  if (column.rowGroup) return false;
   const isCellEditable = onCheckCellIsEditable ? onCheckCellIsEditable({ row, column, ...selectedPosition }) : true;
   return isCellEditable && canEdit<R, SR>(column, row);
 }
diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index c49537e400..f4456b02b1 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -214,7 +214,7 @@ function createRows(): readonly Row[] {
   return rows;
 }
 
-const groupBy = ['country', 'area'];
+const groupBy = ['country', 'transaction'];
 
 export default function CommonFeatures() {
   const [rows, setRows] = useState(createRows);

From c5de19e97eb2a332ee327202cd3a740d7f5a6f58 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 14 Aug 2020 11:55:43 -0500
Subject: [PATCH 06/79] Fix keys

---
 src/EventBus.ts              |  2 +-
 src/GroupRow.tsx             |  2 +-
 src/hooks/useViewportRows.ts | 17 ++++++++++++-----
 src/types.ts                 |  8 ++++++--
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/EventBus.ts b/src/EventBus.ts
index 5f5478d320..62a44c2fd1 100644
--- a/src/EventBus.ts
+++ b/src/EventBus.ts
@@ -4,7 +4,7 @@ interface EventMap {
   SELECT_CELL: (position: Position, openEditor?: boolean) => void;
   SELECT_ROW: (event: SelectRowEvent) => void;
   SELECT_GROUP_ROW: (rowIdx: number) => void;
-  TOGGLE_GROUP: (expandedGroupId: unknown) => void;
+  TOGGLE_GROUP: (id: unknown) => void;
 }
 
 type EventName = keyof EventMap;
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index db13d50ccf..088fff81b7 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -26,7 +26,7 @@ function GroupedRow<R, SR>({
   }
 
   function toggleGroup() {
-    eventBus.dispatch('TOGGLE_GROUP', row.key);
+    eventBus.dispatch('TOGGLE_GROUP', row.id);
   }
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 3e5eb7ccea..3dd6f0fdd3 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -41,24 +41,31 @@ export function useViewportRows<R, SR>({
   const [rows, totalRowCount] = useMemo(() => {
     if (!groupedRows) return [rawRows, rawRows.length];
 
-    function expandGroup(rows: GroupByDictionary<R>, level: number): Array<GroupRow | R> {
+    function expandGroup(rows: GroupByDictionary<R>, parentKey: string, level: number): Array<GroupRow | R> {
       const flattenedRows: Array<R | GroupRow> = [];
       for (const key in rows) {
-        const isExpanded = expandedGroupIds?.has(key) ?? false;
-        flattenedRows.push({ key, __isGroup: true, level, isExpanded });
+        const id = `${parentKey}__${key}`;
+        const isExpanded = expandedGroupIds?.has(id) ?? false;
+        flattenedRows.push({
+          id,
+          key,
+          level,
+          isExpanded,
+          __isGroup: true
+        });
         if (isExpanded) {
           const groupedRow = rows[key];
           if (Array.isArray(groupedRow)) {
             flattenedRows.push(...groupedRow);
           } else {
-            flattenedRows.push(...expandGroup(groupedRow, level + 1));
+            flattenedRows.push(...expandGroup(groupedRow, key, level + 1));
           }
         }
       }
 
       return flattenedRows;
     }
-    return [expandGroup(groupedRows, 0), 0];
+    return [expandGroup(groupedRows, '', 0), 0];
   }, [expandedGroupIds, groupedRows, rawRows]);
 
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
diff --git a/src/types.ts b/src/types.ts
index 8fd63e7a19..ec33dedcb5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { KeyboardEvent } from 'react';
-import { Dictionary } from 'lodash';
 import { UpdateActions } from './enums';
 import EventBus from './EventBus';
 
@@ -204,11 +203,16 @@ export interface SelectRowEvent {
   isShiftClick: boolean;
 }
 
+export interface Dictionary<T> {
+  [index: string]: T;
+}
+
 export type GroupByDictionary<TRow> = Dictionary<TRow[]> | Dictionary<GroupByDictionary<TRow>>;
 
 export interface GroupRow {
-  __isGroup: boolean;
+  id: string;
   key: unknown;
   level: number;
   isExpanded: boolean;
+  __isGroup: boolean;
 }

From 4f8e333e67434a6b7f5b658b441f3f300c27ab6f Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Mon, 17 Aug 2020 07:48:41 -0500
Subject: [PATCH 07/79] Add column.groupFormatter prop and checkbox column

---
 src/Columns.tsx                         | 11 ++++
 src/DataGrid.tsx                        | 33 +++++------
 src/EventBus.ts                         |  1 -
 src/GroupRow.tsx                        | 75 +++++++++++++------------
 src/formatters/ToggleGroupFormatter.tsx | 37 ++++++++++++
 src/formatters/index.ts                 |  1 +
 src/hooks/useViewportColumns.ts         | 24 +++++---
 src/hooks/useViewportRows.ts            | 40 +++++++------
 src/types.ts                            | 28 +++++++--
 src/utils/index.ts                      |  4 +-
 stories/demos/CommonFeatures.tsx        |  9 ++-
 style/row.less                          | 34 +++++++++++
 style/variables.less                    |  1 +
 13 files changed, 207 insertions(+), 91 deletions(-)
 create mode 100644 src/formatters/ToggleGroupFormatter.tsx

diff --git a/src/Columns.tsx b/src/Columns.tsx
index 70a4cc4e4b..1178aa15df 100644
--- a/src/Columns.tsx
+++ b/src/Columns.tsx
@@ -33,6 +33,17 @@ export const SelectColumn: Column<any, any> = {
       />
     );
   },
+  groupFormatter(props) {
+    return (
+      <SelectCellFormatter
+        aria-label="Select Group"
+        tabIndex={-1}
+        isCellSelected={props.isCellSelected}
+        value={props.isRowSelected}
+        onChange={() => {}}
+      />
+    );
+  },
   formatterOptions: {
     focusable: true
   }
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 26f334cd00..8f199e1214 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -15,7 +15,7 @@ import EventBus from './EventBus';
 import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
 import Row from './Row';
-import GroupRow from './GroupRow';
+import GroupRowRenderer from './GroupRow';
 import SummaryRow from './SummaryRow';
 import { legacyCellInput } from './editors';
 import {
@@ -36,11 +36,11 @@ import {
   Filters,
   Position,
   RowRendererProps,
-  GroupRowRendererProps,
   RowsUpdateEvent,
   SelectRowEvent,
   CommitEvent,
-  SelectedCellProps
+  SelectedCellProps,
+  Dictionary
 } from './types';
 import { CellNavigationMode, SortDirection, UpdateActions } from './enums';
 
@@ -127,13 +127,13 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   filters?: Filters;
   onFiltersChange?: (filters: Filters) => void;
   defaultColumnOptions?: DefaultColumnOptions<R, SR>;
-  groupBy?: readonly string[]; // TODO: support custom grouping logic amd totals
+  groupBy?: readonly string[];
+  rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<R[]>;
 
   /**
    * Custom renderers
    */
   rowRenderer?: React.ComponentType<RowRendererProps<R, SR>>;
-  groupRowRenderer?: React.ComponentType<GroupRowRendererProps<R, SR>>;
   emptyRowsRenderer?: React.ComponentType;
 
   /**
@@ -197,9 +197,9 @@ function DataGrid<R, K extends keyof R, SR>({
   onFiltersChange,
   defaultColumnOptions,
   groupBy,
+  rowGrouper,
   // Custom renderers
   rowRenderer: RowRenderer = Row,
-  groupRowRenderer: GroupRowRenderer = GroupRow,
   emptyRowsRenderer,
   // Event props
   onRowClick,
@@ -262,8 +262,9 @@ function DataGrid<R, K extends keyof R, SR>({
     columnWidths,
     scrollLeft,
     viewportWidth,
+    defaultColumnOptions,
     groupBy,
-    defaultColumnOptions
+    rowGrouper
   });
 
   const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);
@@ -276,6 +277,7 @@ function DataGrid<R, K extends keyof R, SR>({
   const { viewportRows, rows, startRowIdx, totalRowCount } = useViewportRows({
     rawRows,
     groupBy,
+    rowGrouper,
     rowHeight,
     clientHeight,
     scrollTop,
@@ -352,14 +354,6 @@ function DataGrid<R, K extends keyof R, SR>({
     return eventBus.subscribe('TOGGLE_GROUP', toggleGroup);
   }, [eventBus, expandedGroupIds]);
 
-  useEffect(() => {
-    function selectGroupRow(rowIdx: number) {
-      const idx = selectedPosition.idx === -1 ? 0 : selectedPosition.idx;
-      selectCell({ idx, rowIdx });
-    }
-    return eventBus.subscribe('SELECT_GROUP_ROW', selectGroupRow);
-  });
-
   useImperativeHandle(ref, () => ({
     scrollToColumn(idx: number) {
       scrollToCell({ idx });
@@ -707,18 +701,19 @@ function DataGrid<R, K extends keyof R, SR>({
       const rowIdx = startRowIdx + index;
       const top = rowIdx * rowHeight + totalHeaderHeight;
       if (isGroupedRow(row)) {
-        const { key } = row;
         const isSelected = selectedPosition.rowIdx === rowIdx;
         return (
           <GroupRowRenderer
             aria-rowindex={headerRowsCount + rowIdx + 1} // TODO: fix index
-            key={key as string}
+            key={row.id}
             viewportColumns={viewportColumns}
             row={row}
             rowIdx={rowIdx}
+            lastFrozenColumnIndex={lastFrozenColumnIndex}
+            groupBy={groupBy!}
             top={top}
-            width={viewportWidth - getScrollbarSize()}
-            isSelected={isSelected}
+            isCellSelected={isSelected}
+            isRowSelected={row.childRows.every(cr => selectedRows?.has(cr[rowKey!]))}
             eventBus={eventBus}
             onKeyDown={isSelected ? handleKeyDown : undefined}
           />
diff --git a/src/EventBus.ts b/src/EventBus.ts
index 62a44c2fd1..e8fe095733 100644
--- a/src/EventBus.ts
+++ b/src/EventBus.ts
@@ -3,7 +3,6 @@ import { Position, SelectRowEvent } from './types';
 interface EventMap {
   SELECT_CELL: (position: Position, openEditor?: boolean) => void;
   SELECT_ROW: (event: SelectRowEvent) => void;
-  SELECT_GROUP_ROW: (rowIdx: number) => void;
   TOGGLE_GROUP: (id: unknown) => void;
 }
 
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 088fff81b7..7ac2ba5ea6 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useLayoutEffect, memo } from 'react';
+import React, { memo } from 'react';
 import clsx from 'clsx';
 import { GroupRowRendererProps } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
@@ -8,64 +8,65 @@ function GroupedRow<R, SR>({
   viewportColumns,
   row,
   rowIdx,
+  lastFrozenColumnIndex,
   top,
-  width,
-  isSelected,
+  isCellSelected,
+  isRowSelected,
+  groupBy,
   eventBus,
   onKeyDown,
   ...props
 }: GroupRowRendererProps<R, SR>) {
-  const cellRef = useRef<HTMLDivElement>(null);
-  useLayoutEffect(() => {
-    if (!isSelected) return;
-    cellRef.current?.focus();
-  }, [isSelected]);
+  const level = viewportColumns[0].key === SELECT_COLUMN_KEY ? row.level + 1 : row.level;
 
   function selectGroup() {
-    eventBus.dispatch('SELECT_GROUP_ROW', rowIdx);
+    eventBus.dispatch('SELECT_CELL', { rowIdx, idx: level });
   }
 
   function toggleGroup() {
     eventBus.dispatch('TOGGLE_GROUP', row.id);
   }
 
-  function handleKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
-    const { key } = event;
-    if (['ArrowLeft', 'ArrowRight', 'Enter', ' '].includes(key)) {
-      event.preventDefault();
-      event.stopPropagation();
-      if (key === ' ' || key === 'Enter') {
-        toggleGroup();
-      }
-    }
-  }
-
-  const columnIndex = viewportColumns[0].key === SELECT_COLUMN_KEY ? row.level + 1 : row.level;
 
   return (
     <div
       role="row"
       aria-rowindex={ariaRowIndex}
-      className="rdg-row rdg-group-row"
-      style={{ top }}
+      className={clsx('rdg-row rdg-group-row', {
+        'rdg-row-even': rowIdx % 2 === 0,
+        'rdg-row-odd': rowIdx % 2 !== 0,
+        'rdg-group-row-selected': isCellSelected
+      })}
       onClick={selectGroup}
+      onKeyDown={onKeyDown}
+      style={{ top }}
       {...props}
     >
-      <div
-        className={clsx('rdg-cell', 'rdg-cell-frozen', { 'rdg-cell-selected': isSelected })}
-        style={{ left: 0, paddingLeft: viewportColumns[columnIndex].left, width }}
-        onKeyDown={onKeyDown}
-      >
-        <span
-          ref={cellRef}
-          tabIndex={-1}
-          style={{ cursor: 'pointer' }}
-          onClick={toggleGroup}
-          onKeyDown={handleKeyDown}
+      {viewportColumns.map(column => (
+        <div
+          role="gridcell"
+          aria-colindex={column.idx + 1}
+          key={column.key}
+          className={clsx('rdg-cell', {
+            'rdg-cell-frozen': column.frozen,
+            'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex
+          })}
+          style={{
+            width: column.width,
+            left: column.left
+          }}
         >
-          {row.key}{' '}{row.isExpanded ? '\u25BC' : '\u25B6'}
-        </span>
-      </div>
+          {column.groupFormatter && (groupBy.includes(column.key) ? level === column.idx : true) && (
+            <column.groupFormatter
+              row={row}
+              column={column}
+              isCellSelected={isCellSelected}
+              isRowSelected={isRowSelected}
+              toggleGroup={toggleGroup}
+            />
+          )}
+        </div>
+      ))}
     </div>
   );
 }
diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
new file mode 100644
index 0000000000..0d15437984
--- /dev/null
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -0,0 +1,37 @@
+import React, { useRef, useLayoutEffect } from 'react';
+import { GroupFormatterProps } from '../types';
+
+export function ToggleGroupedFormatter<R, SR>({
+  row,
+  isCellSelected,
+  toggleGroup
+}: GroupFormatterProps<R, SR>) {
+  const cellRef = useRef<HTMLDivElement>(null);
+  useLayoutEffect(() => {
+    if (!isCellSelected) return;
+    cellRef.current?.focus();
+  }, [isCellSelected]);
+
+  function handleKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
+    const { key } = event;
+    if (['ArrowLeft', 'ArrowRight', 'Enter', ' '].includes(key)) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (key === ' ' || key === 'Enter') {
+        toggleGroup();
+      }
+    }
+  }
+
+  return (
+    <span
+      ref={cellRef}
+      tabIndex={-1}
+      style={{ cursor: 'pointer' }}
+      onClick={toggleGroup}
+      onKeyDown={handleKeyDown}
+    >
+      {row.key}{' '}{row.isExpanded ? '\u25BC' : '\u25B6'}
+    </span>
+  );
+}
diff --git a/src/formatters/index.ts b/src/formatters/index.ts
index 998b261e06..e4af276e17 100644
--- a/src/formatters/index.ts
+++ b/src/formatters/index.ts
@@ -1,3 +1,4 @@
 export * from './SelectCellFormatter';
 export * from './SimpleCellFormatter';
 export * from './ValueFormatter';
+export * from './ToggleGroupFormatter';
diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
index 6f09829a25..76cb1615fd 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.ts
@@ -4,15 +4,19 @@ import { CalculatedColumn } from '../types';
 import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns } from '../utils';
 import { DataGridProps } from '../DataGrid';
 import { SELECT_COLUMN_KEY } from '../Columns';
-import { ValueFormatter } from '../formatters';
+import { ValueFormatter, ToggleGroupedFormatter } from '../formatters';
 
-type SharedDataGridProps<R, K extends keyof R, SR> = Pick<DataGridProps<R, K, SR>, 'columns' | 'defaultColumnOptions'>;
+type SharedDataGridProps<R, K extends keyof R, SR> = Pick<DataGridProps<R, K, SR>,
+  | 'columns'
+  | 'defaultColumnOptions'
+  | 'groupBy'
+  | 'rowGrouper'
+>;
 
 interface ViewportColumnsArgs<R, K extends keyof R, SR> extends SharedDataGridProps<R, K, SR> {
   viewportWidth: number;
   scrollLeft: number;
   columnWidths: ReadonlyMap<string, number>;
-  groupBy?: readonly string[];
 }
 
 export function useViewportColumns<R, K extends keyof R, SR>({
@@ -21,15 +25,21 @@ export function useViewportColumns<R, K extends keyof R, SR>({
   viewportWidth,
   scrollLeft,
   defaultColumnOptions,
-  groupBy
+  groupBy,
+  rowGrouper
 }: ViewportColumnsArgs<R, K, SR>) {
   rawColumns = useMemo(() => {
-    if (!groupBy || groupBy.length === 0) return rawColumns;
+    if (!groupBy || groupBy.length === 0 || !rowGrouper) return rawColumns;
 
     const selectColumn = rawColumns.find(c => c.key === SELECT_COLUMN_KEY);
     const groupByColumns = rawColumns
       .filter(c => groupBy.includes(c.key))
-      .map(c => ({ ...c, frozen: true, rowGroup: true }))
+      .map(c => ({
+        ...c,
+        frozen: true,
+        rowGroup: true,
+        groupFormatter: c.groupFormatter ?? ToggleGroupedFormatter
+      }))
       .sort((c1, c2) => groupBy.findIndex(k => k === c1.key) - groupBy.findIndex(k => k === c2.key));
     const remaningColumns = rawColumns.filter(c => !groupBy.includes(c.key) && c.key !== SELECT_COLUMN_KEY);
     const sortedColumns = [
@@ -42,7 +52,7 @@ export function useViewportColumns<R, K extends keyof R, SR>({
     }
 
     return sortedColumns;
-  }, [groupBy, rawColumns]);
+  }, [groupBy, rowGrouper, rawColumns]);
 
   const minColumnWidth = defaultColumnOptions?.minWidth ?? 80;
   const defaultFormatter = defaultColumnOptions?.formatter ?? ValueFormatter;
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 3dd6f0fdd3..e4f4d27fbc 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
-import { groupBy as lodashGroupBy, Dictionary } from 'lodash';
 
-import { GroupRow, GroupByDictionary } from '../types';
+import { GroupRow, GroupByDictionary, Dictionary } from '../types';
 import { getVerticalRangeToRender } from '../utils';
 
 interface ViewportRowsArgs<R, SR> {
@@ -10,6 +9,7 @@ interface ViewportRowsArgs<R, SR> {
   clientHeight: number;
   scrollTop: number;
   groupBy?: readonly string[];
+  rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<R[]>;
   expandedGroupIds?: Set<unknown>;
 }
 
@@ -19,46 +19,52 @@ export function useViewportRows<R, SR>({
   clientHeight,
   scrollTop,
   groupBy,
+  rowGrouper,
   expandedGroupIds
 }: ViewportRowsArgs<R, SR>) {
   const groupedRows = useMemo(() => {
-    if (!groupBy || groupBy.length === 0) return;
+    if (!groupBy || groupBy.length === 0 || !rowGrouper) return;
 
-    function groupParent(rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[]) {
-      const parentGroup = lodashGroupBy(rows, groupByKey);
+    const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[]) => {
+      const parentGroup = rowGrouper(rows, groupByKey);
       if (remainingGroupByKeys.length === 0) return parentGroup;
-      const childGroups: Dictionary<GroupByDictionary<R>> = {};
+      const childGroups: GroupByDictionary<R> = {};
       for (const key in parentGroup) {
-        childGroups[key] = groupParent(parentGroup[key], remainingGroupByKeys);
+        const childRows = parentGroup[key];
+        childGroups[key] = {
+          rows: childRows,
+          groups: groupRows(childRows, remainingGroupByKeys)
+        };
       }
 
       return childGroups;
-    }
+    };
 
-    return groupParent(rawRows, groupBy);
-  }, [groupBy, rawRows]);
+    return groupRows(rawRows, groupBy);
+  }, [groupBy, rowGrouper, rawRows]);
 
-  const [rows, totalRowCount] = useMemo(() => {
+  const [rows, totalRowCount] = useMemo(() => { // TODO: fix totalRowCount
     if (!groupedRows) return [rawRows, rawRows.length];
 
-    function expandGroup(rows: GroupByDictionary<R>, parentKey: string, level: number): Array<GroupRow | R> {
-      const flattenedRows: Array<R | GroupRow> = [];
+    function expandGroup(rows: GroupByDictionary<R>, parentKey: string, level: number): Array<GroupRow<R> | R> {
+      const flattenedRows: Array<R | GroupRow<R>> = [];
       for (const key in rows) {
         const id = `${parentKey}__${key}`;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
+        const group = rows[key];
         flattenedRows.push({
           id,
           key,
           level,
           isExpanded,
+          childRows: Array.isArray(group) ? group : group.rows,
           __isGroup: true
         });
         if (isExpanded) {
-          const groupedRow = rows[key];
-          if (Array.isArray(groupedRow)) {
-            flattenedRows.push(...groupedRow);
+          if (Array.isArray(group)) {
+            flattenedRows.push(...group);
           } else {
-            flattenedRows.push(...expandGroup(groupedRow, key, level + 1));
+            flattenedRows.push(...expandGroup(group.groups, key, level + 1));
           }
         }
       }
diff --git a/src/types.ts b/src/types.ts
index ec33dedcb5..b84efd6d33 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -26,6 +26,8 @@ export interface Column<TRow, TSummaryRow = unknown> {
   };
   /** Formatter to be used to render the summary cell content */
   summaryFormatter?: React.ComponentType<SummaryFormatterProps<TSummaryRow, TRow>>;
+  /** Formatter to be used to render the group cell content */
+  groupFormatter?: React.ComponentType<GroupFormatterProps<TRow, TSummaryRow>>;
   /** Enables cell editing. If set and no editor property specified, then a textinput will be used as the cell editor */
   editable?: boolean | ((row: TRow) => boolean);
   /** Determines whether column is frozen or not */
@@ -85,6 +87,14 @@ export interface SummaryFormatterProps<TSummaryRow, TRow = any> {
   row: TSummaryRow;
 }
 
+export interface GroupFormatterProps<TRow, TSummaryRow = unknown> {
+  column: CalculatedColumn<TRow, TSummaryRow>;
+  row: GroupRow<TRow>;
+  isCellSelected: boolean;
+  isRowSelected: boolean;
+  toggleGroup: () => void;
+}
+
 export interface EditorProps<TValue, TRow = any, TSummaryRow = any> {
   ref: React.Ref<Editor<{ [key: string]: TValue }>>;
   column: CalculatedColumn<TRow, TSummaryRow>;
@@ -161,11 +171,13 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown> extends Omit<Reac
 
 export interface GroupRowRendererProps<TRow, TSummaryRow = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
   viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
-  row: GroupRow;
+  row: GroupRow<TRow>;
   rowIdx: number;
+  lastFrozenColumnIndex: number;
+  groupBy: readonly string[];
   top: number;
-  width: number;
-  isSelected: boolean;
+  isCellSelected: boolean;
+  isRowSelected: boolean;
   eventBus: EventBus;
 }
 
@@ -207,12 +219,16 @@ export interface Dictionary<T> {
   [index: string]: T;
 }
 
-export type GroupByDictionary<TRow> = Dictionary<TRow[]> | Dictionary<GroupByDictionary<TRow>>;
+export type GroupByDictionary<TRow> = Dictionary<TRow[]> | Dictionary<{
+  rows: TRow[];
+  groups: GroupByDictionary<TRow>;
+}>;
 
-export interface GroupRow {
+export interface GroupRow<TRow> {
+  __isGroup: true;
+  childRows: TRow[];
   id: string;
   key: unknown;
   level: number;
   isExpanded: boolean;
-  __isGroup: boolean;
 }
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 2174540bf8..77631834c3 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -6,8 +6,8 @@ export * from './viewportUtils';
 export * from './keyboardUtils';
 export * from './selectedCellUtils';
 
-export function isGroupedRow<R>(row: R | GroupRow): row is GroupRow {
-  return (row as GroupRow).__isGroup !== undefined;
+export function isGroupedRow<R>(row: R | GroupRow<R>): row is GroupRow<R> {
+  return (row as GroupRow<R>).__isGroup !== undefined;
 }
 
 export function assertIsValidKey<R>(key: unknown): asserts key is keyof R {
diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index 7d274a0bb7..fe5e7f82e8 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import faker from 'faker';
 import { AutoSizer } from 'react-virtualized';
+import { groupBy as rowGrouper } from 'lodash';
 import DataGrid, { SelectColumn, Column, RowsUpdateEvent, SortDirection } from '../../src';
 
 const dateFormatter = new Intl.DateTimeFormat(navigator.language);
@@ -128,6 +129,10 @@ const columns: readonly Column<Row, SummaryRow>[] = [
     width: 100,
     formatter(props) {
       return <CurrencyFormatter value={props.row.budget} />;
+    },
+    groupFormatter({ row }) {
+      const totals = row.childRows.reduce((prev, { budget }) => prev + budget, 0);
+      return <CurrencyFormatter value={totals} />;
     }
   },
   {
@@ -186,12 +191,11 @@ function createRows(): readonly Row[] {
   return rows;
 }
 
-const groupBy = ['country', 'transaction'];
-
 export default function CommonFeatures() {
   const [rows, setRows] = useState(createRows);
   const [[sortColumn, sortDirection], setSort] = useState<[string, SortDirection]>(['id', 'NONE']);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
+  const [groupBy] = useState(['country', 'transaction']);
 
   const summaryRows = useMemo(() => {
     const summaryRow: SummaryRow = { id: 'total_0', totalCount: rows.length, yesCount: rows.filter(r => r.available).length };
@@ -266,6 +270,7 @@ export default function CommonFeatures() {
           onSort={handleSort}
           summaryRows={summaryRows}
           groupBy={groupBy}
+          rowGrouper={rowGrouper}
         />
       )}
     </AutoSizer>
diff --git a/style/row.less b/style/row.less
index 578ba1762e..65c0f15fd7 100644
--- a/style/row.less
+++ b/style/row.less
@@ -32,3 +32,37 @@
     border-top: 2px solid darken(@borderColor, 20%);
   }
 }
+
+.rdg-group-row {
+  > .rdg-cell {
+    border-right-width: 0;
+  }
+
+  > .rdg-cell:last-child,
+  > .rdg-cell-frozen-last {
+    border-right-width: 1px;
+  }
+}
+
+.rdg-group-row-selected {
+  .rdg-cell {
+    box-shadow:
+      inset 0 2px 0 0 @selectedBorderColor,
+      inset 0 -2px 0 0 @selectedBorderColor;
+  }
+
+  .rdg-cell:first-child {
+    box-shadow:
+      inset 0 2px 0 0 @selectedBorderColor,
+      inset 0 -2px 0 0 @selectedBorderColor,
+      inset 2px 0 0 0 @selectedBorderColor;
+  }
+
+  .rdg-cell:last-child {
+    box-shadow:
+      inset 0 2px 0 0 @selectedBorderColor,
+      inset 0 -2px 0 0 @selectedBorderColor,
+      inset -2px 0 0 0 @selectedBorderColor;
+  }
+}
+
diff --git a/style/variables.less b/style/variables.less
index 782b5711c6..2290b003f6 100644
--- a/style/variables.less
+++ b/style/variables.less
@@ -1,4 +1,5 @@
 @borderColor: #ddd;
+@selectedBorderColor: #66afe9;
 
 .user-select(@value: none) {
   -webkit-user-select: @value;

From 93f3a970f16970143e9bc141fe7015e502409e82 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Mon, 17 Aug 2020 13:10:07 -0500
Subject: [PATCH 08/79] Checkbox selection for group row

---
 src/Columns.tsx                  |  2 +-
 src/DataGrid.tsx                 | 37 +++++++++++++++++++-------------
 src/GroupRow.tsx                 |  4 ++++
 src/types.ts                     |  1 +
 stories/demos/CommonFeatures.tsx |  2 +-
 5 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/Columns.tsx b/src/Columns.tsx
index 1178aa15df..9b974de505 100644
--- a/src/Columns.tsx
+++ b/src/Columns.tsx
@@ -40,7 +40,7 @@ export const SelectColumn: Column<any, any> = {
         tabIndex={-1}
         isCellSelected={props.isCellSelected}
         value={props.isRowSelected}
-        onChange={() => {}}
+        onChange={props.onRowSelectionChange}
       />
     );
   },
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 9c3ec4b0b6..e8d1bc112f 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -315,25 +315,32 @@ function DataGrid<R, K extends keyof R, SR>({
       assertIsValidKey(rowKey);
       const newSelectedRows = new Set(selectedRows);
       const row = rows[rowIdx];
-      if (isGroupedRow(row)) return; // TODO: add a checkbox to select the group
-      const rowId = row[rowKey];
-
-      if (checked) {
-        newSelectedRows.add(rowId);
-        const previousRowIdx = lastSelectedRowIdx.current;
-        lastSelectedRowIdx.current = rowIdx;
-        if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
-          const step = Math.sign(rowIdx - previousRowIdx);
-          for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
-            const row = rows[i];
-            if (!isGroupedRow(row)) {
+      if (isGroupedRow(row)) {
+        for (const childRow of row.childRows) {
+          if (checked) {
+            newSelectedRows.add(childRow[rowKey]);
+          } else {
+            newSelectedRows.delete(childRow[rowKey]);
+          }
+        }
+      } else {
+        const rowId = row[rowKey];
+        if (checked) {
+          newSelectedRows.add(rowId);
+          const previousRowIdx = lastSelectedRowIdx.current;
+          lastSelectedRowIdx.current = rowIdx;
+          if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
+            const step = Math.sign(rowIdx - previousRowIdx);
+            for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
+              const row = rows[i];
+              if (isGroupedRow(row)) continue;
               newSelectedRows.add(row[rowKey]);
             }
           }
+        } else {
+          newSelectedRows.delete(rowId);
+          lastSelectedRowIdx.current = -1;
         }
-      } else {
-        newSelectedRows.delete(rowId);
-        lastSelectedRowIdx.current = -1;
       }
 
       onSelectedRowsChange(newSelectedRows);
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 7ac2ba5ea6..5a7e9dac53 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -27,6 +27,9 @@ function GroupedRow<R, SR>({
     eventBus.dispatch('TOGGLE_GROUP', row.id);
   }
 
+  function onRowSelectionChange(checked: boolean) {
+    eventBus.dispatch('SELECT_ROW', { rowIdx, checked, isShiftClick: false });
+  }
 
   return (
     <div
@@ -62,6 +65,7 @@ function GroupedRow<R, SR>({
               column={column}
               isCellSelected={isCellSelected}
               isRowSelected={isRowSelected}
+              onRowSelectionChange={onRowSelectionChange}
               toggleGroup={toggleGroup}
             />
           )}
diff --git a/src/types.ts b/src/types.ts
index 4bfda8b023..8cfedb9b70 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -102,6 +102,7 @@ export interface GroupFormatterProps<TRow, TSummaryRow = unknown> {
   row: GroupRow<TRow>;
   isCellSelected: boolean;
   isRowSelected: boolean;
+  onRowSelectionChange: (checked: boolean) => void;
   toggleGroup: () => void;
 }
 
diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index afe9261aec..a0f118bb8d 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -213,7 +213,7 @@ export default function CommonFeatures() {
   const [rows, setRows] = useState(createRows);
   const [[sortColumn, sortDirection], setSort] = useState<[string, SortDirection]>(['id', 'NONE']);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
-  const [groupBy] = useState(['transaction']);
+  const [groupBy] = useState(['country', 'transaction']);
 
   const countries = useMemo(() => {
     return [...new Set(rows.map(r => r.country))].sort();

From 1d609252b5c63f47f89460809af2156e13bbb70c Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Mon, 17 Aug 2020 14:40:37 -0500
Subject: [PATCH 09/79] Validate groupBy columns

---
 src/DataGrid.tsx                | 10 +++++-----
 src/hooks/useViewportColumns.ts | 22 ++++++++++++++--------
 src/hooks/useViewportRows.ts    | 15 +++++++++------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index e8d1bc112f..d4012664e8 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -202,7 +202,7 @@ function DataGrid<R, K extends keyof R, SR>({
   filters,
   onFiltersChange,
   defaultColumnOptions,
-  groupBy,
+  groupBy: rawGroupBy,
   rowGrouper,
   // Custom renderers
   rowRenderer: RowRenderer = Row,
@@ -263,13 +263,13 @@ function DataGrid<R, K extends keyof R, SR>({
   const summaryRowsCount = summaryRows?.length ?? 0;
   const isSelectable = selectedRows !== undefined && onSelectedRowsChange !== undefined;
 
-  const { columns, viewportColumns, totalColumnWidth, lastFrozenColumnIndex } = useViewportColumns({
+  const { columns, viewportColumns, totalColumnWidth, lastFrozenColumnIndex, groupBy } = useViewportColumns({
     columns: rawColumns,
     columnWidths,
     scrollLeft,
     viewportWidth,
     defaultColumnOptions,
-    groupBy,
+    groupBy: rawGroupBy,
     rowGrouper
   });
 
@@ -435,7 +435,7 @@ function DataGrid<R, K extends keyof R, SR>({
   }, [columnWidths, onColumnResize]);
 
   function getRawRowIdx(rowIdx: number) {
-    return groupBy ? rawRows.indexOf(rows[rowIdx] as R) : rowIdx;
+    return groupBy.length > 0 && rowGrouper ? rawRows.indexOf(rows[rowIdx] as R) : rowIdx;
   }
 
   function handleCommit({ cellKey, rowIdx, updated }: CommitEvent) {
@@ -790,7 +790,7 @@ function DataGrid<R, K extends keyof R, SR>({
             row={row}
             rowIdx={rowIdx}
             lastFrozenColumnIndex={lastFrozenColumnIndex}
-            groupBy={groupBy!}
+            groupBy={groupBy}
             top={top}
             isCellSelected={isSelected}
             isRowSelected={row.childRows.every(cr => selectedRows?.has(cr[rowKey!]))}
diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
index 76cb1615fd..a16464c36f 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.ts
@@ -25,13 +25,19 @@ export function useViewportColumns<R, K extends keyof R, SR>({
   viewportWidth,
   scrollLeft,
   defaultColumnOptions,
-  groupBy,
+  groupBy: rawGroupBy,
   rowGrouper
 }: ViewportColumnsArgs<R, K, SR>) {
-  rawColumns = useMemo(() => {
-    if (!groupBy || groupBy.length === 0 || !rowGrouper) return rawColumns;
+  const [sortedColumns, groupBy] = useMemo(() => {
+    if (!rawGroupBy || !rowGrouper) return [rawColumns, []];
+
+    // Find valid groupBy columns
+    const groupBy: readonly string[] = rawGroupBy.filter(g => rawColumns.find(c => c.key === g) !== undefined);
+    if (groupBy.length === 0) return [rawColumns, groupBy];
 
     const selectColumn = rawColumns.find(c => c.key === SELECT_COLUMN_KEY);
+
+    // Move group columns after the select column
     const groupByColumns = rawColumns
       .filter(c => groupBy.includes(c.key))
       .map(c => ({
@@ -51,8 +57,8 @@ export function useViewportColumns<R, K extends keyof R, SR>({
       sortedColumns.unshift(selectColumn);
     }
 
-    return sortedColumns;
-  }, [groupBy, rowGrouper, rawColumns]);
+    return [sortedColumns, groupBy];
+  }, [rawColumns, rawGroupBy, rowGrouper]);
 
   const minColumnWidth = defaultColumnOptions?.minWidth ?? 80;
   const defaultFormatter = defaultColumnOptions?.formatter ?? ValueFormatter;
@@ -61,7 +67,7 @@ export function useViewportColumns<R, K extends keyof R, SR>({
 
   const { columns, lastFrozenColumnIndex, totalColumnWidth } = useMemo(() => {
     return getColumnMetrics<R, SR>({
-      columns: rawColumns,
+      columns: sortedColumns,
       minColumnWidth,
       viewportWidth,
       columnWidths,
@@ -69,7 +75,7 @@ export function useViewportColumns<R, K extends keyof R, SR>({
       defaultResizable,
       defaultFormatter
     });
-  }, [columnWidths, defaultFormatter, defaultResizable, defaultSortable, minColumnWidth, rawColumns, viewportWidth]);
+  }, [columnWidths, defaultFormatter, defaultResizable, defaultSortable, minColumnWidth, sortedColumns, viewportWidth]);
 
   const [colOverscanStartIdx, colOverscanEndIdx] = useMemo((): [number, number] => {
     return getHorizontalRangeToRender(
@@ -88,5 +94,5 @@ export function useViewportColumns<R, K extends keyof R, SR>({
     );
   }, [colOverscanEndIdx, colOverscanStartIdx, columns]);
 
-  return { columns, viewportColumns, totalColumnWidth, lastFrozenColumnIndex };
+  return { columns, viewportColumns, totalColumnWidth, lastFrozenColumnIndex, groupBy };
 }
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index e4f4d27fbc..d98f904230 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -8,7 +8,7 @@ interface ViewportRowsArgs<R, SR> {
   rowHeight: number;
   clientHeight: number;
   scrollTop: number;
-  groupBy?: readonly string[];
+  groupBy: readonly string[];
   rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<R[]>;
   expandedGroupIds?: Set<unknown>;
 }
@@ -23,11 +23,13 @@ export function useViewportRows<R, SR>({
   expandedGroupIds
 }: ViewportRowsArgs<R, SR>) {
   const groupedRows = useMemo(() => {
-    if (!groupBy || groupBy.length === 0 || !rowGrouper) return;
+    if (groupBy.length === 0 || !rowGrouper) return;
 
     const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[]) => {
       const parentGroup = rowGrouper(rows, groupByKey);
       if (remainingGroupByKeys.length === 0) return parentGroup;
+
+      // Recursively group each parent group
       const childGroups: GroupByDictionary<R> = {};
       for (const key in parentGroup) {
         const childRows = parentGroup[key];
@@ -46,10 +48,10 @@ export function useViewportRows<R, SR>({
   const [rows, totalRowCount] = useMemo(() => { // TODO: fix totalRowCount
     if (!groupedRows) return [rawRows, rawRows.length];
 
-    function expandGroup(rows: GroupByDictionary<R>, parentKey: string, level: number): Array<GroupRow<R> | R> {
+    const expandGroup = (rows: GroupByDictionary<R>, parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
       const flattenedRows: Array<R | GroupRow<R>> = [];
       for (const key in rows) {
-        const id = `${parentKey}__${key}`;
+        const id = parentKey !== undefined ? `${parentKey}__${key}` : key;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
         const group = rows[key];
         flattenedRows.push({
@@ -70,8 +72,9 @@ export function useViewportRows<R, SR>({
       }
 
       return flattenedRows;
-    }
-    return [expandGroup(groupedRows, '', 0), 0];
+    };
+
+    return [expandGroup(groupedRows, undefined, 0), 0];
   }, [expandedGroupIds, groupedRows, rawRows]);
 
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(

From cd46e7421f778974bb247cdad50067f85d6aa263 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Mon, 17 Aug 2020 15:39:04 -0500
Subject: [PATCH 10/79] Ckeck isSelectable

---
 src/DataGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index d4012664e8..9ca4f883f7 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -793,7 +793,7 @@ function DataGrid<R, K extends keyof R, SR>({
             groupBy={groupBy}
             top={top}
             isCellSelected={isSelected}
-            isRowSelected={row.childRows.every(cr => selectedRows?.has(cr[rowKey!]))}
+            isRowSelected={isSelectable && row.childRows.every(cr => selectedRows?.has(cr[rowKey!]))}
             eventBus={eventBus}
             onKeyDown={isSelected ? handleKeyDown : undefined}
           />

From f82ec68c2c46ee701be87b0fcd64aa7518b46c22 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Mon, 17 Aug 2020 16:25:36 -0500
Subject: [PATCH 11/79] ColSpan

---
 src/GroupRow.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 5a7e9dac53..eb56b62d34 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
-import { GroupRowRendererProps } from './types';
+import { GroupRowRendererProps, CalculatedColumn } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
 
 function GroupedRow<R, SR>({
@@ -17,10 +17,12 @@ function GroupedRow<R, SR>({
   onKeyDown,
   ...props
 }: GroupRowRendererProps<R, SR>) {
-  const level = viewportColumns[0].key === SELECT_COLUMN_KEY ? row.level + 1 : row.level;
+  const { level } = row;
+  // Select is always the first column
+  const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
 
   function selectGroup() {
-    eventBus.dispatch('SELECT_CELL', { rowIdx, idx: level });
+    eventBus.dispatch('SELECT_CELL', { rowIdx, idx });
   }
 
   function toggleGroup() {
@@ -31,6 +33,18 @@ function GroupedRow<R, SR>({
     eventBus.dispatch('SELECT_ROW', { rowIdx, checked, isShiftClick: false });
   }
 
+  // Expand groupBy column widths
+  const visibleColumns: CalculatedColumn<R, SR>[] = [...viewportColumns];
+  visibleColumns[idx] = { ...visibleColumns[idx] };
+  let colSpan = 0;
+  for (let i = idx + 1; i < visibleColumns.length; i++) {
+    const nextColumn = visibleColumns[i];
+    if (!nextColumn.frozen || (nextColumn.groupFormatter && !groupBy.includes(nextColumn.key))) break;
+    visibleColumns[idx].width += nextColumn.width;
+    colSpan++;
+  }
+  visibleColumns.splice(idx + 1, colSpan);
+
   return (
     <div
       role="row"
@@ -45,7 +59,7 @@ function GroupedRow<R, SR>({
       style={{ top }}
       {...props}
     >
-      {viewportColumns.map(column => (
+      {visibleColumns.map(column => (
         <div
           role="gridcell"
           aria-colindex={column.idx + 1}
@@ -59,7 +73,7 @@ function GroupedRow<R, SR>({
             left: column.left
           }}
         >
-          {column.groupFormatter && (groupBy.includes(column.key) ? level === column.idx : true) && (
+          {column.groupFormatter && (groupBy.includes(column.key) ? idx === column.idx : true) && (
             <column.groupFormatter
               row={row}
               column={column}

From e3ff003fc5056315c9245f02fd10513ec6980bf9 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 18 Aug 2020 08:12:02 -0500
Subject: [PATCH 12/79] Disable copy/paste and cell drag down on treegrid

---
 src/DataGrid.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 9ca4f883f7..48fae6c16a 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -290,6 +290,14 @@ function DataGrid<R, K extends keyof R, SR>({
     expandedGroupIds
   });
 
+  const hasGroups = groupBy.length > 0 && rowGrouper;
+
+  if (hasGroups) {
+    // TODO: finalize if these flags need to be supported on treegrid
+    enableCellDragAndDrop = false;
+    enableCellDragAndDrop = false;
+  }
+
   /**
    * effects
    */
@@ -435,7 +443,7 @@ function DataGrid<R, K extends keyof R, SR>({
   }, [columnWidths, onColumnResize]);
 
   function getRawRowIdx(rowIdx: number) {
-    return groupBy.length > 0 && rowGrouper ? rawRows.indexOf(rows[rowIdx] as R) : rowIdx;
+    return hasGroups ? rawRows.indexOf(rows[rowIdx] as R) : rowIdx;
   }
 
   function handleCommit({ cellKey, rowIdx, updated }: CommitEvent) {
@@ -579,7 +587,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
     const column = columns[selectedPosition.idx];
     const cellKey = column.key;
-    const value = rawRows[selectedPosition.rowIdx][cellKey as keyof R]; // TODO: handle grouping
+    const value = rawRows[selectedPosition.rowIdx][cellKey as keyof R];
 
     onRowsUpdate?.({
       cellKey,

From 8f06cb8b13b04c99ad1565a61e7752420bd75303 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 18 Aug 2020 10:09:07 -0500
Subject: [PATCH 13/79] Add treegrid aria attributes

---
 src/DataGrid.tsx             |  4 ++--
 src/GroupRow.tsx             |  6 +++++-
 src/hooks/useViewportRows.ts | 10 ++++++----
 src/types.ts                 |  4 +++-
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 48fae6c16a..3d4ae5ecd9 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -855,13 +855,13 @@ function DataGrid<R, K extends keyof R, SR>({
 
   return (
     <div
-      role="grid"
+      role={hasGroups ? 'treegrid' : 'grid'}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
       aria-describedby={ariaDescribedBy}
       aria-multiselectable={isSelectable ? true : undefined}
       aria-colcount={columns.length}
-      aria-rowcount={headerRowsCount + rows.length + summaryRowsCount}
+      aria-rowcount={headerRowsCount + rows.length + summaryRowsCount} // TODO: fix rowcount
       className={clsx('rdg', { 'rdg-viewport-dragging': isDragging })}
       style={{
         width,
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index eb56b62d34..d08483d560 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -19,7 +19,7 @@ function GroupedRow<R, SR>({
 }: GroupRowRendererProps<R, SR>) {
   const { level } = row;
   // Select is always the first column
-  const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
+  const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level : level - 1; // aria-level is 1-based
 
   function selectGroup() {
     eventBus.dispatch('SELECT_CELL', { rowIdx, idx });
@@ -48,6 +48,10 @@ function GroupedRow<R, SR>({
   return (
     <div
       role="row"
+      aria-level={level}
+      aria-setSize={row.setSize}
+      aria-posinset={row.posInSet}
+      aria-expanded={row.isExpanded}
       aria-rowindex={ariaRowIndex}
       className={clsx('rdg-row rdg-group-row', {
         'rdg-row-even': rowIdx % 2 === 0,
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index d98f904230..ac599bac7e 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -50,16 +50,18 @@ export function useViewportRows<R, SR>({
 
     const expandGroup = (rows: GroupByDictionary<R>, parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
       const flattenedRows: Array<R | GroupRow<R>> = [];
-      for (const key in rows) {
+      Object.keys(rows).forEach((key, index, keys) => {
         const id = parentKey !== undefined ? `${parentKey}__${key}` : key;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
         const group = rows[key];
         flattenedRows.push({
           id,
           key,
-          level,
           isExpanded,
           childRows: Array.isArray(group) ? group : group.rows,
+          level,
+          setSize: keys.length,
+          posInSet: index + 1, // aria-posinset is 1-based
           __isGroup: true
         });
         if (isExpanded) {
@@ -69,12 +71,12 @@ export function useViewportRows<R, SR>({
             flattenedRows.push(...expandGroup(group.groups, key, level + 1));
           }
         }
-      }
+      });
 
       return flattenedRows;
     };
 
-    return [expandGroup(groupedRows, undefined, 0), 0];
+    return [expandGroup(groupedRows, undefined, 1), 0]; // aria-level is 1-based
   }, [expandedGroupIds, groupedRows, rawRows]);
 
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
diff --git a/src/types.ts b/src/types.ts
index 8cfedb9b70..5e8e9ef4fa 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -255,6 +255,8 @@ export interface GroupRow<TRow> {
   childRows: TRow[];
   id: string;
   key: unknown;
-  level: number;
   isExpanded: boolean;
+  level: number;
+  setSize: number;
+  posInSet: number;
 }

From 25e2269f9d88dd3d73119c3471e10685bfafc913 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 18 Aug 2020 10:41:03 -0500
Subject: [PATCH 14/79] Fix rowsCount

---
 src/DataGrid.tsx             |  6 +++---
 src/GroupRow.tsx             |  2 +-
 src/hooks/useViewportRows.ts | 17 ++++++++++-------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 3d4ae5ecd9..46b976bc93 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -280,7 +280,7 @@ function DataGrid<R, K extends keyof R, SR>({
     - summaryRowsCount * rowHeight
     - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
 
-  const { viewportRows, rows, startRowIdx, totalRowCount } = useViewportRows({
+  const { viewportRows, rows, startRowIdx, rowsCount } = useViewportRows({
     rawRows,
     groupBy,
     rowGrouper,
@@ -861,7 +861,7 @@ function DataGrid<R, K extends keyof R, SR>({
       aria-describedby={ariaDescribedBy}
       aria-multiselectable={isSelectable ? true : undefined}
       aria-colcount={columns.length}
-      aria-rowcount={headerRowsCount + rows.length + summaryRowsCount} // TODO: fix rowcount
+      aria-rowcount={headerRowsCount + rowsCount + summaryRowsCount}
       className={clsx('rdg', { 'rdg-viewport-dragging': isDragging })}
       style={{
         width,
@@ -906,7 +906,7 @@ function DataGrid<R, K extends keyof R, SR>({
           {getViewportRows()}
           {summaryRows?.map((row, rowIdx) => (
             <SummaryRow<R, SR>
-              aria-rowindex={headerRowsCount + totalRowCount + rowIdx + 1}
+              aria-rowindex={headerRowsCount + rowsCount + rowIdx + 1}
               key={rowIdx}
               rowIdx={rowIdx}
               row={row}
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index d08483d560..e495244c76 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -49,7 +49,7 @@ function GroupedRow<R, SR>({
     <div
       role="row"
       aria-level={level}
-      aria-setSize={row.setSize}
+      aria-setsize={row.setSize}
       aria-posinset={row.posInSet}
       aria-expanded={row.isExpanded}
       aria-rowindex={ariaRowIndex}
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index ac599bac7e..8798ad95d8 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -22,17 +22,20 @@ export function useViewportRows<R, SR>({
   rowGrouper,
   expandedGroupIds
 }: ViewportRowsArgs<R, SR>) {
-  const groupedRows = useMemo(() => {
-    if (groupBy.length === 0 || !rowGrouper) return;
+  const [groupedRows, rowsCount] = useMemo(() => {
+    if (groupBy.length === 0 || !rowGrouper) return [undefined, rawRows.length];
 
+    let rowsCount = 0;
     const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[]) => {
       const parentGroup = rowGrouper(rows, groupByKey);
+      rowsCount += Object.keys(parentGroup).length;
       if (remainingGroupByKeys.length === 0) return parentGroup;
 
       // Recursively group each parent group
       const childGroups: GroupByDictionary<R> = {};
       for (const key in parentGroup) {
         const childRows = parentGroup[key];
+        rowsCount += childRows.length;
         childGroups[key] = {
           rows: childRows,
           groups: groupRows(childRows, remainingGroupByKeys)
@@ -42,11 +45,11 @@ export function useViewportRows<R, SR>({
       return childGroups;
     };
 
-    return groupRows(rawRows, groupBy);
+    return [groupRows(rawRows, groupBy), rowsCount];
   }, [groupBy, rowGrouper, rawRows]);
 
-  const [rows, totalRowCount] = useMemo(() => { // TODO: fix totalRowCount
-    if (!groupedRows) return [rawRows, rawRows.length];
+  const rows = useMemo(() => {
+    if (!groupedRows) return rawRows;
 
     const expandGroup = (rows: GroupByDictionary<R>, parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
       const flattenedRows: Array<R | GroupRow<R>> = [];
@@ -76,7 +79,7 @@ export function useViewportRows<R, SR>({
       return flattenedRows;
     };
 
-    return [expandGroup(groupedRows, undefined, 1), 0]; // aria-level is 1-based
+    return expandGroup(groupedRows, undefined, 1); // aria-level is 1-based
   }, [expandedGroupIds, groupedRows, rawRows]);
 
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
@@ -92,6 +95,6 @@ export function useViewportRows<R, SR>({
     viewportRows,
     rows,
     startRowIdx: rowOverscanStartIdx,
-    totalRowCount
+    rowsCount
   };
 }

From 2d856dc460240e4d996e530c654c488042a56d1a Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 18 Aug 2020 16:07:19 -0500
Subject: [PATCH 15/79] Fix rowsCount

---
 src/DataGrid.tsx                        |  2 +-
 src/formatters/ToggleGroupFormatter.tsx |  4 +--
 src/hooks/useViewportRows.ts            | 40 ++++++++++---------------
 src/types.ts                            |  6 ++--
 4 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 46b976bc93..6d2b259333 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -820,7 +820,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
       return (
         <RowRenderer
-          aria-rowindex={headerRowsCount + rowIdx + 1}
+          aria-rowindex={headerRowsCount + rowIdx + 1} // TODO: fix index
           aria-selected={isSelectable ? isRowSelected : undefined}
           key={key}
           rowIdx={rowIdx}
diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index 0d15437984..812a252ca3 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -14,10 +14,10 @@ export function ToggleGroupedFormatter<R, SR>({
 
   function handleKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
     const { key } = event;
-    if (['ArrowLeft', 'ArrowRight', 'Enter', ' '].includes(key)) {
+    if (['ArrowLeft', 'ArrowRight', 'Enter'].includes(key)) {
       event.preventDefault();
       event.stopPropagation();
-      if (key === ' ' || key === 'Enter') {
+      if (key === 'Enter') {
         toggleGroup();
       }
     }
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 8798ad95d8..42774b1996 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -25,54 +25,44 @@ export function useViewportRows<R, SR>({
   const [groupedRows, rowsCount] = useMemo(() => {
     if (groupBy.length === 0 || !rowGrouper) return [undefined, rawRows.length];
 
-    let rowsCount = 0;
-    const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[]) => {
-      const parentGroup = rowGrouper(rows, groupByKey);
-      rowsCount += Object.keys(parentGroup).length;
-      if (remainingGroupByKeys.length === 0) return parentGroup;
-
-      // Recursively group each parent group
-      const childGroups: GroupByDictionary<R> = {};
-      for (const key in parentGroup) {
-        const childRows = parentGroup[key];
-        rowsCount += childRows.length;
-        childGroups[key] = {
-          rows: childRows,
-          groups: groupRows(childRows, remainingGroupByKeys)
-        };
+    const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[]): [GroupByDictionary<R>, number] => {
+      let rowsCount = 0;
+      const groups: GroupByDictionary<R> = {};
+      for (const [key, childRows] of Object.entries(rowGrouper(rows, groupByKey))) {
+        // Recursively group each parent group
+        const [childGroups, childRowsCount] = remainingGroupByKeys.length === 0 ? [childRows, childRows.length] : groupRows(childRows, remainingGroupByKeys);
+        rowsCount += childRowsCount + 1; // 1 for parent row
+        groups[key] = { childRows, childGroups };
       }
 
-      return childGroups;
+      return [groups, rowsCount];
     };
 
-    return [groupRows(rawRows, groupBy), rowsCount];
+    return groupRows(rawRows, groupBy);
   }, [groupBy, rowGrouper, rawRows]);
 
   const rows = useMemo(() => {
     if (!groupedRows) return rawRows;
 
-    const expandGroup = (rows: GroupByDictionary<R>, parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
+    const expandGroup = (rows: GroupByDictionary<R> | R[], parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
+      if (Array.isArray(rows)) return rows;
       const flattenedRows: Array<R | GroupRow<R>> = [];
       Object.keys(rows).forEach((key, index, keys) => {
         const id = parentKey !== undefined ? `${parentKey}__${key}` : key;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
-        const group = rows[key];
+        const { childRows, childGroups } = rows[key];
         flattenedRows.push({
           id,
           key,
           isExpanded,
-          childRows: Array.isArray(group) ? group : group.rows,
+          childRows,
           level,
           setSize: keys.length,
           posInSet: index + 1, // aria-posinset is 1-based
           __isGroup: true
         });
         if (isExpanded) {
-          if (Array.isArray(group)) {
-            flattenedRows.push(...group);
-          } else {
-            flattenedRows.push(...expandGroup(group.groups, key, level + 1));
-          }
+          flattenedRows.push(...expandGroup(childGroups, key, level + 1));
         }
       });
 
diff --git a/src/types.ts b/src/types.ts
index 5e8e9ef4fa..0063fc2fb0 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -245,9 +245,9 @@ export interface Dictionary<T> {
   [index: string]: T;
 }
 
-export type GroupByDictionary<TRow> = Dictionary<TRow[]> | Dictionary<{
-  rows: TRow[];
-  groups: GroupByDictionary<TRow>;
+export type GroupByDictionary<TRow> = Dictionary<{
+  childRows: TRow[];
+  childGroups: TRow[] | GroupByDictionary<TRow>;
 }>;
 
 export interface GroupRow<TRow> {

From 4815742d56e8f88ee09ba70d9279af0fe63dd98e Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 19 Aug 2020 07:35:29 -0500
Subject: [PATCH 16/79] Fix aria-rowindex and aria-rowcount and update grouprow
 props

---
 src/DataGrid.tsx                        | 25 ++++++++++++++++++-------
 src/GroupRow.tsx                        | 25 ++++++++++++++++---------
 src/formatters/ToggleGroupFormatter.tsx |  5 +++--
 src/hooks/useViewportRows.ts            | 25 ++++++++++++++-----------
 src/types.ts                            | 14 +++++++++++---
 stories/demos/CommonFeatures.tsx        |  4 ++--
 6 files changed, 64 insertions(+), 34 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 6d2b259333..b7ee19d59e 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -483,7 +483,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function handleCopy() {
     const { idx, rowIdx } = selectedPosition;
-    const value = rawRows[rowIdx][columns[idx].key as keyof R]; // TODO: handle grouping
+    const value = rawRows[rowIdx][columns[idx].key as keyof R];
     setCopiedPosition({ idx, rowIdx, value });
   }
 
@@ -785,21 +785,31 @@ function DataGrid<R, K extends keyof R, SR>({
   }
 
   function getViewportRows() {
+    // TODO: cleanup rowIndex/rowIdx logic
+    let startRowIndex = 0;
     return viewportRows.map((row, index) => {
       const rowIdx = startRowIdx + index;
       const top = rowIdx * rowHeight + totalHeaderHeight;
       if (isGroupedRow(row)) {
         const isSelected = selectedPosition.rowIdx === rowIdx;
+        ({ startRowIndex } = row);
         return (
-          <GroupRowRenderer
-            aria-rowindex={headerRowsCount + rowIdx + 1} // TODO: fix index
-            key={row.id}
+          <GroupRowRenderer<R, SR>
+            aria-level={row.level + 1} // aria-level is 1-based
+            aria-setsize={row.setSize}
+            aria-posinset={row.posInSet + 1} // aria-posinset is 1-based
+            aria-rowindex={headerRowsCount + startRowIndex + 1} // aria-rowindex is 1 based
+            key={row.id} // TODO: id or index?
+            id={row.id}
+            groupKey={row.key}
             viewportColumns={viewportColumns}
-            row={row}
+            childRows={row.childRows}
             rowIdx={rowIdx}
             lastFrozenColumnIndex={lastFrozenColumnIndex}
             groupBy={groupBy}
             top={top}
+            level={row.level}
+            isExpanded={row.isExpanded}
             isCellSelected={isSelected}
             isRowSelected={isSelectable && row.childRows.every(cr => selectedRows?.has(cr[rowKey!]))}
             eventBus={eventBus}
@@ -807,8 +817,9 @@ function DataGrid<R, K extends keyof R, SR>({
           />
         );
       }
+      startRowIndex++;
 
-      let key: string | number = rowIdx;
+      let key: string | number = hasGroups ? startRowIndex : rowIdx;
       let isRowSelected = false;
       if (rowKey !== undefined) {
         const rowId = row[rowKey];
@@ -820,7 +831,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
       return (
         <RowRenderer
-          aria-rowindex={headerRowsCount + rowIdx + 1} // TODO: fix index
+          aria-rowindex={headerRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1}
           aria-selected={isSelectable ? isRowSelected : undefined}
           key={key}
           rowIdx={rowIdx}
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index e495244c76..656f9472dc 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -4,29 +4,34 @@ import { GroupRowRendererProps, CalculatedColumn } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
 
 function GroupedRow<R, SR>({
-  'aria-rowindex': ariaRowIndex,
+  id,
+  groupKey,
   viewportColumns,
-  row,
+  childRows,
   rowIdx,
   lastFrozenColumnIndex,
   top,
+  level,
+  isExpanded,
   isCellSelected,
   isRowSelected,
   groupBy,
   eventBus,
   onKeyDown,
+  'aria-setsize': ariaSetSize,
+  'aria-posinset': ariaPosInSet,
+  'aria-rowindex': ariaRowIndex,
   ...props
 }: GroupRowRendererProps<R, SR>) {
-  const { level } = row;
   // Select is always the first column
-  const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level : level - 1; // aria-level is 1-based
+  const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
 
   function selectGroup() {
     eventBus.dispatch('SELECT_CELL', { rowIdx, idx });
   }
 
   function toggleGroup() {
-    eventBus.dispatch('TOGGLE_GROUP', row.id);
+    eventBus.dispatch('TOGGLE_GROUP', id);
   }
 
   function onRowSelectionChange(checked: boolean) {
@@ -49,10 +54,10 @@ function GroupedRow<R, SR>({
     <div
       role="row"
       aria-level={level}
-      aria-setsize={row.setSize}
-      aria-posinset={row.posInSet}
-      aria-expanded={row.isExpanded}
+      aria-setsize={ariaSetSize}
+      aria-posinset={ariaPosInSet}
       aria-rowindex={ariaRowIndex}
+      aria-expanded={isExpanded}
       className={clsx('rdg-row rdg-group-row', {
         'rdg-row-even': rowIdx % 2 === 0,
         'rdg-row-odd': rowIdx % 2 !== 0,
@@ -79,8 +84,10 @@ function GroupedRow<R, SR>({
         >
           {column.groupFormatter && (groupBy.includes(column.key) ? idx === column.idx : true) && (
             <column.groupFormatter
-              row={row}
+              groupKey={groupKey}
+              childRows={childRows}
               column={column}
+              isExpanded={isExpanded}
               isCellSelected={isCellSelected}
               isRowSelected={isRowSelected}
               onRowSelectionChange={onRowSelectionChange}
diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index 812a252ca3..30c263a0c5 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -2,7 +2,8 @@ import React, { useRef, useLayoutEffect } from 'react';
 import { GroupFormatterProps } from '../types';
 
 export function ToggleGroupedFormatter<R, SR>({
-  row,
+  groupKey,
+  isExpanded,
   isCellSelected,
   toggleGroup
 }: GroupFormatterProps<R, SR>) {
@@ -31,7 +32,7 @@ export function ToggleGroupedFormatter<R, SR>({
       onClick={toggleGroup}
       onKeyDown={handleKeyDown}
     >
-      {row.key}{' '}{row.isExpanded ? '\u25BC' : '\u25B6'}
+      {groupKey}{' '}{isExpanded ? '\u25BC' : '\u25B6'}
     </span>
   );
 }
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 42774b1996..2c2c97f041 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -25,20 +25,22 @@ export function useViewportRows<R, SR>({
   const [groupedRows, rowsCount] = useMemo(() => {
     if (groupBy.length === 0 || !rowGrouper) return [undefined, rawRows.length];
 
-    const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[]): [GroupByDictionary<R>, number] => {
-      let rowsCount = 0;
+    const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[], startIndex: number): [GroupByDictionary<R>, number] => {
+      let groupRowsCount = 0;
       const groups: GroupByDictionary<R> = {};
       for (const [key, childRows] of Object.entries(rowGrouper(rows, groupByKey))) {
         // Recursively group each parent group
-        const [childGroups, childRowsCount] = remainingGroupByKeys.length === 0 ? [childRows, childRows.length] : groupRows(childRows, remainingGroupByKeys);
-        rowsCount += childRowsCount + 1; // 1 for parent row
-        groups[key] = { childRows, childGroups };
+        const [childGroups, childRowsCount] = remainingGroupByKeys.length === 0
+          ? [childRows, childRows.length]
+          : groupRows(childRows, remainingGroupByKeys, startIndex + groupRowsCount + 1); // 1 for parent row
+        groups[key] = { childRows, childGroups, startRowIndex: startIndex + groupRowsCount };
+        groupRowsCount += childRowsCount + 1; // 1 for parent row
       }
 
-      return [groups, rowsCount];
+      return [groups, groupRowsCount];
     };
 
-    return groupRows(rawRows, groupBy);
+    return groupRows(rawRows, groupBy, 0);
   }, [groupBy, rowGrouper, rawRows]);
 
   const rows = useMemo(() => {
@@ -47,18 +49,19 @@ export function useViewportRows<R, SR>({
     const expandGroup = (rows: GroupByDictionary<R> | R[], parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
       if (Array.isArray(rows)) return rows;
       const flattenedRows: Array<R | GroupRow<R>> = [];
-      Object.keys(rows).forEach((key, index, keys) => {
+      Object.keys(rows).forEach((key, posInSet, keys) => {
         const id = parentKey !== undefined ? `${parentKey}__${key}` : key;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
-        const { childRows, childGroups } = rows[key];
+        const { childRows, childGroups, startRowIndex } = rows[key];
         flattenedRows.push({
           id,
           key,
           isExpanded,
           childRows,
           level,
+          posInSet,
+          startRowIndex,
           setSize: keys.length,
-          posInSet: index + 1, // aria-posinset is 1-based
           __isGroup: true
         });
         if (isExpanded) {
@@ -69,7 +72,7 @@ export function useViewportRows<R, SR>({
       return flattenedRows;
     };
 
-    return expandGroup(groupedRows, undefined, 1); // aria-level is 1-based
+    return expandGroup(groupedRows, undefined, 0);
   }, [expandedGroupIds, groupedRows, rawRows]);
 
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
diff --git a/src/types.ts b/src/types.ts
index 0063fc2fb0..311b500671 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -98,8 +98,10 @@ export interface SummaryFormatterProps<TSummaryRow, TRow = any> {
 }
 
 export interface GroupFormatterProps<TRow, TSummaryRow = unknown> {
+  groupKey: unknown;
   column: CalculatedColumn<TRow, TSummaryRow>;
-  row: GroupRow<TRow>;
+  childRows: TRow[];
+  isExpanded: boolean;
   isCellSelected: boolean;
   isRowSelected: boolean;
   onRowSelectionChange: (checked: boolean) => void;
@@ -196,12 +198,16 @@ export interface RowRendererProps<TRow, TSummaryRow = unknown> extends Omit<Reac
 }
 
 export interface GroupRowRendererProps<TRow, TSummaryRow = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'style' | 'children'> {
+  id: string;
+  groupKey: unknown;
   viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
-  row: GroupRow<TRow>;
+  childRows: TRow[];
   rowIdx: number;
   lastFrozenColumnIndex: number;
   groupBy: readonly string[];
   top: number;
+  level: number;
+  isExpanded: boolean;
   isCellSelected: boolean;
   isRowSelected: boolean;
   eventBus: EventBus;
@@ -248,6 +254,7 @@ export interface Dictionary<T> {
 export type GroupByDictionary<TRow> = Dictionary<{
   childRows: TRow[];
   childGroups: TRow[] | GroupByDictionary<TRow>;
+  startRowIndex: number;
 }>;
 
 export interface GroupRow<TRow> {
@@ -257,6 +264,7 @@ export interface GroupRow<TRow> {
   key: unknown;
   isExpanded: boolean;
   level: number;
-  setSize: number;
   posInSet: number;
+  setSize: number;
+  startRowIndex: number;
 }
diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index a0f118bb8d..7988d3cff8 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -147,8 +147,8 @@ function getColumns(countries: string[]): readonly Column<Row, SummaryRow>[] {
       formatter(props) {
         return <CurrencyFormatter value={props.row.budget} />;
       },
-      groupFormatter({ row }) {
-        const totals = row.childRows.reduce((prev, { budget }) => prev + budget, 0);
+      groupFormatter({ childRows }) {
+        const totals = childRows.reduce((prev, { budget }) => prev + budget, 0);
         return <CurrencyFormatter value={totals} />;
       }
     },

From 3efd6c830e9231c22f029ae5bc19d1cdeadf09c6 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 19 Aug 2020 11:01:50 -0500
Subject: [PATCH 17/79] Change expandedGroupIds/onExpandedGroupIdsChange to
 props

---
 src/DataGrid.tsx                 | 17 +++++++++--------
 src/hooks/useViewportRows.ts     |  6 +++---
 stories/demos/CommonFeatures.tsx |  3 +++
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index b7ee19d59e..1ca6e1da00 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -134,6 +134,8 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   defaultColumnOptions?: DefaultColumnOptions<R, SR>;
   groupBy?: readonly string[];
   rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<R[]>;
+  expandedGroupIds?: Set<unknown>;
+  onExpandedGroupIdsChange?: (expandedGroupIds: Set<unknown>) => void;
 
   /**
    * Custom renderers
@@ -204,6 +206,8 @@ function DataGrid<R, K extends keyof R, SR>({
   defaultColumnOptions,
   groupBy: rawGroupBy,
   rowGrouper,
+  expandedGroupIds,
+  onExpandedGroupIdsChange,
   // Custom renderers
   rowRenderer: RowRenderer = Row,
   emptyRowsRenderer,
@@ -238,9 +242,6 @@ function DataGrid<R, K extends keyof R, SR>({
   const [isDragging, setDragging] = useState(false);
   const [draggedOverRowIdx, setOverRowIdx] = useState<number | undefined>(undefined);
 
-  // TODO: change it to props
-  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set());
-
   const setDraggedOverRowIdx = useCallback((rowIdx?: number) => {
     setOverRowIdx(rowIdx);
     latestDraggedOverRowIdx.current = rowIdx;
@@ -363,17 +364,18 @@ function DataGrid<R, K extends keyof R, SR>({
 
   useEffect(() => {
     function toggleGroup(expandedGroupId: unknown) {
+      if (!onExpandedGroupIdsChange) return;
       const newExpandedGroupIds = new Set(expandedGroupIds);
-      if (expandedGroupIds.has(expandedGroupId)) {
+      if (newExpandedGroupIds.has(expandedGroupId)) {
         newExpandedGroupIds.delete(expandedGroupId);
       } else {
         newExpandedGroupIds.add(expandedGroupId);
       }
-      setExpandedGroupIds(newExpandedGroupIds);
+      onExpandedGroupIdsChange(newExpandedGroupIds);
     }
 
     return eventBus.subscribe('TOGGLE_GROUP', toggleGroup);
-  }, [eventBus, expandedGroupIds]);
+  }, [eventBus, expandedGroupIds, onExpandedGroupIdsChange]);
 
   useImperativeHandle(ref, () => ({
     scrollToColumn(idx: number) {
@@ -785,7 +787,6 @@ function DataGrid<R, K extends keyof R, SR>({
   }
 
   function getViewportRows() {
-    // TODO: cleanup rowIndex/rowIdx logic
     let startRowIndex = 0;
     return viewportRows.map((row, index) => {
       const rowIdx = startRowIdx + index;
@@ -831,7 +832,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
       return (
         <RowRenderer
-          aria-rowindex={headerRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1}
+          aria-rowindex={headerRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1} // aria-rowindex is 1 based
           aria-selected={isSelectable ? isRowSelected : undefined}
           key={key}
           rowIdx={rowIdx}
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 2c2c97f041..78d7ea579a 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -25,15 +25,15 @@ export function useViewportRows<R, SR>({
   const [groupedRows, rowsCount] = useMemo(() => {
     if (groupBy.length === 0 || !rowGrouper) return [undefined, rawRows.length];
 
-    const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[], startIndex: number): [GroupByDictionary<R>, number] => {
+    const groupRows = (rows: readonly R[], [groupByKey, ...remainingGroupByKeys]: readonly string[], startRowIndex: number): [GroupByDictionary<R>, number] => {
       let groupRowsCount = 0;
       const groups: GroupByDictionary<R> = {};
       for (const [key, childRows] of Object.entries(rowGrouper(rows, groupByKey))) {
         // Recursively group each parent group
         const [childGroups, childRowsCount] = remainingGroupByKeys.length === 0
           ? [childRows, childRows.length]
-          : groupRows(childRows, remainingGroupByKeys, startIndex + groupRowsCount + 1); // 1 for parent row
-        groups[key] = { childRows, childGroups, startRowIndex: startIndex + groupRowsCount };
+          : groupRows(childRows, remainingGroupByKeys, startRowIndex + groupRowsCount + 1); // 1 for parent row
+        groups[key] = { childRows, childGroups, startRowIndex: startRowIndex + groupRowsCount };
         groupRowsCount += childRowsCount + 1; // 1 for parent row
       }
 
diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index 7988d3cff8..d55be0ecb7 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -213,6 +213,7 @@ export default function CommonFeatures() {
   const [rows, setRows] = useState(createRows);
   const [[sortColumn, sortDirection], setSort] = useState<[string, SortDirection]>(['id', 'NONE']);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
+  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set());
   const [groupBy] = useState(['country', 'transaction']);
 
   const countries = useMemo(() => {
@@ -296,6 +297,8 @@ export default function CommonFeatures() {
           summaryRows={summaryRows}
           groupBy={groupBy}
           rowGrouper={rowGrouper}
+          expandedGroupIds={expandedGroupIds}
+          onExpandedGroupIdsChange={setExpandedGroupIds}
         />
       )}
     </AutoSizer>

From 33c23ff04823737826794008dd97a7ff54d9a42c Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 19 Aug 2020 11:14:09 -0500
Subject: [PATCH 18/79] Use 1 loop

---
 src/DataGrid.tsx             | 19 +++++++++++--------
 src/hooks/useViewportRows.ts |  6 ++----
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 1ca6e1da00..1c7758192f 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -281,7 +281,7 @@ function DataGrid<R, K extends keyof R, SR>({
     - summaryRowsCount * rowHeight
     - (totalColumnWidth > viewportWidth ? getScrollbarSize() : 0);
 
-  const { viewportRows, rows, startRowIdx, rowsCount } = useViewportRows({
+  const { rowOverscanStartIdx, rowOverscanEndIdx, rows, rowsCount } = useViewportRows({
     rawRows,
     groupBy,
     rowGrouper,
@@ -620,7 +620,6 @@ function DataGrid<R, K extends keyof R, SR>({
   /**
    * utils
    */
-
   function isCellWithinBounds({ idx, rowIdx }: Position): boolean {
     return rowIdx >= 0 && rowIdx < rows.length && idx >= 0 && idx < columns.length;
   }
@@ -787,14 +786,15 @@ function DataGrid<R, K extends keyof R, SR>({
   }
 
   function getViewportRows() {
+    const rowElements = [];
     let startRowIndex = 0;
-    return viewportRows.map((row, index) => {
-      const rowIdx = startRowIdx + index;
+    for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
+      const row = rows[rowIdx];
       const top = rowIdx * rowHeight + totalHeaderHeight;
       if (isGroupedRow(row)) {
         const isSelected = selectedPosition.rowIdx === rowIdx;
         ({ startRowIndex } = row);
-        return (
+        rowElements.push(
           <GroupRowRenderer<R, SR>
             aria-level={row.level + 1} // aria-level is 1-based
             aria-setsize={row.setSize}
@@ -817,9 +817,10 @@ function DataGrid<R, K extends keyof R, SR>({
             onKeyDown={isSelected ? handleKeyDown : undefined}
           />
         );
+        continue;
       }
-      startRowIndex++;
 
+      startRowIndex++;
       let key: string | number = hasGroups ? startRowIndex : rowIdx;
       let isRowSelected = false;
       if (rowKey !== undefined) {
@@ -830,7 +831,7 @@ function DataGrid<R, K extends keyof R, SR>({
         }
       }
 
-      return (
+      rowElements.push(
         <RowRenderer
           aria-rowindex={headerRowsCount + (hasGroups ? startRowIndex : rowIdx) + 1} // aria-rowindex is 1 based
           aria-selected={isSelectable ? isRowSelected : undefined}
@@ -850,7 +851,9 @@ function DataGrid<R, K extends keyof R, SR>({
           selectedCellProps={getSelectedCellProps(rowIdx)}
         />
       );
-    });
+    }
+
+    return rowElements;
   }
 
   // Reset the positions if the current values are no longer valid. This can happen if a column or row is removed
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 78d7ea579a..2a695ac404 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -82,12 +82,10 @@ export function useViewportRows<R, SR>({
     rows.length
   );
 
-  const viewportRows = rows.slice(rowOverscanStartIdx, rowOverscanEndIdx + 1);
-
   return {
-    viewportRows,
+    rowOverscanStartIdx,
+    rowOverscanEndIdx,
     rows,
-    startRowIdx: rowOverscanStartIdx,
     rowsCount
   };
 }

From bd4c1210b2a103c934eced792a6f3e6eb4c2d312 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 19 Aug 2020 13:09:35 -0500
Subject: [PATCH 19/79] Cleanup

---
 src/DataGrid.tsx | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 1c7758192f..2536954fb4 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -332,24 +332,26 @@ function DataGrid<R, K extends keyof R, SR>({
             newSelectedRows.delete(childRow[rowKey]);
           }
         }
-      } else {
-        const rowId = row[rowKey];
-        if (checked) {
-          newSelectedRows.add(rowId);
-          const previousRowIdx = lastSelectedRowIdx.current;
-          lastSelectedRowIdx.current = rowIdx;
-          if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
-            const step = Math.sign(rowIdx - previousRowIdx);
-            for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
-              const row = rows[i];
-              if (isGroupedRow(row)) continue;
-              newSelectedRows.add(row[rowKey]);
-            }
+        onSelectedRowsChange(newSelectedRows);
+        return;
+      }
+
+      const rowId = row[rowKey];
+      if (checked) {
+        newSelectedRows.add(rowId);
+        const previousRowIdx = lastSelectedRowIdx.current;
+        lastSelectedRowIdx.current = rowIdx;
+        if (isShiftClick && previousRowIdx !== -1 && previousRowIdx !== rowIdx) {
+          const step = Math.sign(rowIdx - previousRowIdx);
+          for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
+            const row = rows[i];
+            if (isGroupedRow(row)) continue;
+            newSelectedRows.add(row[rowKey]);
           }
-        } else {
-          newSelectedRows.delete(rowId);
-          lastSelectedRowIdx.current = -1;
         }
+      } else {
+        newSelectedRows.delete(rowId);
+        lastSelectedRowIdx.current = -1;
       }
 
       onSelectedRowsChange(newSelectedRows);
@@ -800,7 +802,7 @@ function DataGrid<R, K extends keyof R, SR>({
             aria-setsize={row.setSize}
             aria-posinset={row.posInSet + 1} // aria-posinset is 1-based
             aria-rowindex={headerRowsCount + startRowIndex + 1} // aria-rowindex is 1 based
-            key={row.id} // TODO: id or index?
+            key={row.id}
             id={row.id}
             groupKey={row.key}
             viewportColumns={viewportColumns}

From cbfd03fcce3af866ecec041da9b6bb8fa63b61d4 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 19 Aug 2020 14:41:30 -0500
Subject: [PATCH 20/79] Add GroupCell component

---
 src/DataGrid.tsx  |  6 ++--
 src/GroupCell.tsx | 73 +++++++++++++++++++++++++++++++++++++++++++++++
 src/GroupRow.tsx  | 54 +++++++++++------------------------
 src/types.ts      |  3 +-
 4 files changed, 93 insertions(+), 43 deletions(-)
 create mode 100644 src/GroupCell.tsx

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 2536954fb4..cbd888ed61 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -794,7 +794,6 @@ function DataGrid<R, K extends keyof R, SR>({
       const row = rows[rowIdx];
       const top = rowIdx * rowHeight + totalHeaderHeight;
       if (isGroupedRow(row)) {
-        const isSelected = selectedPosition.rowIdx === rowIdx;
         ({ startRowIndex } = row);
         rowElements.push(
           <GroupRowRenderer<R, SR>
@@ -809,14 +808,13 @@ function DataGrid<R, K extends keyof R, SR>({
             childRows={row.childRows}
             rowIdx={rowIdx}
             lastFrozenColumnIndex={lastFrozenColumnIndex}
-            groupBy={groupBy}
             top={top}
             level={row.level}
             isExpanded={row.isExpanded}
-            isCellSelected={isSelected}
+            selectedCellIdx={selectedPosition.rowIdx === rowIdx ? selectedPosition.idx : undefined}
             isRowSelected={isSelectable && row.childRows.every(cr => selectedRows?.has(cr[rowKey!]))}
             eventBus={eventBus}
-            onKeyDown={isSelected ? handleKeyDown : undefined}
+            onKeyDown={selectedPosition.rowIdx === rowIdx ? handleKeyDown : undefined}
           />
         );
         continue;
diff --git a/src/GroupCell.tsx b/src/GroupCell.tsx
new file mode 100644
index 0000000000..29d90ba585
--- /dev/null
+++ b/src/GroupCell.tsx
@@ -0,0 +1,73 @@
+import React, { memo } from 'react';
+import clsx from 'clsx';
+import { GroupRowRendererProps, CalculatedColumn } from './types';
+
+type SharedGroupRowRendererProps<R, SR> = Pick<GroupRowRendererProps<R, SR>,
+  | 'id'
+  | 'rowIdx'
+  | 'groupKey'
+  | 'childRows'
+  | 'isExpanded'
+  | 'isRowSelected'
+  | 'lastFrozenColumnIndex'
+  | 'eventBus'
+>;
+
+interface GroupCellProps<R, SR> extends SharedGroupRowRendererProps<R, SR> {
+  column: CalculatedColumn<R, SR>;
+  isCellSelected: boolean;
+  groupColumnIndex: number;
+}
+
+function GroupCell<R, SR>({
+  id,
+  rowIdx,
+  groupKey,
+  childRows,
+  lastFrozenColumnIndex,
+  isExpanded,
+  isCellSelected,
+  isRowSelected,
+  eventBus,
+  column,
+  groupColumnIndex
+}: GroupCellProps<R, SR>) {
+  function toggleGroup() {
+    eventBus.dispatch('TOGGLE_GROUP', id);
+  }
+
+  function onRowSelectionChange(checked: boolean) {
+    eventBus.dispatch('SELECT_ROW', { rowIdx, checked, isShiftClick: false });
+  }
+
+  return (
+    <div
+      role="gridcell"
+      aria-colindex={column.idx + 1}
+      key={column.key}
+      className={clsx('rdg-cell', {
+        'rdg-cell-frozen': column.frozen,
+        'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex
+      })}
+      style={{
+        width: column.width,
+        left: column.left
+      }}
+    >
+      {column.groupFormatter && (column.rowGroup ? groupColumnIndex === column.idx : true) && (
+        <column.groupFormatter
+          groupKey={groupKey}
+          childRows={childRows}
+          column={column}
+          isExpanded={isExpanded}
+          isCellSelected={isCellSelected}
+          isRowSelected={isRowSelected}
+          onRowSelectionChange={onRowSelectionChange}
+          toggleGroup={toggleGroup}
+        />
+      )}
+    </div>
+  );
+}
+
+export default memo(GroupCell) as <R, SR>(props: GroupCellProps<R, SR>) => JSX.Element;
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 656f9472dc..614f43fe3b 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import clsx from 'clsx';
 import { GroupRowRendererProps, CalculatedColumn } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
+import GroupCell from './GroupCell';
 
 function GroupedRow<R, SR>({
   id,
@@ -13,9 +14,8 @@ function GroupedRow<R, SR>({
   top,
   level,
   isExpanded,
-  isCellSelected,
+  selectedCellIdx,
   isRowSelected,
-  groupBy,
   eventBus,
   onKeyDown,
   'aria-setsize': ariaSetSize,
@@ -30,21 +30,13 @@ function GroupedRow<R, SR>({
     eventBus.dispatch('SELECT_CELL', { rowIdx, idx });
   }
 
-  function toggleGroup() {
-    eventBus.dispatch('TOGGLE_GROUP', id);
-  }
-
-  function onRowSelectionChange(checked: boolean) {
-    eventBus.dispatch('SELECT_ROW', { rowIdx, checked, isShiftClick: false });
-  }
-
   // Expand groupBy column widths
   const visibleColumns: CalculatedColumn<R, SR>[] = [...viewportColumns];
   visibleColumns[idx] = { ...visibleColumns[idx] };
   let colSpan = 0;
   for (let i = idx + 1; i < visibleColumns.length; i++) {
     const nextColumn = visibleColumns[i];
-    if (!nextColumn.frozen || (nextColumn.groupFormatter && !groupBy.includes(nextColumn.key))) break;
+    if (!nextColumn.frozen || (nextColumn.groupFormatter && !nextColumn.rowGroup)) break;
     visibleColumns[idx].width += nextColumn.width;
     colSpan++;
   }
@@ -61,7 +53,7 @@ function GroupedRow<R, SR>({
       className={clsx('rdg-row rdg-group-row', {
         'rdg-row-even': rowIdx % 2 === 0,
         'rdg-row-odd': rowIdx % 2 !== 0,
-        'rdg-group-row-selected': isCellSelected
+        'rdg-group-row-selected': selectedCellIdx !== undefined
       })}
       onClick={selectGroup}
       onKeyDown={onKeyDown}
@@ -69,32 +61,20 @@ function GroupedRow<R, SR>({
       {...props}
     >
       {visibleColumns.map(column => (
-        <div
-          role="gridcell"
-          aria-colindex={column.idx + 1}
+        <GroupCell<R, SR>
           key={column.key}
-          className={clsx('rdg-cell', {
-            'rdg-cell-frozen': column.frozen,
-            'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex
-          })}
-          style={{
-            width: column.width,
-            left: column.left
-          }}
-        >
-          {column.groupFormatter && (groupBy.includes(column.key) ? idx === column.idx : true) && (
-            <column.groupFormatter
-              groupKey={groupKey}
-              childRows={childRows}
-              column={column}
-              isExpanded={isExpanded}
-              isCellSelected={isCellSelected}
-              isRowSelected={isRowSelected}
-              onRowSelectionChange={onRowSelectionChange}
-              toggleGroup={toggleGroup}
-            />
-          )}
-        </div>
+          id={id}
+          rowIdx={rowIdx}
+          groupKey={groupKey}
+          childRows={childRows}
+          isExpanded={isExpanded}
+          isRowSelected={isRowSelected}
+          isCellSelected={selectedCellIdx !== undefined && idx === column.idx} // TODO: fir selectedCell logic
+          eventBus={eventBus}
+          column={column}
+          lastFrozenColumnIndex={lastFrozenColumnIndex}
+          groupColumnIndex={idx}
+        />
       ))}
     </div>
   );
diff --git a/src/types.ts b/src/types.ts
index 311b500671..50a8d24f04 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -204,11 +204,10 @@ export interface GroupRowRendererProps<TRow, TSummaryRow = unknown> extends Omit
   childRows: TRow[];
   rowIdx: number;
   lastFrozenColumnIndex: number;
-  groupBy: readonly string[];
   top: number;
   level: number;
+  selectedCellIdx?: number;
   isExpanded: boolean;
-  isCellSelected: boolean;
   isRowSelected: boolean;
   eventBus: EventBus;
 }

From b0df2383e3fd50fdfc3394e8918838bb8f6ccaca Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Thu, 20 Aug 2020 20:59:05 -0500
Subject: [PATCH 21/79] Add row selection for group rows

---
 src/Columns.tsx                         |  2 +
 src/DataGrid.tsx                        | 61 ++++++++++++++++++++++---
 src/GroupCell.tsx                       |  3 +-
 src/GroupRow.tsx                        | 31 +++++++------
 src/formatters/SelectCellFormatter.tsx  |  5 +-
 src/formatters/ToggleGroupFormatter.tsx | 23 +++++-----
 src/hooks/useViewportColumns.ts         | 16 +++++--
 src/hooks/useViewportRows.ts            |  2 +
 src/types.ts                            |  3 +-
 src/utils/index.ts                      |  2 +-
 stories/demos/CommonFeatures.tsx        |  3 +-
 style/cell.less                         |  2 +-
 style/row.less                          |  5 +-
 13 files changed, 112 insertions(+), 46 deletions(-)

diff --git a/src/Columns.tsx b/src/Columns.tsx
index 9b974de505..009f441aa0 100644
--- a/src/Columns.tsx
+++ b/src/Columns.tsx
@@ -41,6 +41,8 @@ export const SelectColumn: Column<any, any> = {
         isCellSelected={props.isCellSelected}
         value={props.isRowSelected}
         onChange={props.onRowSelectionChange}
+        // Stop propagation to prevent row selection
+        onClick={event => event.stopPropagation()}
       />
     );
   },
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index cbd888ed61..465de4635b 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -307,13 +307,12 @@ function DataGrid<R, K extends keyof R, SR>({
     prevSelectedPosition.current = selectedPosition;
     scrollToCell(selectedPosition);
 
-    const row = rows[selectedPosition.rowIdx];
-    if (isGroupedRow(row)) return;
-
     // Let the formatter handle focus
-    const column = columns[selectedPosition.idx];
-    if (column.formatterOptions?.focusable) return;
-
+    const formatterOptions = columns[selectedPosition.idx]?.formatterOptions;
+    const row = rows[selectedPosition.rowIdx];
+    if ((typeof formatterOptions?.focusable === 'function' && formatterOptions?.focusable(row)) || formatterOptions?.focusable === true) {
+      return;
+    }
     focusSinkRef.current!.focus();
   });
 
@@ -622,8 +621,13 @@ function DataGrid<R, K extends keyof R, SR>({
   /**
    * utils
    */
+  function isRowWithinBounds(rowIdx: number) {
+    return rowIdx >= 0 && rowIdx < rows.length;
+  }
+
   function isCellWithinBounds({ idx, rowIdx }: Position): boolean {
-    return rowIdx >= 0 && rowIdx < rows.length && idx >= 0 && idx < columns.length;
+    const minIdx = isRowWithinBounds(rowIdx) && isGroupedRow(rows[rowIdx]) ? -1 : 0;
+    return isRowWithinBounds(rowIdx) && idx >= minIdx && idx < columns.length;
   }
 
   function isCellEditable(position: Position): boolean {
@@ -644,6 +648,39 @@ function DataGrid<R, K extends keyof R, SR>({
     onSelectedCellChange?.({ ...position });
   }
 
+  function selectRow(key: string) {
+    const row = rows[selectedPosition.rowIdx];
+    if (isGroupedRow(row) && selectedPosition.idx === -1) {
+      const isRowExpanded = expandedGroupIds?.has(row.id);
+      if (
+        // If a row is focused, and it is expanded, collaps the current row.
+        (key === 'ArrowLeft' && isRowExpanded)
+        // If a row is focused, and it is collapsed, expand the current row.
+        || (key === 'ArrowRight' && !isRowExpanded)
+      ) {
+        eventBus.dispatch('TOGGLE_GROUP', row.id);
+        return true;
+      }
+
+      // If a row is focused, and it is collapsed, move to the parent row (if there is one).
+      if (key === 'ArrowLeft' && !isRowExpanded && row.level !== 0) {
+        let parentRowIdx = -1;
+        for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
+          const parentRow = rows[i];
+          if (isGroupedRow(parentRow) && parentRow.key === row.parentKey) {
+            parentRowIdx = i;
+            break;
+          }
+        }
+        if (parentRowIdx !== -1) {
+          setSelectedPosition(position => ({ ...position, rowIdx: parentRowIdx }));
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   function closeEditor() {
     if (selectedPosition.mode === 'SELECT') return;
     setSelectedPosition(({ idx, rowIdx }) => ({ idx, rowIdx, mode: 'SELECT' }));
@@ -714,6 +751,13 @@ function DataGrid<R, K extends keyof R, SR>({
     const { key, shiftKey } = event;
     const ctrlKey = isCtrlKeyHeldDown(event);
     let nextPosition = getNextPosition(key, ctrlKey, shiftKey);
+    if (isRowWithinBounds(nextPosition.rowIdx)) {
+      const row = rows[nextPosition.rowIdx];
+      // Select the first cell when the selected position changes from a group row to regular row
+      if (!isGroupedRow(row) && nextPosition.idx === -1) {
+        nextPosition.idx = 0;
+      }
+    }
     let mode = cellNavigationMode;
     if (key === 'Tab') {
       // If we are in a position to leave the grid, stop editing but stay in that cell
@@ -730,6 +774,9 @@ function DataGrid<R, K extends keyof R, SR>({
     // Do not allow focus to leave
     event.preventDefault();
 
+    const isRowSelected = selectRow(key);
+    if (isRowSelected) return;
+
     nextPosition = getNextSelectedCellPosition<R, SR>({
       columns,
       rowsCount: rows.length,
diff --git a/src/GroupCell.tsx b/src/GroupCell.tsx
index 29d90ba585..bd973debc0 100644
--- a/src/GroupCell.tsx
+++ b/src/GroupCell.tsx
@@ -47,7 +47,8 @@ function GroupCell<R, SR>({
       key={column.key}
       className={clsx('rdg-cell', {
         'rdg-cell-frozen': column.frozen,
-        'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex
+        'rdg-cell-frozen-last': column.idx === lastFrozenColumnIndex,
+        'rdg-cell-selected': isCellSelected
       })}
       style={{
         width: column.width,
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 614f43fe3b..9ec15d9ef7 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
-import { GroupRowRendererProps, CalculatedColumn } from './types';
+import { GroupRowRendererProps } from './types';
 import { SELECT_COLUMN_KEY } from './Columns';
 import GroupCell from './GroupCell';
 
@@ -27,20 +27,21 @@ function GroupedRow<R, SR>({
   const idx = viewportColumns[0].key === SELECT_COLUMN_KEY ? level + 1 : level;
 
   function selectGroup() {
-    eventBus.dispatch('SELECT_CELL', { rowIdx, idx });
+    eventBus.dispatch('SELECT_CELL', { rowIdx, idx: -1 });
   }
 
+  // TODO: how to handle this with cell selection?
   // Expand groupBy column widths
-  const visibleColumns: CalculatedColumn<R, SR>[] = [...viewportColumns];
-  visibleColumns[idx] = { ...visibleColumns[idx] };
-  let colSpan = 0;
-  for (let i = idx + 1; i < visibleColumns.length; i++) {
-    const nextColumn = visibleColumns[i];
-    if (!nextColumn.frozen || (nextColumn.groupFormatter && !nextColumn.rowGroup)) break;
-    visibleColumns[idx].width += nextColumn.width;
-    colSpan++;
-  }
-  visibleColumns.splice(idx + 1, colSpan);
+  // const visibleColumns: CalculatedColumn<R, SR>[] = [...viewportColumns];
+  // visibleColumns[idx] = { ...visibleColumns[idx] };
+  // let colSpan = 0;
+  // for (let i = idx + 1; i < visibleColumns.length; i++) {
+  //   const nextColumn = visibleColumns[i];
+  //   if (!nextColumn.frozen || (nextColumn.groupFormatter && !nextColumn.rowGroup)) break;
+  //   visibleColumns[idx].width += nextColumn.width;
+  //   colSpan++;
+  // }
+  // visibleColumns.splice(idx + 1, colSpan);
 
   return (
     <div
@@ -53,14 +54,14 @@ function GroupedRow<R, SR>({
       className={clsx('rdg-row rdg-group-row', {
         'rdg-row-even': rowIdx % 2 === 0,
         'rdg-row-odd': rowIdx % 2 !== 0,
-        'rdg-group-row-selected': selectedCellIdx !== undefined
+        'rdg-group-row-selected': selectedCellIdx === -1 // Select row if there is no selected cell
       })}
       onClick={selectGroup}
       onKeyDown={onKeyDown}
       style={{ top }}
       {...props}
     >
-      {visibleColumns.map(column => (
+      {viewportColumns.map(column => (
         <GroupCell<R, SR>
           key={column.key}
           id={id}
@@ -69,7 +70,7 @@ function GroupedRow<R, SR>({
           childRows={childRows}
           isExpanded={isExpanded}
           isRowSelected={isRowSelected}
-          isCellSelected={selectedCellIdx !== undefined && idx === column.idx} // TODO: fir selectedCell logic
+          isCellSelected={selectedCellIdx === column.idx}
           eventBus={eventBus}
           column={column}
           lastFrozenColumnIndex={lastFrozenColumnIndex}
diff --git a/src/formatters/SelectCellFormatter.tsx b/src/formatters/SelectCellFormatter.tsx
index 5d89748811..08dd65eaf5 100644
--- a/src/formatters/SelectCellFormatter.tsx
+++ b/src/formatters/SelectCellFormatter.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
 type SharedInputProps = Pick<React.InputHTMLAttributes<HTMLInputElement>,
   | 'disabled'
   | 'tabIndex'
+  | 'onClick'
   | 'aria-label'
   | 'aria-labelledby'
 >;
@@ -19,6 +20,7 @@ export function SelectCellFormatter({
   tabIndex,
   isCellSelected,
   disabled,
+  onClick,
   onChange,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledBy
@@ -43,8 +45,9 @@ export function SelectCellFormatter({
         type="checkbox"
         className="rdg-checkbox-input"
         disabled={disabled}
-        onChange={handleChange}
         checked={value}
+        onChange={handleChange}
+        onClick={onClick}
       />
       <div className="rdg-checkbox" />
     </label>
diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index 30c263a0c5..a2e25b4580 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -13,26 +13,25 @@ export function ToggleGroupedFormatter<R, SR>({
     cellRef.current?.focus();
   }, [isCellSelected]);
 
-  function handleKeyDown(event: React.KeyboardEvent<HTMLSpanElement>) {
-    const { key } = event;
-    if (['ArrowLeft', 'ArrowRight', 'Enter'].includes(key)) {
-      event.preventDefault();
-      event.stopPropagation();
-      if (key === 'Enter') {
-        toggleGroup();
-      }
+  function handleKeyDown({ key }: React.KeyboardEvent<HTMLSpanElement>) {
+    if (key === 'Enter') {
+      toggleGroup();
     }
   }
 
   return (
     <span
-      ref={cellRef}
-      tabIndex={-1}
       style={{ cursor: 'pointer' }}
       onClick={toggleGroup}
-      onKeyDown={handleKeyDown}
     >
-      {groupKey}{' '}{isExpanded ? '\u25BC' : '\u25B6'}
+      {groupKey}{' '}
+      <span
+        ref={cellRef}
+        tabIndex={-1}
+        onKeyDown={handleKeyDown}
+      >
+        {isExpanded ? '\u25BC' : '\u25B6'}
+      </span>
     </span>
   );
 }
diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
index a16464c36f..1cb21d7c1e 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
-import { CalculatedColumn } from '../types';
-import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns } from '../utils';
+import { CalculatedColumn, GroupRow } from '../types';
+import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns, isGroupedRow } from '../utils';
 import { DataGridProps } from '../DataGrid';
 import { SELECT_COLUMN_KEY } from '../Columns';
 import { ValueFormatter, ToggleGroupedFormatter } from '../formatters';
@@ -40,11 +40,19 @@ export function useViewportColumns<R, K extends keyof R, SR>({
     // Move group columns after the select column
     const groupByColumns = rawColumns
       .filter(c => groupBy.includes(c.key))
-      .map(c => ({
+      .map((c, index) => ({
         ...c,
         frozen: true,
         rowGroup: true,
-        groupFormatter: c.groupFormatter ?? ToggleGroupedFormatter
+        groupFormatter: c.groupFormatter ?? ToggleGroupedFormatter,
+        formatterOptions: {
+          focusable(row: R | GroupRow<R>) {
+            if (isGroupedRow(row)) {
+              return row.level === index;
+            }
+            return false;
+          }
+        }
       }))
       .sort((c1, c2) => groupBy.findIndex(k => k === c1.key) - groupBy.findIndex(k => k === c2.key));
     const remaningColumns = rawColumns.filter(c => !groupBy.includes(c.key) && c.key !== SELECT_COLUMN_KEY);
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 2a695ac404..09510e3812 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -50,12 +50,14 @@ export function useViewportRows<R, SR>({
       if (Array.isArray(rows)) return rows;
       const flattenedRows: Array<R | GroupRow<R>> = [];
       Object.keys(rows).forEach((key, posInSet, keys) => {
+        // TODO: should users have control over the gerenated key?
         const id = parentKey !== undefined ? `${parentKey}__${key}` : key;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
         const { childRows, childGroups, startRowIndex } = rows[key];
         flattenedRows.push({
           id,
           key,
+          parentKey,
           isExpanded,
           childRows,
           level,
diff --git a/src/types.ts b/src/types.ts
index 50a8d24f04..814af22a42 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -22,7 +22,7 @@ export interface Column<TRow, TSummaryRow = unknown> {
   /** Formatter to be used to render the cell content */
   formatter?: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;
   formatterOptions?: {
-    focusable?: boolean;
+    focusable?: boolean | ((row: TRow | GroupRow<TRow>) => boolean);
   };
   /** Formatter to be used to render the summary cell content */
   summaryFormatter?: React.ComponentType<SummaryFormatterProps<TSummaryRow, TRow>>;
@@ -261,6 +261,7 @@ export interface GroupRow<TRow> {
   childRows: TRow[];
   id: string;
   key: unknown;
+  parentKey: unknown;
   isExpanded: boolean;
   level: number;
   posInSet: number;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 77631834c3..de1c0e384f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -7,7 +7,7 @@ export * from './keyboardUtils';
 export * from './selectedCellUtils';
 
 export function isGroupedRow<R>(row: R | GroupRow<R>): row is GroupRow<R> {
-  return (row as GroupRow<R>).__isGroup !== undefined;
+  return (row as GroupRow<R>).__isGroup === true;
 }
 
 export function assertIsValidKey<R>(key: unknown): asserts key is keyof R {
diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index d55be0ecb7..08dda59616 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -154,7 +154,8 @@ function getColumns(countries: string[]): readonly Column<Row, SummaryRow>[] {
     },
     {
       key: 'transaction',
-      name: 'Transaction type'
+      name: 'Transaction type',
+      width: 200
     },
     {
       key: 'account',
diff --git a/style/cell.less b/style/cell.less
index 4ee53d6e0f..ca14ec72e4 100644
--- a/style/cell.less
+++ b/style/cell.less
@@ -24,7 +24,7 @@
 }
 
 .rdg-cell-selected {
-  box-shadow: inset 0 0 0 2px #66afe9;
+  box-shadow: inset 0 0 0 2px @selectedBorderColor;
 }
 
 .rdg-cell-copied {
diff --git a/style/row.less b/style/row.less
index 65c0f15fd7..06c3e9b502 100644
--- a/style/row.less
+++ b/style/row.less
@@ -35,12 +35,13 @@
 
 .rdg-group-row {
   > .rdg-cell {
-    border-right-width: 0;
+    // TODO: fix broken border
+    border-right-color: transparent;
   }
 
   > .rdg-cell:last-child,
   > .rdg-cell-frozen-last {
-    border-right-width: 1px;
+    border-right-color: @borderColor;
   }
 }
 

From c7b7156e9483993d2879453c65088228b181d366 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Thu, 20 Aug 2020 22:08:56 -0500
Subject: [PATCH 22/79] Cleanup

---
 src/DataGrid.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 465de4635b..6865556a19 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -307,10 +307,10 @@ function DataGrid<R, K extends keyof R, SR>({
     prevSelectedPosition.current = selectedPosition;
     scrollToCell(selectedPosition);
 
-    // Let the formatter handle focus
-    const formatterOptions = columns[selectedPosition.idx]?.formatterOptions;
+    const focusable = columns[selectedPosition.idx]?.formatterOptions?.focusable;
     const row = rows[selectedPosition.rowIdx];
-    if ((typeof formatterOptions?.focusable === 'function' && formatterOptions?.focusable(row)) || formatterOptions?.focusable === true) {
+    if ((typeof focusable === 'function' && focusable(row)) || focusable === true) {
+      // Let the formatter handle focus
       return;
     }
     focusSinkRef.current!.focus();
@@ -734,6 +734,7 @@ function DataGrid<R, K extends keyof R, SR>({
           return shiftKey ? { idx: columns.length - 1, rowIdx: rows.length - 1 } : { idx: 0, rowIdx: 0 };
         }
         return { idx: idx + (shiftKey ? -1 : 1), rowIdx };
+      // TODO: fix keyboard support for group row
       case 'Home':
         return ctrlKey ? { idx: 0, rowIdx: 0 } : { idx: 0, rowIdx };
       case 'End':

From 6d5ab53bac81295ff266ebaccf2fd8b97fe1b67f Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 21 Aug 2020 15:43:25 -0500
Subject: [PATCH 23/79] Handle Home and End keys for GroupRow

---
 src/DataGrid.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 677581a4e3..6a1c245f3b 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -654,19 +654,18 @@ function DataGrid<R, K extends keyof R, SR>({
   function selectRow(key: string) {
     const row = rows[selectedPosition.rowIdx];
     if (isGroupedRow(row) && selectedPosition.idx === -1) {
-      const isRowExpanded = expandedGroupIds?.has(row.id);
       if (
         // If a row is focused, and it is expanded, collaps the current row.
-        (key === 'ArrowLeft' && isRowExpanded)
+        (key === 'ArrowLeft' && row.isExpanded)
         // If a row is focused, and it is collapsed, expand the current row.
-        || (key === 'ArrowRight' && !isRowExpanded)
+        || (key === 'ArrowRight' && !row.isExpanded)
       ) {
         eventBus.dispatch('TOGGLE_GROUP', row.id);
         return true;
       }
 
       // If a row is focused, and it is collapsed, move to the parent row (if there is one).
-      if (key === 'ArrowLeft' && !isRowExpanded && row.level !== 0) {
+      if (key === 'ArrowLeft' && !row.isExpanded && row.level !== 0) {
         let parentRowIdx = -1;
         for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
           const parentRow = rows[i];
@@ -723,6 +722,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function getNextPosition(key: string, ctrlKey: boolean, shiftKey: boolean): Position {
     const { idx, rowIdx } = selectedPosition;
+    const isRowSelected = isRowWithinBounds(rowIdx) && idx === -1;
     switch (key) {
       case 'ArrowUp':
         return { idx, rowIdx: rowIdx - 1 };
@@ -737,11 +737,20 @@ function DataGrid<R, K extends keyof R, SR>({
           return shiftKey ? { idx: columns.length - 1, rowIdx: rows.length - 1 } : { idx: 0, rowIdx: 0 };
         }
         return { idx: idx + (shiftKey ? -1 : 1), rowIdx };
-      // TODO: fix keyboard support for group row
       case 'Home':
-        return ctrlKey ? { idx: 0, rowIdx: 0 } : { idx: 0, rowIdx };
+        // Move focus to the first row
+        if (isRowSelected) return { idx, rowIdx: 0 };
+        // Move focus to the first cell in the first row
+        if (ctrlKey) return { idx: 0, rowIdx: 0 };
+        // Move focus to the first cell in the row containing focus
+        return { idx: 0, rowIdx };
       case 'End':
-        return ctrlKey ? { idx: columns.length - 1, rowIdx: rows.length - 1 } : { idx: columns.length - 1, rowIdx };
+        // Move focus to the last row.
+        if (isRowSelected) return { idx, rowIdx: rows.length - 1 };
+        // Move focus to the last cell in the last row
+        if (ctrlKey) return { idx: columns.length - 1, rowIdx: rows.length - 1 };
+        // Moves focus to the last cell in the row that contains focus.
+        return { idx: columns.length - 1, rowIdx };
       case 'PageUp':
         return { idx, rowIdx: rowIdx - Math.floor(clientHeight / rowHeight) };
       case 'PageDown':

From f0c894d1f60ce1202cf715b0a604f9ad976186ec Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 21 Aug 2020 16:15:41 -0500
Subject: [PATCH 24/79] Clanup navigation logic

---
 src/DataGrid.tsx | 81 ++++++++++++++++++++++++------------------------
 1 file changed, 40 insertions(+), 41 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 6a1c245f3b..547e0ae28f 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -41,7 +41,8 @@ import {
   CommitEvent,
   SelectedCellProps,
   EditCellProps,
-  Dictionary
+  Dictionary,
+  GroupRow
 } from './types';
 import { CellNavigationMode, SortDirection, UpdateActions } from './enums';
 
@@ -395,9 +396,10 @@ function DataGrid<R, K extends keyof R, SR>({
    * event handlers
    */
   function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
+    const { key } = event;
     if (enableCellCopyPaste && isCtrlKeyHeldDown(event) && isCellWithinBounds(selectedPosition)) {
-      // event.key may be uppercase `C` or `V`
-      const lowerCaseKey = event.key.toLowerCase();
+      // key may be uppercase `C` or `V`
+      const lowerCaseKey = key.toLowerCase();
       if (lowerCaseKey === 'c') {
         handleCopy();
         return;
@@ -408,6 +410,21 @@ function DataGrid<R, K extends keyof R, SR>({
       }
     }
 
+    const row = rows[selectedPosition.rowIdx];
+    if (
+      isGroupedRow(row)
+      && selectedPosition.idx === -1
+      && (
+        // Collapse the current row if it is focused and is in expanded state
+        (key === 'ArrowLeft' && row.isExpanded)
+        // Expand the current row if it is focused and is in collapsed state
+        || (key === 'ArrowRight' && !row.isExpanded)
+      )) {
+      event.preventDefault(); // Prevents scrolling
+      eventBus.dispatch('TOGGLE_GROUP', row.id);
+      return;
+    }
+
     switch (event.key) {
       case 'Escape':
         setCopiedPosition(null);
@@ -651,38 +668,6 @@ function DataGrid<R, K extends keyof R, SR>({
     onSelectedCellChange?.({ ...position });
   }
 
-  function selectRow(key: string) {
-    const row = rows[selectedPosition.rowIdx];
-    if (isGroupedRow(row) && selectedPosition.idx === -1) {
-      if (
-        // If a row is focused, and it is expanded, collaps the current row.
-        (key === 'ArrowLeft' && row.isExpanded)
-        // If a row is focused, and it is collapsed, expand the current row.
-        || (key === 'ArrowRight' && !row.isExpanded)
-      ) {
-        eventBus.dispatch('TOGGLE_GROUP', row.id);
-        return true;
-      }
-
-      // If a row is focused, and it is collapsed, move to the parent row (if there is one).
-      if (key === 'ArrowLeft' && !row.isExpanded && row.level !== 0) {
-        let parentRowIdx = -1;
-        for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
-          const parentRow = rows[i];
-          if (isGroupedRow(parentRow) && parentRow.key === row.parentKey) {
-            parentRowIdx = i;
-            break;
-          }
-        }
-        if (parentRowIdx !== -1) {
-          setSelectedPosition(position => ({ ...position, rowIdx: parentRowIdx }));
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
   function closeEditor() {
     if (selectedPosition.mode === 'SELECT') return;
     setSelectedPosition(({ idx, rowIdx }) => ({ idx, rowIdx, mode: 'SELECT' }));
@@ -722,7 +707,24 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function getNextPosition(key: string, ctrlKey: boolean, shiftKey: boolean): Position {
     const { idx, rowIdx } = selectedPosition;
-    const isRowSelected = isRowWithinBounds(rowIdx) && idx === -1;
+    const isGroupRowSelected = isRowWithinBounds(rowIdx) && idx === -1;
+
+    // If a row is focused, and it is collapsed, move to the parent row (if there is one).
+    if (isGroupRowSelected && key === 'ArrowLeft') {
+      const row = rows[rowIdx] as GroupRow<R>;
+      let parentRowIdx = -1;
+      for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
+        const parentRow = rows[i];
+        if (isGroupedRow(parentRow) && parentRow.key === row.parentKey) {
+          parentRowIdx = i;
+          break;
+        }
+      }
+      if (parentRowIdx !== -1) {
+        return { idx, rowIdx: parentRowIdx };
+      }
+    }
+
     switch (key) {
       case 'ArrowUp':
         return { idx, rowIdx: rowIdx - 1 };
@@ -739,14 +741,14 @@ function DataGrid<R, K extends keyof R, SR>({
         return { idx: idx + (shiftKey ? -1 : 1), rowIdx };
       case 'Home':
         // Move focus to the first row
-        if (isRowSelected) return { idx, rowIdx: 0 };
+        if (isGroupRowSelected) return { idx, rowIdx: 0 };
         // Move focus to the first cell in the first row
         if (ctrlKey) return { idx: 0, rowIdx: 0 };
         // Move focus to the first cell in the row containing focus
         return { idx: 0, rowIdx };
       case 'End':
         // Move focus to the last row.
-        if (isRowSelected) return { idx, rowIdx: rows.length - 1 };
+        if (isGroupRowSelected) return { idx, rowIdx: rows.length - 1 };
         // Move focus to the last cell in the last row
         if (ctrlKey) return { idx: columns.length - 1, rowIdx: rows.length - 1 };
         // Moves focus to the last cell in the row that contains focus.
@@ -787,9 +789,6 @@ function DataGrid<R, K extends keyof R, SR>({
     // Do not allow focus to leave
     event.preventDefault();
 
-    const isRowSelected = selectRow(key);
-    if (isRowSelected) return;
-
     nextPosition = getNextSelectedCellPosition<R, SR>({
       columns,
       rowsCount: rows.length,

From e2f91167c30bc51a145301b39ff258618a1cf10a Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 21 Aug 2020 16:24:23 -0500
Subject: [PATCH 25/79] Cleanup

---
 src/DataGrid.tsx               | 3 +--
 src/utils/selectedCellUtils.ts | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 547e0ae28f..8e66de36e4 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -646,8 +646,7 @@ function DataGrid<R, K extends keyof R, SR>({
   }
 
   function isCellWithinBounds({ idx, rowIdx }: Position): boolean {
-    const minIdx = isRowWithinBounds(rowIdx) && isGroupedRow(rows[rowIdx]) ? -1 : 0;
-    return isRowWithinBounds(rowIdx) && idx >= minIdx && idx < columns.length;
+    return isRowWithinBounds(rowIdx) && idx >= (isGroupedRow(rows[rowIdx]) ? -1 : 0) && idx < columns.length;
   }
 
   function isCellEditable(position: Position): boolean {
diff --git a/src/utils/selectedCellUtils.ts b/src/utils/selectedCellUtils.ts
index f305a69e66..958439958e 100644
--- a/src/utils/selectedCellUtils.ts
+++ b/src/utils/selectedCellUtils.ts
@@ -13,8 +13,7 @@ interface IsSelectedCellEditableOpts<R, SR> {
 export function isSelectedCellEditable<R, SR>({ selectedPosition, columns, rows, onCheckCellIsEditable }: IsSelectedCellEditableOpts<R, SR>): boolean {
   const column = columns[selectedPosition.idx];
   const row = rows[selectedPosition.rowIdx];
-  if (column.rowGroup) return false;
-  if (isGroupedRow(row)) return false;
+  if (column.rowGroup || isGroupedRow(row)) return false;
   const isCellEditable = onCheckCellIsEditable ? onCheckCellIsEditable({ row, column, ...selectedPosition }) : true;
   return isCellEditable && canEdit<R, SR>(column, row);
 }

From 2deba451b2872eedc653dc5fc2b46179d64eb3cf Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Sat, 22 Aug 2020 13:35:43 -0500
Subject: [PATCH 26/79] Improve navigation logic

---
 src/DataGrid.tsx | 37 +++++++++++++++++--------------------
 src/GroupRow.tsx | 24 ++++++------------------
 src/Row.tsx      |  6 ++++--
 3 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 8e66de36e4..7aab9c1db0 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -293,6 +293,7 @@ function DataGrid<R, K extends keyof R, SR>({
   });
 
   const hasGroups = groupBy.length > 0 && rowGrouper;
+  const minColIdx = hasGroups ? -1 : 0;
 
   if (hasGroups) {
     // TODO: finalize if these flags need to be supported on treegrid
@@ -412,8 +413,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
     const row = rows[selectedPosition.rowIdx];
     if (
-      isGroupedRow(row)
-      && selectedPosition.idx === -1
+      isGroupRowSelected(row)
       && (
         // Collapse the current row if it is focused and is in expanded state
         (key === 'ArrowLeft' && row.isExpanded)
@@ -641,12 +641,8 @@ function DataGrid<R, K extends keyof R, SR>({
   /**
    * utils
    */
-  function isRowWithinBounds(rowIdx: number) {
-    return rowIdx >= 0 && rowIdx < rows.length;
-  }
-
   function isCellWithinBounds({ idx, rowIdx }: Position): boolean {
-    return isRowWithinBounds(rowIdx) && idx >= (isGroupedRow(rows[rowIdx]) ? -1 : 0) && idx < columns.length;
+    return rowIdx >= 0 && rowIdx < rows.length && idx >= minColIdx && idx < columns.length;
   }
 
   function isCellEditable(position: Position): boolean {
@@ -704,13 +700,21 @@ function DataGrid<R, K extends keyof R, SR>({
     }
   }
 
+  function isGroupRowSelected(row?: R | GroupRow<R>): row is GroupRow<R> {
+    return row !== undefined && isGroupedRow(row) && selectedPosition.idx === -1;
+  }
+
   function getNextPosition(key: string, ctrlKey: boolean, shiftKey: boolean): Position {
     const { idx, rowIdx } = selectedPosition;
-    const isGroupRowSelected = isRowWithinBounds(rowIdx) && idx === -1;
+    const row = rows[rowIdx];
 
-    // If a row is focused, and it is collapsed, move to the parent row (if there is one).
-    if (isGroupRowSelected && key === 'ArrowLeft') {
-      const row = rows[rowIdx] as GroupRow<R>;
+    // If a group row is focused, and it is collapsed, move to the parent group row (if there is one).
+    if (
+      key === 'ArrowLeft'
+      && isGroupRowSelected(row)
+      && !row.isExpanded
+      && row.level !== 0
+    ) {
       let parentRowIdx = -1;
       for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
         const parentRow = rows[i];
@@ -740,14 +744,14 @@ function DataGrid<R, K extends keyof R, SR>({
         return { idx: idx + (shiftKey ? -1 : 1), rowIdx };
       case 'Home':
         // Move focus to the first row
-        if (isGroupRowSelected) return { idx, rowIdx: 0 };
+        if (isGroupRowSelected(row)) return { idx, rowIdx: 0 };
         // Move focus to the first cell in the first row
         if (ctrlKey) return { idx: 0, rowIdx: 0 };
         // Move focus to the first cell in the row containing focus
         return { idx: 0, rowIdx };
       case 'End':
         // Move focus to the last row.
-        if (isGroupRowSelected) return { idx, rowIdx: rows.length - 1 };
+        if (isGroupRowSelected(row)) return { idx, rowIdx: rows.length - 1 };
         // Move focus to the last cell in the last row
         if (ctrlKey) return { idx: columns.length - 1, rowIdx: rows.length - 1 };
         // Moves focus to the last cell in the row that contains focus.
@@ -765,13 +769,6 @@ function DataGrid<R, K extends keyof R, SR>({
     const { key, shiftKey } = event;
     const ctrlKey = isCtrlKeyHeldDown(event);
     let nextPosition = getNextPosition(key, ctrlKey, shiftKey);
-    if (isRowWithinBounds(nextPosition.rowIdx)) {
-      const row = rows[nextPosition.rowIdx];
-      // Select the first cell when the selected position changes from a group row to regular row
-      if (!isGroupedRow(row) && nextPosition.idx === -1) {
-        nextPosition.idx = 0;
-      }
-    }
     let mode = cellNavigationMode;
     if (key === 'Tab') {
       // If we are in a position to leave the grid, stop editing but stay in that cell
diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 9ec15d9ef7..cd71a5a9bd 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -30,19 +30,6 @@ function GroupedRow<R, SR>({
     eventBus.dispatch('SELECT_CELL', { rowIdx, idx: -1 });
   }
 
-  // TODO: how to handle this with cell selection?
-  // Expand groupBy column widths
-  // const visibleColumns: CalculatedColumn<R, SR>[] = [...viewportColumns];
-  // visibleColumns[idx] = { ...visibleColumns[idx] };
-  // let colSpan = 0;
-  // for (let i = idx + 1; i < visibleColumns.length; i++) {
-  //   const nextColumn = visibleColumns[i];
-  //   if (!nextColumn.frozen || (nextColumn.groupFormatter && !nextColumn.rowGroup)) break;
-  //   visibleColumns[idx].width += nextColumn.width;
-  //   colSpan++;
-  // }
-  // visibleColumns.splice(idx + 1, colSpan);
-
   return (
     <div
       role="row"
@@ -51,11 +38,12 @@ function GroupedRow<R, SR>({
       aria-posinset={ariaPosInSet}
       aria-rowindex={ariaRowIndex}
       aria-expanded={isExpanded}
-      className={clsx('rdg-row rdg-group-row', {
-        'rdg-row-even': rowIdx % 2 === 0,
-        'rdg-row-odd': rowIdx % 2 !== 0,
-        'rdg-group-row-selected': selectedCellIdx === -1 // Select row if there is no selected cell
-      })}
+      className={clsx(
+        'rdg-row',
+        'rdg-group-row',
+        `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, {
+          'rdg-group-row-selected': selectedCellIdx === -1 // Select row if there is no selected cell
+        })}
       onClick={selectGroup}
       onKeyDown={onKeyDown}
       style={{ top }}
diff --git a/src/Row.tsx b/src/Row.tsx
index d83b0e3d61..dc509ca878 100644
--- a/src/Row.tsx
+++ b/src/Row.tsx
@@ -33,8 +33,10 @@ function Row<R, SR = unknown>({
 
   className = clsx(
     'rdg-row',
-    `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`,
-    { 'rdg-row-selected': isRowSelected },
+    `rdg-row-${rowIdx % 2 === 0 ? 'even' : 'odd'}`, {
+      'rdg-row-selected': isRowSelected,
+      'rdg-group-row-selected': selectedCellProps?.idx === -1
+    },
     rowClass?.(row),
     className
   );

From a63d05122556a157277d0a8eb82cf2935f18cd39 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Sat, 22 Aug 2020 19:59:52 -0500
Subject: [PATCH 27/79] Cleanup

---
 src/DataGrid.tsx                | 61 ++++++++++++++++-----------------
 src/hooks/useViewportColumns.ts |  4 +--
 src/utils/index.ts              |  2 +-
 src/utils/selectedCellUtils.ts  |  4 +--
 4 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 7aab9c1db0..324f7b5b45 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -26,7 +26,7 @@ import {
   canExitGrid,
   isCtrlKeyHeldDown,
   isDefaultCellInput,
-  isGroupedRow
+  isGroupRow
 } from './utils';
 
 import {
@@ -41,8 +41,7 @@ import {
   CommitEvent,
   SelectedCellProps,
   EditCellProps,
-  Dictionary,
-  GroupRow
+  Dictionary
 } from './types';
 import { CellNavigationMode, SortDirection, UpdateActions } from './enums';
 
@@ -325,7 +324,7 @@ function DataGrid<R, K extends keyof R, SR>({
       assertIsValidKey(rowKey);
       const newSelectedRows = new Set(selectedRows);
       const row = rows[rowIdx];
-      if (isGroupedRow(row)) {
+      if (isGroupRow(row)) {
         for (const childRow of row.childRows) {
           if (checked) {
             newSelectedRows.add(childRow[rowKey]);
@@ -346,7 +345,7 @@ function DataGrid<R, K extends keyof R, SR>({
           const step = Math.sign(rowIdx - previousRowIdx);
           for (let i = previousRowIdx + step; i !== rowIdx; i += step) {
             const row = rows[i];
-            if (isGroupedRow(row)) continue;
+            if (isGroupRow(row)) continue;
             newSelectedRows.add(row[rowKey]);
           }
         }
@@ -398,7 +397,14 @@ function DataGrid<R, K extends keyof R, SR>({
    */
   function handleKeyDown(event: React.KeyboardEvent<HTMLDivElement>) {
     const { key } = event;
-    if (enableCellCopyPaste && isCtrlKeyHeldDown(event) && isCellWithinBounds(selectedPosition)) {
+    const row = rows[selectedPosition.rowIdx];
+
+    if (
+      enableCellCopyPaste
+      && isCtrlKeyHeldDown(event)
+      && isCellWithinBounds(selectedPosition)
+      && !isGroupRow(row)
+    ) {
       // key may be uppercase `C` or `V`
       const lowerCaseKey = key.toLowerCase();
       if (lowerCaseKey === 'c') {
@@ -411,13 +417,14 @@ function DataGrid<R, K extends keyof R, SR>({
       }
     }
 
-    const row = rows[selectedPosition.rowIdx];
     if (
-      isGroupRowSelected(row)
+      isCellWithinBounds(selectedPosition)
+      && isGroupRow(row)
+      && selectedPosition.idx === -1
       && (
-        // Collapse the current row if it is focused and is in expanded state
+        // Collapse the current group row if it is focused and is in expanded state
         (key === 'ArrowLeft' && row.isExpanded)
-        // Expand the current row if it is focused and is in collapsed state
+        // Expand the current group row if it is focused and is in collapsed state
         || (key === 'ArrowRight' && !row.isExpanded)
       )) {
       event.preventDefault(); // Prevents scrolling
@@ -537,9 +544,9 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function handleCellInput(event: React.KeyboardEvent<HTMLDivElement>) {
     if (!isCellWithinBounds(selectedPosition)) return;
-    const { key } = event;
     const row = rows[selectedPosition.rowIdx];
-    if (isGroupedRow(row)) return;
+    if (isGroupRow(row)) return;
+    const { key } = event;
     const column = columns[selectedPosition.idx];
 
     if (selectedPosition.mode === 'EDIT') {
@@ -700,25 +707,23 @@ function DataGrid<R, K extends keyof R, SR>({
     }
   }
 
-  function isGroupRowSelected(row?: R | GroupRow<R>): row is GroupRow<R> {
-    return row !== undefined && isGroupedRow(row) && selectedPosition.idx === -1;
-  }
-
   function getNextPosition(key: string, ctrlKey: boolean, shiftKey: boolean): Position {
     const { idx, rowIdx } = selectedPosition;
     const row = rows[rowIdx];
+    const isRowSelected = isCellWithinBounds(selectedPosition) && idx === -1;
 
     // If a group row is focused, and it is collapsed, move to the parent group row (if there is one).
     if (
       key === 'ArrowLeft'
-      && isGroupRowSelected(row)
+      && isRowSelected
+      && isGroupRow(row)
       && !row.isExpanded
       && row.level !== 0
     ) {
       let parentRowIdx = -1;
       for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
         const parentRow = rows[i];
-        if (isGroupedRow(parentRow) && parentRow.key === row.parentKey) {
+        if (isGroupRow(parentRow) && parentRow.key === row.parentKey) {
           parentRowIdx = i;
           break;
         }
@@ -743,19 +748,13 @@ function DataGrid<R, K extends keyof R, SR>({
         }
         return { idx: idx + (shiftKey ? -1 : 1), rowIdx };
       case 'Home':
-        // Move focus to the first row
-        if (isGroupRowSelected(row)) return { idx, rowIdx: 0 };
-        // Move focus to the first cell in the first row
-        if (ctrlKey) return { idx: 0, rowIdx: 0 };
-        // Move focus to the first cell in the row containing focus
-        return { idx: 0, rowIdx };
+        // If row is selected then move focus to the first row
+        if (isRowSelected) return { idx, rowIdx: 0 };
+        return ctrlKey ? { idx: 0, rowIdx: 0 } : { idx: 0, rowIdx };
       case 'End':
-        // Move focus to the last row.
-        if (isGroupRowSelected(row)) return { idx, rowIdx: rows.length - 1 };
-        // Move focus to the last cell in the last row
-        if (ctrlKey) return { idx: columns.length - 1, rowIdx: rows.length - 1 };
-        // Moves focus to the last cell in the row that contains focus.
-        return { idx: columns.length - 1, rowIdx };
+        // If row is selected then move focus to the last row.
+        if (isRowSelected) return { idx, rowIdx: rows.length - 1 };
+        return ctrlKey ? { idx: columns.length - 1, rowIdx: rows.length - 1 } : { idx: columns.length - 1, rowIdx };
       case 'PageUp':
         return { idx, rowIdx: rowIdx - Math.floor(clientHeight / rowHeight) };
       case 'PageDown':
@@ -848,7 +847,7 @@ function DataGrid<R, K extends keyof R, SR>({
     for (let rowIdx = rowOverscanStartIdx; rowIdx <= rowOverscanEndIdx; rowIdx++) {
       const row = rows[rowIdx];
       const top = rowIdx * rowHeight + totalHeaderHeight;
-      if (isGroupedRow(row)) {
+      if (isGroupRow(row)) {
         ({ startRowIndex } = row);
         rowElements.push(
           <GroupRowRenderer<R, SR>
diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
index 1cb21d7c1e..4105355ed7 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { CalculatedColumn, GroupRow } from '../types';
-import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns, isGroupedRow } from '../utils';
+import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns, isGroupRow } from '../utils';
 import { DataGridProps } from '../DataGrid';
 import { SELECT_COLUMN_KEY } from '../Columns';
 import { ValueFormatter, ToggleGroupedFormatter } from '../formatters';
@@ -47,7 +47,7 @@ export function useViewportColumns<R, K extends keyof R, SR>({
         groupFormatter: c.groupFormatter ?? ToggleGroupedFormatter,
         formatterOptions: {
           focusable(row: R | GroupRow<R>) {
-            if (isGroupedRow(row)) {
+            if (isGroupRow(row)) {
               return row.level === index;
             }
             return false;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index de1c0e384f..3bbbbf6651 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -6,7 +6,7 @@ export * from './viewportUtils';
 export * from './keyboardUtils';
 export * from './selectedCellUtils';
 
-export function isGroupedRow<R>(row: R | GroupRow<R>): row is GroupRow<R> {
+export function isGroupRow<R>(row: R | GroupRow<R>): row is GroupRow<R> {
   return (row as GroupRow<R>).__isGroup === true;
 }
 
diff --git a/src/utils/selectedCellUtils.ts b/src/utils/selectedCellUtils.ts
index 958439958e..4cd496c7ee 100644
--- a/src/utils/selectedCellUtils.ts
+++ b/src/utils/selectedCellUtils.ts
@@ -1,7 +1,7 @@
 import { CellNavigationMode } from '../enums';
 import { canEdit } from './columnUtils';
 import { CalculatedColumn, Position, GroupRow } from '../types';
-import { isGroupedRow } from '.';
+import { isGroupRow } from '.';
 
 interface IsSelectedCellEditableOpts<R, SR> {
   selectedPosition: Position;
@@ -13,7 +13,7 @@ interface IsSelectedCellEditableOpts<R, SR> {
 export function isSelectedCellEditable<R, SR>({ selectedPosition, columns, rows, onCheckCellIsEditable }: IsSelectedCellEditableOpts<R, SR>): boolean {
   const column = columns[selectedPosition.idx];
   const row = rows[selectedPosition.rowIdx];
-  if (column.rowGroup || isGroupedRow(row)) return false;
+  if (column.rowGroup || isGroupRow(row)) return false;
   const isCellEditable = onCheckCellIsEditable ? onCheckCellIsEditable({ row, column, ...selectedPosition }) : true;
   return isCellEditable && canEdit<R, SR>(column, row);
 }

From 410e248fe891f5e9c54f4e83acce2d171358df3f Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Mon, 24 Aug 2020 12:45:02 -0500
Subject: [PATCH 28/79] Handle copy/paste

---
 src/DataGrid.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index c34f1aba87..ef1009a35e 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -295,8 +295,7 @@ function DataGrid<R, K extends keyof R, SR>({
   const minColIdx = hasGroups ? -1 : 0;
 
   if (hasGroups) {
-    // TODO: finalize if these flags need to be supported on treegrid
-    enableCellDragAndDrop = false;
+    // TODO: finalize if cell drag needs to be supported for treegrid
     enableCellDragAndDrop = false;
   }
 
@@ -409,6 +408,7 @@ function DataGrid<R, K extends keyof R, SR>({
       && isCtrlKeyHeldDown(event)
       && isCellWithinBounds(selectedPosition)
       && !isGroupRow(row)
+      && selectedPosition.idx !== -1
     ) {
       // key may be uppercase `C` or `V`
       const lowerCaseKey = key.toLowerCase();
@@ -506,7 +506,8 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function handleCopy() {
     const { idx, rowIdx } = selectedPosition;
-    const value = rawRows[rowIdx][columns[idx].key as keyof R];
+    const rawRowIdx = getRawRowIdx(rowIdx);
+    const value = rawRows[rawRowIdx][columns[idx].key as keyof R];
     setCopiedPosition({ idx, rowIdx, value });
   }
 
@@ -519,17 +520,16 @@ function DataGrid<R, K extends keyof R, SR>({
       return;
     }
 
-    const { rowIdx: toRow } = selectedPosition;
-
+    const fromRow = getRawRowIdx(copiedPosition.rowIdx);
+    const fromCellKey = columns[copiedPosition.idx].key;
+    const toRow = getRawRowIdx(selectedPosition.rowIdx);
     const cellKey = columns[selectedPosition.idx].key;
-    const { rowIdx: fromRow, idx, value } = copiedPosition;
-    const fromCellKey = columns[idx].key;
 
     onRowsUpdate?.({
       cellKey,
       fromRow,
       toRow,
-      updated: { [cellKey]: value } as unknown as never,
+      updated: { [cellKey]: copiedPosition.value } as unknown as never,
       action: UpdateActions.COPY_PASTE,
       fromCellKey
     });

From 58beda751aaa1a86ce8048aec7b6af06de360cad Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Mon, 24 Aug 2020 14:35:08 -0500
Subject: [PATCH 29/79] Grouping story

---
 stories/demos/CommonFeatures.tsx |  14 +--
 stories/demos/Grouping.tsx       | 108 +++++++++++++++++++++
 stories/demos/LegacyGrouping.tsx | 156 -------------------------------
 stories/index.tsx                |   4 +-
 4 files changed, 111 insertions(+), 171 deletions(-)
 create mode 100644 stories/demos/Grouping.tsx
 delete mode 100644 stories/demos/LegacyGrouping.tsx

diff --git a/stories/demos/CommonFeatures.tsx b/stories/demos/CommonFeatures.tsx
index 08dda59616..309cf0d311 100644
--- a/stories/demos/CommonFeatures.tsx
+++ b/stories/demos/CommonFeatures.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useMemo } from 'react';
 import faker from 'faker';
 import { AutoSizer } from 'react-virtualized';
-import { groupBy as rowGrouper } from 'lodash';
 import DataGrid, { SelectColumn, Column, RowsUpdateEvent, SortDirection } from '../../src';
 import { TextEditor } from './components/Editors/TextEditor';
 import { SelectEditor } from './components/Editors/SelectEditor';
@@ -146,16 +145,11 @@ function getColumns(countries: string[]): readonly Column<Row, SummaryRow>[] {
       width: 100,
       formatter(props) {
         return <CurrencyFormatter value={props.row.budget} />;
-      },
-      groupFormatter({ childRows }) {
-        const totals = childRows.reduce((prev, { budget }) => prev + budget, 0);
-        return <CurrencyFormatter value={totals} />;
       }
     },
     {
       key: 'transaction',
-      name: 'Transaction type',
-      width: 200
+      name: 'Transaction type'
     },
     {
       key: 'account',
@@ -214,8 +208,6 @@ export default function CommonFeatures() {
   const [rows, setRows] = useState(createRows);
   const [[sortColumn, sortDirection], setSort] = useState<[string, SortDirection]>(['id', 'NONE']);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
-  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set());
-  const [groupBy] = useState(['country', 'transaction']);
 
   const countries = useMemo(() => {
     return [...new Set(rows.map(r => r.country))].sort();
@@ -296,10 +288,6 @@ export default function CommonFeatures() {
           sortDirection={sortDirection}
           onSort={handleSort}
           summaryRows={summaryRows}
-          groupBy={groupBy}
-          rowGrouper={rowGrouper}
-          expandedGroupIds={expandedGroupIds}
-          onExpandedGroupIdsChange={setExpandedGroupIds}
         />
       )}
     </AutoSizer>
diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
new file mode 100644
index 0000000000..d756d2e289
--- /dev/null
+++ b/stories/demos/Grouping.tsx
@@ -0,0 +1,108 @@
+import React, { useState } from 'react';
+import { AutoSizer } from 'react-virtualized';
+import { groupBy as rowGrouper } from 'lodash';
+import faker from 'faker';
+
+import DataGrid, { Column, Row, SelectColumn } from '../../src';
+
+interface Row {
+  id: number;
+  country: string;
+  year: number;
+  athlete: string;
+  gold: number;
+  silver: number;
+  bronze: number;
+}
+
+const columns: Column<Row>[] = [
+  SelectColumn,
+  {
+    key: 'country',
+    name: 'Country'
+  },
+  {
+    key: 'year',
+    name: 'Year'
+  },
+  {
+    key: 'athlete',
+    name: 'Athlete'
+  },
+  {
+    key: 'gold',
+    name: 'Gold',
+    groupFormatter({ childRows }) {
+      return <>{childRows.reduce((prev, { gold }) => prev + gold, 0)}</>;
+    }
+  },
+  {
+    key: 'silver',
+    name: 'Silver',
+    groupFormatter({ childRows }) {
+      return <>{childRows.reduce((prev, { silver }) => prev + silver, 0)}</>;
+    }
+  },
+  {
+    key: 'bronze',
+    name: 'Bronze',
+    groupFormatter({ childRows }) {
+      return <>{childRows.reduce((prev, { silver }) => prev + silver, 0)}</>;
+    }
+  },
+  {
+    key: 'total',
+    name: 'Total',
+    formatter({ row }) {
+      return <>{row.gold + row.silver + row.bronze}</>;
+    },
+    groupFormatter({ childRows }) {
+      return <>{childRows.reduce((prev, row) => prev + row.gold + row.silver + row.bronze, 0)}</>;
+    }
+  }
+];
+
+function createRows(): Row[] {
+  const rows: Row[] = [];
+  for (let i = 1; i < 10000; i++) {
+    rows.push({
+      id: i,
+      year: 2015 + faker.random.number(3),
+      country: faker.address.country(),
+      athlete: faker.name.findName(),
+      gold: faker.random.number(5),
+      silver: faker.random.number(5),
+      bronze: faker.random.number(5)
+    });
+  }
+
+  return rows.sort((r1, r2) => r1.country.localeCompare(r2.country));
+}
+
+export default function Grouping() {
+  const [rows] = useState(createRows);
+  const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
+  const [groupBy] = useState(['country', 'year']);
+  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set());
+
+  return (
+    <AutoSizer>
+      {({ height, width }) => (
+        <DataGrid
+          rowKey="id"
+          columns={columns}
+          rows={rows}
+          height={height}
+          width={width}
+          selectedRows={selectedRows}
+          onSelectedRowsChange={setSelectedRows}
+          groupBy={groupBy}
+          rowGrouper={rowGrouper}
+          expandedGroupIds={expandedGroupIds}
+          onExpandedGroupIdsChange={setExpandedGroupIds}
+          defaultColumnOptions={{ resizable: true }}
+        />
+      )}
+    </AutoSizer>
+  );
+}
diff --git a/stories/demos/LegacyGrouping.tsx b/stories/demos/LegacyGrouping.tsx
deleted file mode 100644
index d69eab1060..0000000000
--- a/stories/demos/LegacyGrouping.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { groupBy } from 'lodash';
-
-import DataGrid, { Column, Row, RowRendererProps } from '../../src';
-import './LegacyGrouping.less';
-
-interface RowGroupMetaData {
-  groupId: string;
-  groupKey: string;
-  treeDepth: number;
-  isExpanded: boolean;
-  columnGroupName: string;
-}
-
-interface RowGroup {
-  __metaData: RowGroupMetaData;
-}
-
-interface RowData {
-  id: number;
-  task: string;
-  complete: number;
-  priority: string;
-  issueType: string;
-}
-
-type GridRow = RowGroup | RowData;
-
-interface GroupRowRendererProps extends RowRendererProps<GridRow> {
-  onRowExpandToggle: (groupId: string) => void;
-}
-
-const columns: Column<GridRow>[] = [
-  {
-    key: 'id',
-    name: 'ID',
-    width: 80
-  },
-  {
-    key: 'task',
-    name: 'Title'
-  },
-  {
-    key: 'priority',
-    name: 'Priority'
-  },
-  {
-    key: 'issueType',
-    name: 'Issue Type'
-  },
-  {
-    key: 'complete',
-    name: '% Complete'
-  }
-];
-
-const groups = ['priority', 'issueType'];
-
-function createRows(): GridRow[] {
-  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: GridRow[], columnKeys: string[], expandedGroups: Set<string>, treeDepth = 0, parentId = '') {
-  if (columnKeys.length === 0) return rows;
-  const gridRows: GridRow[] = [];
-  const [columnKey, ...remainingColumnKeys] = columnKeys;
-  const groupedRows = groupBy(rows, columnKey);
-  const groupedKeys = Object.keys(groupedRows);
-
-  for (const groupKey of groupedKeys) {
-    const groupId = parentId ? `${parentId}_${groupKey}` : groupKey;
-    const isExpanded = expandedGroups.has(groupId);
-    const rowGroupHeader: GridRow = {
-      __metaData: {
-        groupId,
-        groupKey,
-        treeDepth,
-        isExpanded,
-        columnGroupName: columns.find(c => c.key === columnKey)!.name
-      }
-    };
-    gridRows.push(rowGroupHeader);
-    if (isExpanded) {
-      gridRows.push(...groupByColumn(groupedRows[groupKey], remainingColumnKeys, expandedGroups, treeDepth + 1, groupId));
-    }
-  }
-
-  return gridRows;
-}
-
-function isRowGroup(row: GridRow): row is RowGroup {
-  return typeof (row as RowGroup).__metaData !== 'undefined';
-}
-
-function GroupRowRenderer({ onRowExpandToggle, ...props }: GroupRowRendererProps) {
-  if (!isRowGroup(props.row)) {
-    return <Row {...props} />;
-  }
-
-  const { groupKey, isExpanded, treeDepth, columnGroupName, groupId } = props.row.__metaData;
-  return (
-    <div
-      className="rdg-row rdg-row-default-group"
-      tabIndex={0}
-      style={{ top: props.top }}
-    >
-      <span
-        className="rdg-row-expand-icon"
-        style={{ marginLeft: treeDepth * 20 }}
-        onClick={() => onRowExpandToggle(groupId)}
-      >
-        {isExpanded ? String.fromCharCode(9660) : String.fromCharCode(9658)}
-      </span>
-      <strong>{' '}{columnGroupName}: {groupKey}</strong>
-    </div>
-  );
-}
-
-export default function LegacyGrouping() {
-  const [rows] = useState(createRows);
-  const [expandedGroups, setExpandedGroups] = useState(() => new Set(['Low', 'Low_Epic']));
-
-  const gridRows = useMemo(() => {
-    return groupByColumn(rows, groups, expandedGroups);
-  }, [rows, expandedGroups]);
-
-  function onRowExpandToggle(groupId: string) {
-    const newExpandedGroups = new Set(expandedGroups);
-    if (newExpandedGroups.has(groupId)) {
-      newExpandedGroups.delete(groupId);
-    } else {
-      newExpandedGroups.add(groupId);
-    }
-    setExpandedGroups(newExpandedGroups);
-  }
-
-  return (
-    <DataGrid
-      columns={columns}
-      rows={gridRows}
-      height={650}
-      rowRenderer={p => <GroupRowRenderer {...p} onRowExpandToggle={onRowExpandToggle} />}
-    />
-  );
-}
diff --git a/stories/index.tsx b/stories/index.tsx
index 363d8f51c4..5c9addfdef 100644
--- a/stories/index.tsx
+++ b/stories/index.tsx
@@ -16,7 +16,7 @@ import CellNavigation from './demos/CellNavigation';
 import HeaderFilters from './demos/HeaderFilters';
 import ColumnsReordering from './demos/ColumnsReordering';
 import RowsReordering from './demos/RowsReordering';
-import LegacyGrouping from './demos/LegacyGrouping';
+import Grouping from './demos/Grouping';
 
 storiesOf('Demos', module)
   .add('Common Features', () => <CommonFeatures />)
@@ -31,4 +31,4 @@ storiesOf('Demos', module)
   .add('Header Filters', () => <HeaderFilters />)
   .add('Columns Reordering', () => <ColumnsReordering />)
   .add('Rows Reordering', () => <RowsReordering />)
-  .add('Legacy Grouping', () => <LegacyGrouping />);
+  .add('Grouping', () => <Grouping />);

From 0142a4dab65860153693395f65eacab0295f3a4e Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Mon, 24 Aug 2020 16:54:01 -0500
Subject: [PATCH 30/79] Add select to choose group by field

---
 stories/demos/Grouping.tsx | 74 +++++++++++++++++++++++++++-----------
 1 file changed, 53 insertions(+), 21 deletions(-)

diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index d756d2e289..63ad9dfc1b 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { AutoSizer } from 'react-virtualized';
 import { groupBy as rowGrouper } from 'lodash';
+import Select from 'react-select';
 import faker from 'faker';
 
 import DataGrid, { Column, Row, SelectColumn } from '../../src';
@@ -9,12 +10,15 @@ interface Row {
   id: number;
   country: string;
   year: number;
+  sport: string;
   athlete: string;
   gold: number;
   silver: number;
   bronze: number;
 }
 
+const sports = ['Swimming', 'Gymnastics', 'Speed Skating', 'Cross Country Skiing', 'Short-Track Speed Skating', 'Diving', 'Cycling', 'Biathlon', 'Alpine Skiing', 'Ski Jumping', 'Nordic Combined', 'Athletics', 'Table Tennis', 'Tennis', 'Synchronized Swimming', 'Shooting', 'Rowing', 'Fencing', 'Equestrian', 'Canoeing', 'Bobsleigh', 'Badminton', 'Archery', 'Wrestling', 'Weightlifting', 'Waterpolo', 'Wrestling', 'Weightlifting'];
+
 const columns: Column<Row>[] = [
   SelectColumn,
   {
@@ -25,6 +29,10 @@ const columns: Column<Row>[] = [
     key: 'year',
     name: 'Year'
   },
+  {
+    key: 'sport',
+    name: 'Sport'
+  },
   {
     key: 'athlete',
     name: 'Athlete'
@@ -69,6 +77,7 @@ function createRows(): Row[] {
       id: i,
       year: 2015 + faker.random.number(3),
       country: faker.address.country(),
+      sport: sports[faker.random.number(sports.length)],
       athlete: faker.name.findName(),
       gold: faker.random.number(5),
       silver: faker.random.number(5),
@@ -76,33 +85,56 @@ function createRows(): Row[] {
     });
   }
 
-  return rows.sort((r1, r2) => r1.country.localeCompare(r2.country));
+  return rows.sort((r1, r2) => r2.country.localeCompare(r1.country));
 }
 
+const options = [
+  { value: 'country', label: 'Country' },
+  { value: 'year', label: 'Year' },
+  { value: 'sport', label: 'Sport' }
+];
+
 export default function Grouping() {
   const [rows] = useState(createRows);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
-  const [groupBy] = useState(['country', 'year']);
-  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set());
+  const [selectedOptions, setSelectedOptions] = useState([options[0], options[1]]);
+  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set(['United States of America', 'United States of America__2015']));
+
+  const groupBy = useMemo(() => selectedOptions === null ? undefined : selectedOptions.map(o => o.value), [selectedOptions]);
 
   return (
-    <AutoSizer>
-      {({ height, width }) => (
-        <DataGrid
-          rowKey="id"
-          columns={columns}
-          rows={rows}
-          height={height}
-          width={width}
-          selectedRows={selectedRows}
-          onSelectedRowsChange={setSelectedRows}
-          groupBy={groupBy}
-          rowGrouper={rowGrouper}
-          expandedGroupIds={expandedGroupIds}
-          onExpandedGroupIdsChange={setExpandedGroupIds}
-          defaultColumnOptions={{ resizable: true }}
+    <>
+      <label style={{ width: 400, marginBottom: 24 }}>
+        Group by
+        <Select
+          value={selectedOptions}
+          onChange={options => {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            setSelectedOptions(options as any);
+            setExpandedGroupIds(new Set());
+          }}
+          options={options}
+          isMulti
         />
-      )}
-    </AutoSizer>
+      </label>
+      <AutoSizer>
+        {({ height, width }) => (
+          <DataGrid
+            rowKey="id"
+            columns={columns}
+            rows={rows}
+            height={height - 85}
+            width={width}
+            selectedRows={selectedRows}
+            onSelectedRowsChange={setSelectedRows}
+            groupBy={groupBy}
+            rowGrouper={rowGrouper}
+            expandedGroupIds={expandedGroupIds}
+            onExpandedGroupIdsChange={setExpandedGroupIds}
+            defaultColumnOptions={{ resizable: true }}
+          />
+        )}
+      </AutoSizer>
+    </>
   );
 }

From 73a4ce9b9bab484ded31b1a89e0dea01476c579f Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 25 Aug 2020 05:44:51 -0500
Subject: [PATCH 31/79] Use SortableSelect

---
 package.json               |  1 +
 stories/demos/Grouping.tsx | 40 +++++++++++++++++++++++++++++++++-----
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 3c0e21dfa3..b1b473ae45 100644
--- a/package.json
+++ b/package.json
@@ -84,6 +84,7 @@
     "react-dom": "^16.13.1",
     "react-popper": "^2.2.3",
     "react-select": "^3.1.0",
+    "react-sortable-hoc": "^1.11.0",
     "react-virtualized": "^9.21.2",
     "ts-jest": "^26.1.4",
     "ts-loader": "^8.0.2",
diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index 63ad9dfc1b..d91a4504c4 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -1,7 +1,8 @@
 import React, { useState, useMemo } from 'react';
 import { AutoSizer } from 'react-virtualized';
 import { groupBy as rowGrouper } from 'lodash';
-import Select from 'react-select';
+import Select, { components } from 'react-select';
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import faker from 'faker';
 
 import DataGrid, { Column, Row, SelectColumn } from '../../src';
@@ -88,10 +89,23 @@ function createRows(): Row[] {
   return rows.sort((r1, r2) => r2.country.localeCompare(r1.country));
 }
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SortableMultiValue = SortableElement((props: any) => {
+  const onMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const innerProps = { onMouseDown };
+  return <components.MultiValue {...props} innerProps={innerProps} />;
+});
+
+const SortableSelect = SortableContainer(Select);
+
 const options = [
   { value: 'country', label: 'Country' },
   { value: 'year', label: 'Year' },
-  { value: 'sport', label: 'Sport' }
+  { value: 'sport', label: 'Sport' },
+  { value: 'athlete', label: 'athlete' }
 ];
 
 export default function Grouping() {
@@ -102,11 +116,24 @@ export default function Grouping() {
 
   const groupBy = useMemo(() => selectedOptions === null ? undefined : selectedOptions.map(o => o.value), [selectedOptions]);
 
+  function onSortEnd({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) {
+    const newOptions = [...selectedOptions];
+    newOptions.splice(newIndex < 0 ? newOptions.length + newIndex : newIndex, 0, newOptions.splice(oldIndex, 1)[0]);
+    setSelectedOptions(newOptions);
+  }
+
   return (
     <>
       <label style={{ width: 400, marginBottom: 24 }}>
-        Group by
-        <Select
+        <b>Group by</b>
+        <SortableSelect
+          // react-sortable-hoc props
+          axis="xy"
+          onSortEnd={onSortEnd}
+          distance={4}
+          getHelperDimensions={({ node }) => node.getBoundingClientRect()}
+          // react-select props:
+          isMulti
           value={selectedOptions}
           onChange={options => {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -114,7 +141,10 @@ export default function Grouping() {
             setExpandedGroupIds(new Set());
           }}
           options={options}
-          isMulti
+          components={{
+            MultiValue: SortableMultiValue
+          }}
+          closeMenuOnSelect={false}
         />
       </label>
       <AutoSizer>

From 0b1c8d238535b66c8a0a40df7029c7d1e7f7338b Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 25 Aug 2020 06:05:02 -0500
Subject: [PATCH 32/79] Cleanup

---
 stories/demos/Grouping.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index d91a4504c4..835771c75b 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -18,6 +18,11 @@ interface Row {
   bronze: number;
 }
 
+interface Option {
+  value: string;
+  label: string;
+}
+
 const sports = ['Swimming', 'Gymnastics', 'Speed Skating', 'Cross Country Skiing', 'Short-Track Speed Skating', 'Diving', 'Cycling', 'Biathlon', 'Alpine Skiing', 'Ski Jumping', 'Nordic Combined', 'Athletics', 'Table Tennis', 'Tennis', 'Synchronized Swimming', 'Shooting', 'Rowing', 'Fencing', 'Equestrian', 'Canoeing', 'Bobsleigh', 'Badminton', 'Archery', 'Wrestling', 'Weightlifting', 'Waterpolo', 'Wrestling', 'Weightlifting'];
 
 const columns: Column<Row>[] = [
@@ -111,15 +116,17 @@ const options = [
 export default function Grouping() {
   const [rows] = useState(createRows);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
-  const [selectedOptions, setSelectedOptions] = useState([options[0], options[1]]);
+  const [selectedOptions, setSelectedOptions] = useState<Option[] | undefined>([options[0], options[1]]);
   const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set(['United States of America', 'United States of America__2015']));
 
-  const groupBy = useMemo(() => selectedOptions === null ? undefined : selectedOptions.map(o => o.value), [selectedOptions]);
+  const groupBy = useMemo(() => selectedOptions?.map(o => o.value), [selectedOptions]);
 
   function onSortEnd({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) {
+    if (!selectedOptions) return;
     const newOptions = [...selectedOptions];
     newOptions.splice(newIndex < 0 ? newOptions.length + newIndex : newIndex, 0, newOptions.splice(oldIndex, 1)[0]);
     setSelectedOptions(newOptions);
+    setExpandedGroupIds(new Set());
   }
 
   return (
@@ -132,7 +139,7 @@ export default function Grouping() {
           onSortEnd={onSortEnd}
           distance={4}
           getHelperDimensions={({ node }) => node.getBoundingClientRect()}
-          // react-select props:
+          // react-select props
           isMulti
           value={selectedOptions}
           onChange={options => {

From 11c10d0fab1ce7e8c075d3741605679372b05d86 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 25 Aug 2020 07:23:54 -0500
Subject: [PATCH 33/79] Improve types

---
 stories/demos/Grouping.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index 835771c75b..5aec112265 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -1,11 +1,12 @@
 import React, { useState, useMemo } from 'react';
 import { AutoSizer } from 'react-virtualized';
 import { groupBy as rowGrouper } from 'lodash';
-import Select, { components } from 'react-select';
+import Select, { components, ValueType, OptionsType, Props as SelectProps } from 'react-select';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc';
 import faker from 'faker';
 
 import DataGrid, { Column, Row, SelectColumn } from '../../src';
+import Option from 'react-select/src/components/Option';
 
 interface Row {
   id: number;
@@ -104,9 +105,9 @@ const SortableMultiValue = SortableElement((props: any) => {
   return <components.MultiValue {...props} innerProps={innerProps} />;
 });
 
-const SortableSelect = SortableContainer(Select);
+const SortableSelect = SortableContainer<SelectProps<Option>>(Select);
 
-const options = [
+const options: OptionsType<Option> = [
   { value: 'country', label: 'Country' },
   { value: 'year', label: 'Year' },
   { value: 'sport', label: 'Sport' },
@@ -116,14 +117,14 @@ const options = [
 export default function Grouping() {
   const [rows] = useState(createRows);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
-  const [selectedOptions, setSelectedOptions] = useState<Option[] | undefined>([options[0], options[1]]);
+  const [selectedOptions, setSelectedOptions] = useState<ValueType<Option>>([options[0], options[1]]);
   const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set(['United States of America', 'United States of America__2015']));
 
-  const groupBy = useMemo(() => selectedOptions?.map(o => o.value), [selectedOptions]);
+  const groupBy = useMemo(() => Array.isArray(selectedOptions) ? selectedOptions.map((o: Option) => o.value) : undefined, [selectedOptions]);
 
   function onSortEnd({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) {
-    if (!selectedOptions) return;
-    const newOptions = [...selectedOptions];
+    if (!Array.isArray(selectedOptions)) return;
+    const newOptions: Option[] = [...selectedOptions];
     newOptions.splice(newIndex < 0 ? newOptions.length + newIndex : newIndex, 0, newOptions.splice(oldIndex, 1)[0]);
     setSelectedOptions(newOptions);
     setExpandedGroupIds(new Set());
@@ -132,7 +133,7 @@ export default function Grouping() {
   return (
     <>
       <label style={{ width: 400, marginBottom: 24 }}>
-        <b>Group by</b>
+        <b>Group by</b> (drag to sort)
         <SortableSelect
           // react-sortable-hoc props
           axis="xy"
@@ -143,8 +144,7 @@ export default function Grouping() {
           isMulti
           value={selectedOptions}
           onChange={options => {
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            setSelectedOptions(options as any);
+            setSelectedOptions(options);
             setExpandedGroupIds(new Set());
           }}
           options={options}

From 0b7fd8ce30156aca85625ed1a4d05c3d687c161e Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 25 Aug 2020 09:46:21 -0500
Subject: [PATCH 34/79] Fic type

---
 stories/demos/Grouping.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index f53de46bb0..b016e805d3 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -6,7 +6,6 @@ import faker from 'faker';
 
 import DataGrid, { Column, Row, SelectColumn } from '../../src';
 import './Grouping.less';
-import Option from 'react-select/src/components/Option';
 
 interface Row {
   id: number;

From 984fe09bb82d311bb143f2e92b551205052fa5d8 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 25 Aug 2020 15:16:39 -0500
Subject: [PATCH 35/79] Address comments

---
 stories/demos/Grouping.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index b016e805d3..c5c0c44d1b 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -83,7 +83,7 @@ function createRows(): Row[] {
       id: i,
       year: 2015 + faker.random.number(3),
       country: faker.address.country(),
-      sport: sports[faker.random.number(sports.length)],
+      sport: sports[faker.random.number(sports.length - 1)],
       athlete: faker.name.findName(),
       gold: faker.random.number(5),
       silver: faker.random.number(5),
@@ -117,7 +117,7 @@ export default function Grouping() {
   const [rows] = useState(createRows);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
   const [selectedOptions, setSelectedOptions] = useState<ValueType<Option>>([options[0], options[1]]);
-  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(new Set(['United States of America', 'United States of America__2015']));
+  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(() => new Set(['United States of America', 'United States of America__2015']));
 
   const groupBy = useMemo(() => Array.isArray(selectedOptions) ? selectedOptions.map((o: Option) => o.value) : undefined, [selectedOptions]);
 

From 26a33dd585e911b57120be8f62eab3744dd0404d Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 08:08:05 -0500
Subject: [PATCH 36/79] useFocusRef

---
 src/formatters/ToggleGroupFormatter.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index a2e25b4580..c6f27d14ea 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -1,5 +1,6 @@
-import React, { useRef, useLayoutEffect } from 'react';
+import React from 'react';
 import { GroupFormatterProps } from '../types';
+import { useFocusRef } from '../hooks';
 
 export function ToggleGroupedFormatter<R, SR>({
   groupKey,
@@ -7,11 +8,7 @@ export function ToggleGroupedFormatter<R, SR>({
   isCellSelected,
   toggleGroup
 }: GroupFormatterProps<R, SR>) {
-  const cellRef = useRef<HTMLDivElement>(null);
-  useLayoutEffect(() => {
-    if (!isCellSelected) return;
-    cellRef.current?.focus();
-  }, [isCellSelected]);
+  const cellRef = useFocusRef<HTMLDivElement>(isCellSelected);
 
   function handleKeyDown({ key }: React.KeyboardEvent<HTMLSpanElement>) {
     if (key === 'Enter') {

From ed7b1317ba57f01f8599303de0b350d9e7969b11 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 26 Aug 2020 10:13:05 -0500
Subject: [PATCH 37/79] Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/DataGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 7add3ab22d..b578459c60 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -128,7 +128,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   onFiltersChange?: (filters: Filters) => void;
   defaultColumnOptions?: DefaultColumnOptions<R, SR>;
   groupBy?: readonly string[];
-  rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<R[]>;
+  rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<readonly R[]>;
   expandedGroupIds?: Set<unknown>;
   onExpandedGroupIdsChange?: (expandedGroupIds: Set<unknown>) => void;
 

From 49fa7abe8666efd9578e35c03764adcd2a3485ad Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 26 Aug 2020 10:13:22 -0500
Subject: [PATCH 38/79] Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/DataGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index b578459c60..6623a15137 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -129,7 +129,7 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   defaultColumnOptions?: DefaultColumnOptions<R, SR>;
   groupBy?: readonly string[];
   rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<readonly R[]>;
-  expandedGroupIds?: Set<unknown>;
+  expandedGroupIds?: ReadonlySet<unknown>;
   onExpandedGroupIdsChange?: (expandedGroupIds: Set<unknown>) => void;
 
   /**

From 917a906e6921e6b0bdae836528a49aee1152d249 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 26 Aug 2020 10:13:51 -0500
Subject: [PATCH 39/79] Update src/types.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/types.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/types.ts b/src/types.ts
index 814af22a42..1ccbd3525f 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -251,8 +251,8 @@ export interface Dictionary<T> {
 }
 
 export type GroupByDictionary<TRow> = Dictionary<{
-  childRows: TRow[];
-  childGroups: TRow[] | GroupByDictionary<TRow>;
+  childRows: readonly TRow[];
+  childGroups: readonly TRow[] | GroupByDictionary<TRow>;
   startRowIndex: number;
 }>;
 

From d19914d3a424e7ee8f401a33dfb80bf41b99fda0 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 26 Aug 2020 10:14:03 -0500
Subject: [PATCH 40/79] Update src/types.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/types.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types.ts b/src/types.ts
index 1ccbd3525f..1707db8e35 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -258,7 +258,7 @@ export type GroupByDictionary<TRow> = Dictionary<{
 
 export interface GroupRow<TRow> {
   __isGroup: true;
-  childRows: TRow[];
+  childRows: readonly TRow[];
   id: string;
   key: unknown;
   parentKey: unknown;

From 1618d8b60ff9277ed75896f25fd25303e288aaa5 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 10:28:43 -0500
Subject: [PATCH 41/79] Fix types

---
 src/hooks/useViewportRows.ts | 8 ++++----
 src/types.ts                 | 8 +++-----
 stories/demos/Grouping.tsx   | 2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 09510e3812..eb516fcb06 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -9,8 +9,8 @@ interface ViewportRowsArgs<R, SR> {
   clientHeight: number;
   scrollTop: number;
   groupBy: readonly string[];
-  rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<R[]>;
-  expandedGroupIds?: Set<unknown>;
+  rowGrouper?: (rows: readonly R[], columnKey: string) => Dictionary<readonly R[]>;
+  expandedGroupIds?: ReadonlySet<unknown>;
 }
 
 export function useViewportRows<R, SR>({
@@ -46,14 +46,14 @@ export function useViewportRows<R, SR>({
   const rows = useMemo(() => {
     if (!groupedRows) return rawRows;
 
-    const expandGroup = (rows: GroupByDictionary<R> | R[], parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
+    const expandGroup = (rows: GroupByDictionary<R> | readonly R[], parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
       if (Array.isArray(rows)) return rows;
       const flattenedRows: Array<R | GroupRow<R>> = [];
       Object.keys(rows).forEach((key, posInSet, keys) => {
         // TODO: should users have control over the gerenated key?
         const id = parentKey !== undefined ? `${parentKey}__${key}` : key;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
-        const { childRows, childGroups, startRowIndex } = rows[key];
+        const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[key]; // TODO: why is it failing?
         flattenedRows.push({
           id,
           key,
diff --git a/src/types.ts b/src/types.ts
index 1707db8e35..b0a0b3e769 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -100,7 +100,7 @@ export interface SummaryFormatterProps<TSummaryRow, TRow = any> {
 export interface GroupFormatterProps<TRow, TSummaryRow = unknown> {
   groupKey: unknown;
   column: CalculatedColumn<TRow, TSummaryRow>;
-  childRows: TRow[];
+  childRows: readonly TRow[];
   isExpanded: boolean;
   isCellSelected: boolean;
   isRowSelected: boolean;
@@ -201,7 +201,7 @@ export interface GroupRowRendererProps<TRow, TSummaryRow = unknown> extends Omit
   id: string;
   groupKey: unknown;
   viewportColumns: readonly CalculatedColumn<TRow, TSummaryRow>[];
-  childRows: TRow[];
+  childRows: readonly TRow[];
   rowIdx: number;
   lastFrozenColumnIndex: number;
   top: number;
@@ -246,9 +246,7 @@ export interface SelectRowEvent {
   isShiftClick: boolean;
 }
 
-export interface Dictionary<T> {
-  [index: string]: T;
-}
+export type Dictionary<T> = Record<string, T>;
 
 export type GroupByDictionary<TRow> = Dictionary<{
   childRows: readonly TRow[];
diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index c5c0c44d1b..a520c02174 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -117,7 +117,7 @@ export default function Grouping() {
   const [rows] = useState(createRows);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
   const [selectedOptions, setSelectedOptions] = useState<ValueType<Option>>([options[0], options[1]]);
-  const [expandedGroupIds, setExpandedGroupIds] = useState<Set<unknown>>(() => new Set(['United States of America', 'United States of America__2015']));
+  const [expandedGroupIds, setExpandedGroupIds] = useState<ReadonlySet<unknown>>(() => new Set(['United States of America', 'United States of America__2015']));
 
   const groupBy = useMemo(() => Array.isArray(selectedOptions) ? selectedOptions.map((o: Option) => o.value) : undefined, [selectedOptions]);
 

From c53fd7a829f4be7a061992182a7ed2657690c6c6 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 10:30:47 -0500
Subject: [PATCH 42/79] Add stopPropagation helper

---
 src/Columns.tsx       | 3 ++-
 src/utils/domUtils.ts | 4 ++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/Columns.tsx b/src/Columns.tsx
index 009f441aa0..889400e054 100644
--- a/src/Columns.tsx
+++ b/src/Columns.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { SelectCellFormatter } from './formatters';
 import { Column } from './types';
+import { stopPropagation } from './utils';
 
 export const SELECT_COLUMN_KEY = 'select-row';
 
@@ -42,7 +43,7 @@ export const SelectColumn: Column<any, any> = {
         value={props.isRowSelected}
         onChange={props.onRowSelectionChange}
         // Stop propagation to prevent row selection
-        onClick={event => event.stopPropagation()}
+        onClick={stopPropagation}
       />
     );
   },
diff --git a/src/utils/domUtils.ts b/src/utils/domUtils.ts
index 411ac6fa56..6a79fd6878 100644
--- a/src/utils/domUtils.ts
+++ b/src/utils/domUtils.ts
@@ -2,6 +2,10 @@ export function preventDefault(event: React.SyntheticEvent) {
   event.preventDefault();
 }
 
+export function stopPropagation(event: React.SyntheticEvent) {
+  event.stopPropagation();
+}
+
 export function wrapEvent<E extends React.SyntheticEvent>(ourHandler: React.EventHandler<E>, theirHandler: React.EventHandler<E> | undefined) {
   if (theirHandler === undefined) return ourHandler;
 

From 4ea5d71981dd5195d9b9f69976a79ffcdfe703df Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 10:32:56 -0500
Subject: [PATCH 43/79] Move onExpandedGroupIdsChange check outside

---
 src/DataGrid.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 6623a15137..82a0ab384a 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -355,8 +355,9 @@ function DataGrid<R, K extends keyof R, SR>({
   });
 
   useEffect(() => {
-    function toggleGroup(expandedGroupId: unknown) {
-      if (!onExpandedGroupIdsChange) return;
+    if (!onExpandedGroupIdsChange) return;
+
+    const toggleGroup = (expandedGroupId: unknown) => {
       const newExpandedGroupIds = new Set(expandedGroupIds);
       if (newExpandedGroupIds.has(expandedGroupId)) {
         newExpandedGroupIds.delete(expandedGroupId);
@@ -364,7 +365,7 @@ function DataGrid<R, K extends keyof R, SR>({
         newExpandedGroupIds.add(expandedGroupId);
       }
       onExpandedGroupIdsChange(newExpandedGroupIds);
-    }
+    };
 
     return eventBus.subscribe('TOGGLE_GROUP', toggleGroup);
   }, [eventBus, expandedGroupIds, onExpandedGroupIdsChange]);

From dce4652797b6a9f9db50779e69925fc69cad329e Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 10:38:56 -0500
Subject: [PATCH 44/79] Cleanup

---
 stories/demos/Grouping.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index a520c02174..074c26fe03 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -117,7 +117,7 @@ export default function Grouping() {
   const [rows] = useState(createRows);
   const [selectedRows, setSelectedRows] = useState(() => new Set<number>());
   const [selectedOptions, setSelectedOptions] = useState<ValueType<Option>>([options[0], options[1]]);
-  const [expandedGroupIds, setExpandedGroupIds] = useState<ReadonlySet<unknown>>(() => new Set(['United States of America', 'United States of America__2015']));
+  const [expandedGroupIds, setExpandedGroupIds] = useState(() => new Set<unknown>(['United States of America', 'United States of America__2015']));
 
   const groupBy = useMemo(() => Array.isArray(selectedOptions) ? selectedOptions.map((o: Option) => o.value) : undefined, [selectedOptions]);
 

From 44e7da4a79f25041406ec921c2d4551c65646732 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 12:40:05 -0500
Subject: [PATCH 45/79] Add groupFocusable and remove __isGroup field

---
 src/Columns.tsx                 |  3 ++-
 src/DataGrid.tsx                | 29 +++++++++++++++++------------
 src/hooks/useViewportColumns.ts |  9 +++------
 src/hooks/useViewportRows.ts    | 25 +++++++++++++++++--------
 src/types.ts                    |  4 ++--
 src/utils/index.ts              |  6 ------
 src/utils/selectedCellUtils.ts  |  4 ++--
 7 files changed, 43 insertions(+), 37 deletions(-)

diff --git a/src/Columns.tsx b/src/Columns.tsx
index 889400e054..a9fc95dc7b 100644
--- a/src/Columns.tsx
+++ b/src/Columns.tsx
@@ -48,6 +48,7 @@ export const SelectColumn: Column<any, any> = {
     );
   },
   formatterOptions: {
-    focusable: true
+    focusable: true,
+    groupFocusable: true
   }
 };
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 82a0ab384a..289b3d211a 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -24,8 +24,7 @@ import {
   isSelectedCellEditable,
   canExitGrid,
   isCtrlKeyHeldDown,
-  isDefaultCellInput,
-  isGroupRow
+  isDefaultCellInput
 } from './utils';
 
 import {
@@ -270,7 +269,7 @@ function DataGrid<R, K extends keyof R, SR>({
     rowGrouper
   });
 
-  const { rowOverscanStartIdx, rowOverscanEndIdx, rows, rowsCount } = useViewportRows({
+  const { rowOverscanStartIdx, rowOverscanEndIdx, rows, rowsCount, isGroupRow } = useViewportRows({
     rawRows,
     groupBy,
     rowGrouper,
@@ -295,15 +294,8 @@ function DataGrid<R, K extends keyof R, SR>({
     if (selectedPosition === prevSelectedPosition.current || selectedPosition.mode === 'EDIT' || !isCellWithinBounds(selectedPosition)) return;
     prevSelectedPosition.current = selectedPosition;
     scrollToCell(selectedPosition);
+    if (isFormatterFocusable()) return;
 
-    const focusable = columns[selectedPosition.idx]?.formatterOptions?.focusable;
-    if (
-      (typeof focusable === 'function' && focusable(rows[selectedPosition.rowIdx]))
-      || focusable === true
-    ) {
-      // Let the formatter handle focus
-      return;
-    }
     focusSinkRef.current!.focus();
   });
 
@@ -640,7 +632,7 @@ function DataGrid<R, K extends keyof R, SR>({
 
   function isCellEditable(position: Position): boolean {
     return isCellWithinBounds(position)
-      && isSelectedCellEditable<R, SR>({ columns, rows, selectedPosition: position, onCheckCellIsEditable });
+      && isSelectedCellEditable<R, SR>({ columns, rows, selectedPosition: position, onCheckCellIsEditable, isGroupRow });
   }
 
   function selectCell(position: Position, enableEditor = false): void {
@@ -780,6 +772,19 @@ function DataGrid<R, K extends keyof R, SR>({
     selectCell(nextPosition);
   }
 
+  function isFormatterFocusable() {
+    const formatterOptions = columns[selectedPosition.idx]?.formatterOptions;
+    const row = rows[selectedPosition.rowIdx];
+    const groupFocusable = formatterOptions?.groupFocusable;
+    const focusable = formatterOptions?.focusable;
+
+    if (isGroupRow(row)) {
+      return (typeof groupFocusable === 'function' && groupFocusable(row)) || groupFocusable === true;
+    }
+
+    return (typeof focusable === 'function' && focusable(row)) || focusable === true;
+  }
+
   function getDraggedOverCellIdx(currentRowIdx: number): number | undefined {
     if (draggedOverRowIdx === undefined) return;
     const { rowIdx } = selectedPosition;
diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
index 4105355ed7..9f1d6dda53 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { CalculatedColumn, GroupRow } from '../types';
-import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns, isGroupRow } from '../utils';
+import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns } from '../utils';
 import { DataGridProps } from '../DataGrid';
 import { SELECT_COLUMN_KEY } from '../Columns';
 import { ValueFormatter, ToggleGroupedFormatter } from '../formatters';
@@ -46,11 +46,8 @@ export function useViewportColumns<R, K extends keyof R, SR>({
         rowGroup: true,
         groupFormatter: c.groupFormatter ?? ToggleGroupedFormatter,
         formatterOptions: {
-          focusable(row: R | GroupRow<R>) {
-            if (isGroupRow(row)) {
-              return row.level === index;
-            }
-            return false;
+          groupFocusable(row: GroupRow<R>) {
+            return row.level === index;
           }
         }
       }))
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index eb516fcb06..e5cd8e025d 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -43,8 +43,9 @@ export function useViewportRows<R, SR>({
     return groupRows(rawRows, groupBy, 0);
   }, [groupBy, rowGrouper, rawRows]);
 
-  const rows = useMemo(() => {
-    if (!groupedRows) return rawRows;
+  const [rows, allGroupRows] = useMemo(() => {
+    const allGroupRows = new Set<unknown>();
+    if (!groupedRows) return [rawRows, allGroupRows];
 
     const expandGroup = (rows: GroupByDictionary<R> | readonly R[], parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
       if (Array.isArray(rows)) return rows;
@@ -54,7 +55,8 @@ export function useViewportRows<R, SR>({
         const id = parentKey !== undefined ? `${parentKey}__${key}` : key;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
         const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[key]; // TODO: why is it failing?
-        flattenedRows.push({
+
+        const groupRow: GroupRow<R> = {
           id,
           key,
           parentKey,
@@ -63,9 +65,11 @@ export function useViewportRows<R, SR>({
           level,
           posInSet,
           startRowIndex,
-          setSize: keys.length,
-          __isGroup: true
-        });
+          setSize: keys.length
+        };
+        flattenedRows.push(groupRow);
+        allGroupRows.add(groupRow);
+
         if (isExpanded) {
           flattenedRows.push(...expandGroup(childGroups, key, level + 1));
         }
@@ -74,9 +78,13 @@ export function useViewportRows<R, SR>({
       return flattenedRows;
     };
 
-    return expandGroup(groupedRows, undefined, 0);
+    return [expandGroup(groupedRows, undefined, 0), allGroupRows];
   }, [expandedGroupIds, groupedRows, rawRows]);
 
+  const isGroupRow = <R>(row: unknown): row is GroupRow<R> => {
+    return allGroupRows.has(row);
+  };
+
   const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
     clientHeight,
     rowHeight,
@@ -88,6 +96,7 @@ export function useViewportRows<R, SR>({
     rowOverscanStartIdx,
     rowOverscanEndIdx,
     rows,
-    rowsCount
+    rowsCount,
+    isGroupRow
   };
 }
diff --git a/src/types.ts b/src/types.ts
index b0a0b3e769..7d2504e474 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -22,7 +22,8 @@ export interface Column<TRow, TSummaryRow = unknown> {
   /** Formatter to be used to render the cell content */
   formatter?: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;
   formatterOptions?: {
-    focusable?: boolean | ((row: TRow | GroupRow<TRow>) => boolean);
+    focusable?: boolean | ((row: TRow) => boolean);
+    groupFocusable?: boolean | ((row: GroupRow<TRow>) => boolean);
   };
   /** Formatter to be used to render the summary cell content */
   summaryFormatter?: React.ComponentType<SummaryFormatterProps<TSummaryRow, TRow>>;
@@ -255,7 +256,6 @@ export type GroupByDictionary<TRow> = Dictionary<{
 }>;
 
 export interface GroupRow<TRow> {
-  __isGroup: true;
   childRows: readonly TRow[];
   id: string;
   key: unknown;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3bbbbf6651..07f4f17083 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,15 +1,9 @@
-import { GroupRow } from '../types';
-
 export * from './domUtils';
 export * from './columnUtils';
 export * from './viewportUtils';
 export * from './keyboardUtils';
 export * from './selectedCellUtils';
 
-export function isGroupRow<R>(row: R | GroupRow<R>): row is GroupRow<R> {
-  return (row as GroupRow<R>).__isGroup === true;
-}
-
 export function assertIsValidKey<R>(key: unknown): asserts key is keyof R {
   if (key === undefined) {
     throw new Error('Please specify the rowKey prop to use selection');
diff --git a/src/utils/selectedCellUtils.ts b/src/utils/selectedCellUtils.ts
index 4cd496c7ee..3a900fe8a2 100644
--- a/src/utils/selectedCellUtils.ts
+++ b/src/utils/selectedCellUtils.ts
@@ -1,16 +1,16 @@
 import { CellNavigationMode } from '../enums';
 import { canEdit } from './columnUtils';
 import { CalculatedColumn, Position, GroupRow } from '../types';
-import { isGroupRow } from '.';
 
 interface IsSelectedCellEditableOpts<R, SR> {
   selectedPosition: Position;
   columns: readonly CalculatedColumn<R, SR>[];
   rows: readonly (R | GroupRow<R>)[];
   onCheckCellIsEditable?: (arg: { row: R; column: CalculatedColumn<R, SR> } & Position) => boolean;
+  isGroupRow: (row: R | GroupRow<R>) => row is GroupRow<R>;
 }
 
-export function isSelectedCellEditable<R, SR>({ selectedPosition, columns, rows, onCheckCellIsEditable }: IsSelectedCellEditableOpts<R, SR>): boolean {
+export function isSelectedCellEditable<R, SR>({ selectedPosition, columns, rows, onCheckCellIsEditable, isGroupRow }: IsSelectedCellEditableOpts<R, SR>): boolean {
   const column = columns[selectedPosition.idx];
   const row = rows[selectedPosition.rowIdx];
   if (column.rowGroup || isGroupRow(row)) return false;

From db1b1ff59aa243148d6614c5127408742ba87cb5 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 12:51:27 -0500
Subject: [PATCH 46/79] fix dependencies

---
 src/DataGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 289b3d211a..3431d00485 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -340,7 +340,7 @@ function DataGrid<R, K extends keyof R, SR>({
     };
 
     return eventBus.subscribe('SELECT_ROW', handleRowSelectionChange);
-  }, [rows, eventBus, onSelectedRowsChange, rowKey, selectedRows]);
+  }, [eventBus, isGroupRow, onSelectedRowsChange, rowKey, rows, selectedRows]);
 
   useEffect(() => {
     return eventBus.subscribe('SELECT_CELL', selectCell);

From 66430ea4858ab76a34eeb50b883ff34833acf9e1 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 16:35:53 -0500
Subject: [PATCH 47/79] Fix expandedGroupId

---
 src/hooks/useViewportRows.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index e5cd8e025d..d81d449365 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -71,7 +71,7 @@ export function useViewportRows<R, SR>({
         allGroupRows.add(groupRow);
 
         if (isExpanded) {
-          flattenedRows.push(...expandGroup(childGroups, key, level + 1));
+          flattenedRows.push(...expandGroup(childGroups, id, level + 1));
         }
       });
 

From df7848754bc1bfb2ba46f2174bd5f4248f72cac2 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 26 Aug 2020 16:43:29 -0500
Subject: [PATCH 48/79] Fix row navigation

---
 src/DataGrid.tsx             |  4 ++--
 src/hooks/useViewportRows.ts | 12 ++++++------
 src/types.ts                 |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 3431d00485..3d235bf4e5 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -701,7 +701,7 @@ function DataGrid<R, K extends keyof R, SR>({
       let parentRowIdx = -1;
       for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) {
         const parentRow = rows[i];
-        if (isGroupRow(parentRow) && parentRow.key === row.parentKey) {
+        if (isGroupRow(parentRow) && parentRow.id === row.parentId) {
           parentRowIdx = i;
           break;
         }
@@ -848,7 +848,7 @@ function DataGrid<R, K extends keyof R, SR>({
             aria-rowindex={headerRowsCount + startRowIndex + 1} // aria-rowindex is 1 based
             key={row.id}
             id={row.id}
-            groupKey={row.key}
+            groupKey={row.groupKey}
             viewportColumns={viewportColumns}
             childRows={row.childRows}
             rowIdx={rowIdx}
diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index d81d449365..b976925458 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -47,19 +47,19 @@ export function useViewportRows<R, SR>({
     const allGroupRows = new Set<unknown>();
     if (!groupedRows) return [rawRows, allGroupRows];
 
-    const expandGroup = (rows: GroupByDictionary<R> | readonly R[], parentKey: string | undefined, level: number): Array<GroupRow<R> | R> => {
+    const expandGroup = (rows: GroupByDictionary<R> | readonly R[], parentId: string | undefined, level: number): Array<GroupRow<R> | R> => {
       if (Array.isArray(rows)) return rows;
       const flattenedRows: Array<R | GroupRow<R>> = [];
-      Object.keys(rows).forEach((key, posInSet, keys) => {
+      Object.keys(rows).forEach((groupKey, posInSet, keys) => {
         // TODO: should users have control over the gerenated key?
-        const id = parentKey !== undefined ? `${parentKey}__${key}` : key;
+        const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
-        const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[key]; // TODO: why is it failing?
+        const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[groupKey]; // TODO: why is it failing?
 
         const groupRow: GroupRow<R> = {
           id,
-          key,
-          parentKey,
+          parentId,
+          groupKey,
           isExpanded,
           childRows,
           level,
diff --git a/src/types.ts b/src/types.ts
index 7d2504e474..884fa39cf4 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -258,8 +258,8 @@ export type GroupByDictionary<TRow> = Dictionary<{
 export interface GroupRow<TRow> {
   childRows: readonly TRow[];
   id: string;
-  key: unknown;
-  parentKey: unknown;
+  parentId: unknown;
+  groupKey: unknown;
   isExpanded: boolean;
   level: number;
   posInSet: number;

From 5131f2b3c009dcc0b64d9ae89d653572a15c6d9e Mon Sep 17 00:00:00 2001
From: Nicolas Stepien <stepien.nicolas@gmail.com>
Date: Thu, 27 Aug 2020 18:23:08 +0100
Subject: [PATCH 49/79] fix border styles

---
 style/cell.less     |  6 +++---
 style/checkbox.less |  1 +
 style/row.less      | 46 +++++++++++++++++----------------------------
 3 files changed, 21 insertions(+), 32 deletions(-)

diff --git a/style/cell.less b/style/cell.less
index def5477fbb..46d57a48b7 100644
--- a/style/cell.less
+++ b/style/cell.less
@@ -29,7 +29,7 @@
 }
 
 .rdg-cell-copied {
-  background-color:#ccccff;
+  background-color: #ccccff;
 }
 
 .rdg-cell-drag-handle {
@@ -50,11 +50,11 @@
 }
 
 .rdg-cell-dragged-over {
-  background-color:#ccccff;
+  background-color: #ccccff;
 }
 
 .rdg-cell-copied.rdg-cell-dragged-over {
-  background-color:#9999ff;
+  background-color: #9999ff;
 }
 
 .rdg-cell-editing {
diff --git a/style/checkbox.less b/style/checkbox.less
index 247f21705c..28e75f475e 100644
--- a/style/checkbox.less
+++ b/style/checkbox.less
@@ -8,6 +8,7 @@
   right: 0;
   bottom: 0;
   left: 0;
+  margin-right: 1px; // align checkbox in row group cell
 }
 
 .rdg-checkbox-label-disabled {
diff --git a/style/row.less b/style/row.less
index 2069258aa8..7fdaf439fb 100644
--- a/style/row.less
+++ b/style/row.less
@@ -34,37 +34,25 @@
   }
 }
 
-.rdg-group-row {
-  > .rdg-cell {
-    // TODO: fix broken border
-    border-right-color: transparent;
-  }
-
-  > .rdg-cell:last-child,
-  > .rdg-cell-frozen-last {
-    border-right-color: @borderColor;
-  }
+.rdg-group-row > .rdg-cell:not(:last-child):not(.rdg-cell-frozen-last) {
+  border-right: none;
 }
 
 .rdg-group-row-selected {
-  .rdg-cell {
-    box-shadow:
-      inset 0 2px 0 0 @selectedBorderColor,
-      inset 0 -2px 0 0 @selectedBorderColor;
-  }
-
-  .rdg-cell:first-child {
-    box-shadow:
-      inset 0 2px 0 0 @selectedBorderColor,
-      inset 0 -2px 0 0 @selectedBorderColor,
-      inset 2px 0 0 0 @selectedBorderColor;
-  }
-
-  .rdg-cell:last-child {
-    box-shadow:
-      inset 0 2px 0 0 @selectedBorderColor,
-      inset 0 -2px 0 0 @selectedBorderColor,
-      inset -2px 0 0 0 @selectedBorderColor;
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-shadow: inset 0 0 0 2px @selectedBorderColor;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  > .rdg-cell:first-child {
+    // preserve left border on the first frozen cell after scrolling to the right
+    box-shadow: inset 2px 0 0 0 @selectedBorderColor;
   }
 }
-

From ea6438015d8e0cafe30cd875412e8280914c2038 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 05:42:17 -0500
Subject: [PATCH 50/79] Use a single array

---
 src/hooks/useViewportRows.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index b976925458..214bd9a129 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -47,11 +47,14 @@ export function useViewportRows<R, SR>({
     const allGroupRows = new Set<unknown>();
     if (!groupedRows) return [rawRows, allGroupRows];
 
-    const expandGroup = (rows: GroupByDictionary<R> | readonly R[], parentId: string | undefined, level: number): Array<GroupRow<R> | R> => {
-      if (Array.isArray(rows)) return rows;
-      const flattenedRows: Array<R | GroupRow<R>> = [];
+    const flattenedRows: Array<R | GroupRow<R>> = [];
+    const expandGroup = (rows: GroupByDictionary<R> | readonly R[], parentId: string | undefined, level: number): void => {
+      if (Array.isArray(rows)) {
+        flattenedRows.push(...rows);
+        return;
+      }
       Object.keys(rows).forEach((groupKey, posInSet, keys) => {
-        // TODO: should users have control over the gerenated key?
+        // TODO: should users have control over the generated key?
         const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
         const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[groupKey]; // TODO: why is it failing?
@@ -71,14 +74,13 @@ export function useViewportRows<R, SR>({
         allGroupRows.add(groupRow);
 
         if (isExpanded) {
-          flattenedRows.push(...expandGroup(childGroups, id, level + 1));
+          expandGroup(childGroups, id, level + 1);
         }
       });
-
-      return flattenedRows;
     };
 
-    return [expandGroup(groupedRows, undefined, 0), allGroupRows];
+    expandGroup(groupedRows, undefined, 0);
+    return [flattenedRows, allGroupRows];
   }, [expandedGroupIds, groupedRows, rawRows]);
 
   const isGroupRow = <R>(row: unknown): row is GroupRow<R> => {

From 2d14c8186973de9236d788ba59eb0217351fe0bb Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 08:27:08 -0500
Subject: [PATCH 51/79] Cleanup groupBy columns logic

---
 src/hooks/useViewportColumns.ts | 51 +++++----------------------------
 src/utils/columnUtils.ts        | 49 +++++++++++++++++++++++++++----
 2 files changed, 51 insertions(+), 49 deletions(-)

diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
index 9f1d6dda53..e0be26df8a 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.ts
@@ -1,10 +1,9 @@
 import { useMemo } from 'react';
 
-import { CalculatedColumn, GroupRow } from '../types';
+import { CalculatedColumn } from '../types';
 import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns } from '../utils';
 import { DataGridProps } from '../DataGrid';
-import { SELECT_COLUMN_KEY } from '../Columns';
-import { ValueFormatter, ToggleGroupedFormatter } from '../formatters';
+import { ValueFormatter } from '../formatters';
 
 type SharedDataGridProps<R, K extends keyof R, SR> = Pick<DataGridProps<R, K, SR>,
   | 'columns'
@@ -28,59 +27,23 @@ export function useViewportColumns<R, K extends keyof R, SR>({
   groupBy: rawGroupBy,
   rowGrouper
 }: ViewportColumnsArgs<R, K, SR>) {
-  const [sortedColumns, groupBy] = useMemo(() => {
-    if (!rawGroupBy || !rowGrouper) return [rawColumns, []];
-
-    // Find valid groupBy columns
-    const groupBy: readonly string[] = rawGroupBy.filter(g => rawColumns.find(c => c.key === g) !== undefined);
-    if (groupBy.length === 0) return [rawColumns, groupBy];
-
-    const selectColumn = rawColumns.find(c => c.key === SELECT_COLUMN_KEY);
-
-    // Move group columns after the select column
-    const groupByColumns = rawColumns
-      .filter(c => groupBy.includes(c.key))
-      .map((c, index) => ({
-        ...c,
-        frozen: true,
-        rowGroup: true,
-        groupFormatter: c.groupFormatter ?? ToggleGroupedFormatter,
-        formatterOptions: {
-          groupFocusable(row: GroupRow<R>) {
-            return row.level === index;
-          }
-        }
-      }))
-      .sort((c1, c2) => groupBy.findIndex(k => k === c1.key) - groupBy.findIndex(k => k === c2.key));
-    const remaningColumns = rawColumns.filter(c => !groupBy.includes(c.key) && c.key !== SELECT_COLUMN_KEY);
-    const sortedColumns = [
-      ...groupByColumns,
-      ...remaningColumns
-    ];
-
-    if (selectColumn) {
-      sortedColumns.unshift(selectColumn);
-    }
-
-    return [sortedColumns, groupBy];
-  }, [rawColumns, rawGroupBy, rowGrouper]);
-
   const minColumnWidth = defaultColumnOptions?.minWidth ?? 80;
   const defaultFormatter = defaultColumnOptions?.formatter ?? ValueFormatter;
   const defaultSortable = defaultColumnOptions?.sortable ?? false;
   const defaultResizable = defaultColumnOptions?.resizable ?? false;
 
-  const { columns, lastFrozenColumnIndex, totalColumnWidth } = useMemo(() => {
+  const { columns, lastFrozenColumnIndex, totalColumnWidth, groupBy } = useMemo(() => {
     return getColumnMetrics<R, SR>({
-      columns: sortedColumns,
+      columns: rawColumns,
       minColumnWidth,
       viewportWidth,
       columnWidths,
       defaultSortable,
       defaultResizable,
-      defaultFormatter
+      defaultFormatter,
+      rawGroupBy: rowGrouper ? rawGroupBy : undefined
     });
-  }, [columnWidths, defaultFormatter, defaultResizable, defaultSortable, minColumnWidth, sortedColumns, viewportWidth]);
+  }, [columnWidths, defaultFormatter, defaultResizable, defaultSortable, minColumnWidth, rawColumns, rawGroupBy, rowGrouper, viewportWidth]);
 
   const [colOverscanStartIdx, colOverscanEndIdx] = useMemo((): [number, number] => {
     return getHorizontalRangeToRender(
diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index db85e2b04a..a96fde0398 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -1,4 +1,6 @@
-import { Column, CalculatedColumn, FormatterProps, Omit } from '../types';
+import { Column, CalculatedColumn, FormatterProps, Omit, GroupRow } from '../types';
+import { ToggleGroupedFormatter } from '../formatters';
+import { SELECT_COLUMN_KEY } from '../Columns';
 
 interface Metrics<R, SR> {
   columns: readonly Column<R, SR>[];
@@ -8,12 +10,14 @@ interface Metrics<R, SR> {
   defaultResizable: boolean;
   defaultSortable: boolean;
   defaultFormatter: React.ComponentType<FormatterProps<R, SR>>;
+  rawGroupBy?: readonly string[];
 }
 
 interface ColumnMetrics<TRow, TSummaryRow> {
   columns: readonly CalculatedColumn<TRow, TSummaryRow>[];
   lastFrozenColumnIndex: number;
   totalColumnWidth: number;
+  groupBy: readonly string[];
 }
 
 export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<R, SR> {
@@ -22,7 +26,11 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
   let allocatedWidths = 0;
   let unassignedColumnsCount = 0;
   let lastFrozenColumnIndex = -1;
-  const columns: Array<Omit<Column<R, SR>, 'width'> & { width: number | undefined }> = [];
+  type IntermediateColumn = Omit<Column<R, SR>, 'width'> & { width: number | undefined; rowGroup?: boolean };
+  let columns: IntermediateColumn[] = [];
+
+  // Find valid groupBy columns
+  const groupBy: readonly string[] = metrics.rawGroupBy?.filter(key => metrics.columns.find(c => c.key === key) !== undefined) ?? [];
 
   for (const metricsColumn of metrics.columns) {
     let width = getSpecifiedWidth(metricsColumn, metrics.columnWidths, metrics.viewportWidth);
@@ -34,9 +42,24 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
       allocatedWidths += width;
     }
 
-    const column = { ...metricsColumn, width };
+    let column: IntermediateColumn = { ...metricsColumn, width };
 
-    if (column.frozen) {
+    if (groupBy.includes(column.key)) {
+      lastFrozenColumnIndex++;
+      const level = groupBy.indexOf(column.key);
+      column = {
+        ...column,
+        frozen: true,
+        rowGroup: true,
+        groupFormatter: column.groupFormatter ?? ToggleGroupedFormatter,
+        formatterOptions: {
+          groupFocusable(row: GroupRow<R>) {
+            return row.level === level;
+          }
+        }
+      };
+      columns.push(column);
+    } else if (column.frozen) {
       lastFrozenColumnIndex++;
       columns.splice(lastFrozenColumnIndex, 0, column);
     } else {
@@ -44,6 +67,21 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
     }
   }
 
+  // Sort groupBy columns
+  if (groupBy.length >= 0) {
+    const selectColumn = columns.find(c => c.key === SELECT_COLUMN_KEY);
+    const groupByColumns = groupBy.map(key => columns.find(c => c.key === key)!);
+    const remaningColumns = columns.filter(c => !groupByColumns.includes(c) && c !== selectColumn);
+    columns = [
+      ...groupByColumns,
+      ...remaningColumns
+    ];
+
+    if (selectColumn) {
+      columns.unshift(selectColumn);
+    }
+  }
+
   const unallocatedWidth = metrics.viewportWidth - allocatedWidths;
   const unallocatedColumnWidth = Math.max(
     Math.floor(unallocatedWidth / unassignedColumnsCount),
@@ -70,7 +108,8 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
   return {
     columns: calculatedColumns,
     lastFrozenColumnIndex,
-    totalColumnWidth: totalWidth
+    totalColumnWidth: totalWidth,
+    groupBy
   };
 }
 

From 5f8aaf5e5d4b4bdeb84db705f0c9af3ba71545f6 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 10:08:18 -0500
Subject: [PATCH 52/79] Link TS issue

---
 src/hooks/useViewportRows.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index 214bd9a129..d833a21fcb 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -57,7 +57,7 @@ export function useViewportRows<R, SR>({
         // TODO: should users have control over the generated key?
         const id = parentId !== undefined ? `${parentId}__${groupKey}` : groupKey;
         const isExpanded = expandedGroupIds?.has(id) ?? false;
-        const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[groupKey]; // TODO: why is it failing?
+        const { childRows, childGroups, startRowIndex } = (rows as GroupByDictionary<R>)[groupKey]; // https://github.com/microsoft/TypeScript/issues/17002
 
         const groupRow: GroupRow<R> = {
           id,

From 40ffbf047a1ee0380f79e26fc6360cea83cd735d Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 10:20:17 -0500
Subject: [PATCH 53/79] Add icon prop to ToggleGroupedFormatter

---
 src/formatters/ToggleGroupFormatter.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index c6f27d14ea..708858b985 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -2,12 +2,17 @@ import React from 'react';
 import { GroupFormatterProps } from '../types';
 import { useFocusRef } from '../hooks';
 
+interface ToggleGroupedFormatterProps<R, SR> extends GroupFormatterProps<R, SR> {
+  icon?: React.ReactNode;
+}
+
 export function ToggleGroupedFormatter<R, SR>({
   groupKey,
   isExpanded,
   isCellSelected,
-  toggleGroup
-}: GroupFormatterProps<R, SR>) {
+  toggleGroup,
+  icon = isExpanded ? '\u25BC' : '\u25B6'
+}: ToggleGroupedFormatterProps<R, SR>) {
   const cellRef = useFocusRef<HTMLDivElement>(isCellSelected);
 
   function handleKeyDown({ key }: React.KeyboardEvent<HTMLSpanElement>) {
@@ -27,7 +32,7 @@ export function ToggleGroupedFormatter<R, SR>({
         tabIndex={-1}
         onKeyDown={handleKeyDown}
       >
-        {isExpanded ? '\u25BC' : '\u25B6'}
+        {icon}
       </span>
     </span>
   );

From 07d79ab9bd03dadeb143c8df0dc860292757331d Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 10:40:38 -0500
Subject: [PATCH 54/79] Cell drag is not supported on a treegrid

---
 src/DataGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 3d235bf4e5..9939afc398 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -283,7 +283,7 @@ function DataGrid<R, K extends keyof R, SR>({
   const minColIdx = hasGroups ? -1 : 0;
 
   if (hasGroups) {
-    // TODO: finalize if cell drag needs to be supported for treegrid
+    // Cell drag is not supported on a treegrid
     enableCellDragAndDrop = false;
   }
 

From b438c8a89f2296c1ba55a506c533e050073d868e Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 11:13:37 -0500
Subject: [PATCH 55/79] Add caret icon

---
 src/formatters/ToggleGroupFormatter.less | 45 ++++++++++++++++++++++++
 src/formatters/ToggleGroupFormatter.tsx  | 16 ++++-----
 src/utils/columnUtils.ts                 |  4 +--
 3 files changed, 53 insertions(+), 12 deletions(-)
 create mode 100644 src/formatters/ToggleGroupFormatter.less

diff --git a/src/formatters/ToggleGroupFormatter.less b/src/formatters/ToggleGroupFormatter.less
new file mode 100644
index 0000000000..324894afca
--- /dev/null
+++ b/src/formatters/ToggleGroupFormatter.less
@@ -0,0 +1,45 @@
+.caret-collapsed,
+.caret-expanded {
+  position: relative;
+  margin-left: 4px;
+}
+
+.caret-collapsed:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-bottom: 6px solid #000;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+}
+
+.caret-collapsed:after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 2px;
+  border-bottom: 4px solid #fff;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
+
+.caret-expanded:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-top: 6px solid #000;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+}
+
+.caret-expanded:after {
+  content: '';
+  position: absolute;
+  left: 2px;
+  top: 0;
+  border-top: 4px solid #fff;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index 708858b985..ae8af71e7c 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -2,17 +2,14 @@ import React from 'react';
 import { GroupFormatterProps } from '../types';
 import { useFocusRef } from '../hooks';
 
-interface ToggleGroupedFormatterProps<R, SR> extends GroupFormatterProps<R, SR> {
-  icon?: React.ReactNode;
-}
+import './ToggleGroupFormatter.less';
 
-export function ToggleGroupedFormatter<R, SR>({
+export function ToggleGroupFormatter<R, SR>({
   groupKey,
   isExpanded,
   isCellSelected,
-  toggleGroup,
-  icon = isExpanded ? '\u25BC' : '\u25B6'
-}: ToggleGroupedFormatterProps<R, SR>) {
+  toggleGroup
+}: GroupFormatterProps<R, SR>) {
   const cellRef = useFocusRef<HTMLDivElement>(isCellSelected);
 
   function handleKeyDown({ key }: React.KeyboardEvent<HTMLSpanElement>) {
@@ -31,9 +28,8 @@ export function ToggleGroupedFormatter<R, SR>({
         ref={cellRef}
         tabIndex={-1}
         onKeyDown={handleKeyDown}
-      >
-        {icon}
-      </span>
+        className={isExpanded ? 'caret-expanded' : 'caret-collapsed'}
+      />
     </span>
   );
 }
diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index a96fde0398..87249c3da8 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -1,5 +1,5 @@
 import { Column, CalculatedColumn, FormatterProps, Omit, GroupRow } from '../types';
-import { ToggleGroupedFormatter } from '../formatters';
+import { ToggleGroupFormatter } from '../formatters';
 import { SELECT_COLUMN_KEY } from '../Columns';
 
 interface Metrics<R, SR> {
@@ -51,7 +51,7 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
         ...column,
         frozen: true,
         rowGroup: true,
-        groupFormatter: column.groupFormatter ?? ToggleGroupedFormatter,
+        groupFormatter: column.groupFormatter ?? ToggleGroupFormatter,
         formatterOptions: {
           groupFocusable(row: GroupRow<R>) {
             return row.level === level;

From 02d336aa0e5f5d0ada6a757b2472ec266837e45c Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 11:23:14 -0500
Subject: [PATCH 56/79] Center align

---
 src/formatters/ToggleGroupFormatter.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/formatters/ToggleGroupFormatter.less b/src/formatters/ToggleGroupFormatter.less
index 324894afca..b831484328 100644
--- a/src/formatters/ToggleGroupFormatter.less
+++ b/src/formatters/ToggleGroupFormatter.less
@@ -2,6 +2,7 @@
 .caret-expanded {
   position: relative;
   margin-left: 4px;
+  vertical-align: -webkit-baseline-middle;
 }
 
 .caret-collapsed:before {

From b9134d539b000164472777bbd9d7c0846cb8acd8 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 11:26:15 -0500
Subject: [PATCH 57/79] -moz-middle-with-baseline;

---
 src/formatters/ToggleGroupFormatter.less | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/formatters/ToggleGroupFormatter.less b/src/formatters/ToggleGroupFormatter.less
index b831484328..501b0d1707 100644
--- a/src/formatters/ToggleGroupFormatter.less
+++ b/src/formatters/ToggleGroupFormatter.less
@@ -3,6 +3,7 @@
   position: relative;
   margin-left: 4px;
   vertical-align: -webkit-baseline-middle;
+  vertical-align: -moz-middle-with-baseline;
 }
 
 .caret-collapsed:before {

From ca9d90011acd16360ca3caa94205302621beb69d Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 11:33:58 -0500
Subject: [PATCH 58/79] Update changelog

---
 CHANGELOG.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4a9d4f4f3b..0229969bad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,16 +17,24 @@
     - `rowClass`
     - `defaultColumnOptions`
       - ⚠️ This replaces the `minColumnWidth` and `defaultFormatter` props
+    - `groupBy`
+    - `rowGrouper`
+      - More info in [#2106](https://github.com/adazzle/react-data-grid/pull/2106)
   - `column.cellClass(row)` function support:
     - `column = { ..., cellClass(row) { return string; } }`
   - `column.minWidth`
   - `column.maxWidth`
   - `column.headerCellClass`
   - `column.formatterOptions`
-    - More info in [#2104](https://github.com/adazzle/react-data-grid/pull/2104)
+    - `focusable`
+      - More info in [#2104](https://github.com/adazzle/react-data-grid/pull/2104)
+    - `groupFocusable`
+      - More info in [#2106](https://github.com/adazzle/react-data-grid/pull/2106)
   - `column.editor2`
   - `column.editorOptions`
     - More info in [#2102](https://github.com/adazzle/react-data-grid/pull/2102)
+  - `column.groupFormatter`
+    - More info in [#2106](https://github.com/adazzle/react-data-grid/pull/2106)
   - `scrollToRow` method
     - ⚠️ This replaces the `scrollToRowIndex` prop
 - **Removed:**

From b8cd85bdf137b79a53db091eaf94bf83cb902bec Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Fri, 28 Aug 2020 12:13:37 -0500
Subject: [PATCH 59/79] Update src/utils/columnUtils.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/utils/columnUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index 87249c3da8..8f8ad0dcb1 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -30,7 +30,7 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
   let columns: IntermediateColumn[] = [];
 
   // Find valid groupBy columns
-  const groupBy: readonly string[] = metrics.rawGroupBy?.filter(key => metrics.columns.find(c => c.key === key) !== undefined) ?? [];
+  const groupBy: readonly string[] = metrics.rawGroupBy?.filter(key => metrics.columns.some(c => c.key === key)) ?? [];
 
   for (const metricsColumn of metrics.columns) {
     let width = getSpecifiedWidth(metricsColumn, metrics.columnWidths, metrics.viewportWidth);

From e6273f630a204365ba39624731cee11595ee93d5 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 12:21:20 -0500
Subject: [PATCH 60/79] Address comments

---
 src/utils/columnUtils.ts | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index 8f8ad0dcb1..37902b2cb7 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -1,4 +1,4 @@
-import { Column, CalculatedColumn, FormatterProps, Omit, GroupRow } from '../types';
+import { Column, CalculatedColumn, FormatterProps, GroupRow } from '../types';
 import { ToggleGroupFormatter } from '../formatters';
 import { SELECT_COLUMN_KEY } from '../Columns';
 
@@ -26,7 +26,7 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
   let allocatedWidths = 0;
   let unassignedColumnsCount = 0;
   let lastFrozenColumnIndex = -1;
-  type IntermediateColumn = Omit<Column<R, SR>, 'width'> & { width: number | undefined; rowGroup?: boolean };
+  type IntermediateColumn = Column<R, SR> & { width: number | undefined; rowGroup?: boolean };
   let columns: IntermediateColumn[] = [];
 
   // Find valid groupBy columns
@@ -42,20 +42,17 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
       allocatedWidths += width;
     }
 
-    let column: IntermediateColumn = { ...metricsColumn, width };
+    const column: IntermediateColumn = { ...metricsColumn, width };
 
     if (groupBy.includes(column.key)) {
       lastFrozenColumnIndex++;
       const level = groupBy.indexOf(column.key);
-      column = {
-        ...column,
-        frozen: true,
-        rowGroup: true,
-        groupFormatter: column.groupFormatter ?? ToggleGroupFormatter,
-        formatterOptions: {
-          groupFocusable(row: GroupRow<R>) {
-            return row.level === level;
-          }
+      column.frozen = true;
+      column.rowGroup = true;
+      column.groupFormatter = column.groupFormatter ?? ToggleGroupFormatter;
+      column.formatterOptions = {
+        groupFocusable(row: GroupRow<R>) {
+          return row.level === level;
         }
       };
       columns.push(column);

From a4cd283c68ac3d37ab57945012ed233d18479236 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 13:30:09 -0500
Subject: [PATCH 61/79] Use the suggested sorting logic

---
 src/utils/columnUtils.ts | 76 ++++++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 34 deletions(-)

diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index 37902b2cb7..723c317032 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -1,4 +1,4 @@
-import { Column, CalculatedColumn, FormatterProps, GroupRow } from '../types';
+import { Column, CalculatedColumn, FormatterProps } from '../types';
 import { ToggleGroupFormatter } from '../formatters';
 import { SELECT_COLUMN_KEY } from '../Columns';
 
@@ -27,12 +27,9 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
   let unassignedColumnsCount = 0;
   let lastFrozenColumnIndex = -1;
   type IntermediateColumn = Column<R, SR> & { width: number | undefined; rowGroup?: boolean };
-  let columns: IntermediateColumn[] = [];
+  const { rawGroupBy } = metrics;
 
-  // Find valid groupBy columns
-  const groupBy: readonly string[] = metrics.rawGroupBy?.filter(key => metrics.columns.some(c => c.key === key)) ?? [];
-
-  for (const metricsColumn of metrics.columns) {
+  const columns = metrics.columns.map(metricsColumn => {
     let width = getSpecifiedWidth(metricsColumn, metrics.columnWidths, metrics.viewportWidth);
 
     if (width === undefined) {
@@ -44,40 +41,42 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
 
     const column: IntermediateColumn = { ...metricsColumn, width };
 
-    if (groupBy.includes(column.key)) {
-      lastFrozenColumnIndex++;
-      const level = groupBy.indexOf(column.key);
+    if (rawGroupBy?.includes(column.key)) {
       column.frozen = true;
       column.rowGroup = true;
-      column.groupFormatter = column.groupFormatter ?? ToggleGroupFormatter;
-      column.formatterOptions = {
-        groupFocusable(row: GroupRow<R>) {
-          return row.level === level;
-        }
-      };
-      columns.push(column);
-    } else if (column.frozen) {
+    }
+
+    if (column.frozen) {
       lastFrozenColumnIndex++;
-      columns.splice(lastFrozenColumnIndex, 0, column);
-    } else {
-      columns.push(column);
     }
-  }
 
-  // Sort groupBy columns
-  if (groupBy.length >= 0) {
-    const selectColumn = columns.find(c => c.key === SELECT_COLUMN_KEY);
-    const groupByColumns = groupBy.map(key => columns.find(c => c.key === key)!);
-    const remaningColumns = columns.filter(c => !groupByColumns.includes(c) && c !== selectColumn);
-    columns = [
-      ...groupByColumns,
-      ...remaningColumns
-    ];
-
-    if (selectColumn) {
-      columns.unshift(selectColumn);
+    return column;
+  });
+
+  columns.sort(({ key: aKey, frozen: frozenA }, { key: bKey, frozen: frozenB }) => {
+    // Sort select column first:
+    if (aKey === SELECT_COLUMN_KEY) return -1;
+    if (bKey === SELECT_COLUMN_KEY) return 1;
+
+    // Sort grouped columns second, following the groupBy order:
+    if (rawGroupBy?.includes(aKey)) {
+      if (rawGroupBy.includes(bKey)) {
+        return rawGroupBy.indexOf(aKey) - rawGroupBy.indexOf(bKey);
+      }
+      return -1;
     }
-  }
+    if (rawGroupBy?.includes(bKey)) return 1;
+
+    // Sort frozen columns third:
+    if (frozenA) {
+      if (frozenB) return 0;
+      return -1;
+    }
+    if (frozenB) return 1;
+
+    // Sort other columns last:
+    return 0;
+  });
 
   const unallocatedWidth = metrics.viewportWidth - allocatedWidths;
   const unallocatedColumnWidth = Math.max(
@@ -85,6 +84,7 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
     metrics.minColumnWidth
   );
 
+  const groupBy: string[] = [];
   const calculatedColumns: CalculatedColumn<R, SR>[] = columns.map((column, idx) => {
     // Every column should have a valid width as this stage
     const width = column.width ?? clampColumnWidth(unallocatedColumnWidth, column, metrics.minColumnWidth);
@@ -97,6 +97,14 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
       resizable: column.resizable ?? metrics.defaultResizable,
       formatter: column.formatter ?? metrics.defaultFormatter
     };
+
+    if (newColumn.rowGroup) {
+      const level = groupBy.push(column.key) - 1;
+      newColumn.groupFormatter = column.groupFormatter ?? ToggleGroupFormatter;
+      newColumn.formatterOptions = newColumn.formatterOptions ?? {};
+      newColumn.formatterOptions.groupFocusable = newColumn.formatterOptions.groupFocusable ?? (row => row.level === level);
+    }
+
     totalWidth += width;
     left += width;
     return newColumn;

From b42a5fe3938a61de42ed63b3eb9405bd72a95ff7 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 14:04:45 -0500
Subject: [PATCH 62/79] Do not mutate formatterOptions

---
 src/utils/columnUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index 723c317032..32b1799d15 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -101,7 +101,7 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
     if (newColumn.rowGroup) {
       const level = groupBy.push(column.key) - 1;
       newColumn.groupFormatter = column.groupFormatter ?? ToggleGroupFormatter;
-      newColumn.formatterOptions = newColumn.formatterOptions ?? {};
+      newColumn.formatterOptions = { ...newColumn.formatterOptions };
       newColumn.formatterOptions.groupFocusable = newColumn.formatterOptions.groupFocusable ?? (row => row.level === level);
     }
 

From 5813f4ae638f7c1ec3fc0096dbdf479cfcb02a2c Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 14:20:34 -0500
Subject: [PATCH 63/79] Make group cell clickable

---
 src/GroupCell.tsx                       | 7 ++++++-
 src/formatters/ToggleGroupFormatter.tsx | 7 ++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/GroupCell.tsx b/src/GroupCell.tsx
index bd973debc0..27908f401d 100644
--- a/src/GroupCell.tsx
+++ b/src/GroupCell.tsx
@@ -40,6 +40,9 @@ function GroupCell<R, SR>({
     eventBus.dispatch('SELECT_ROW', { rowIdx, checked, isShiftClick: false });
   }
 
+  // Only make the cell clickable if the group level matches
+  const isLevelMatching = column.rowGroup && groupColumnIndex === column.idx;
+
   return (
     <div
       role="gridcell"
@@ -52,8 +55,10 @@ function GroupCell<R, SR>({
       })}
       style={{
         width: column.width,
-        left: column.left
+        left: column.left,
+        cursor: isLevelMatching ? 'pointer' : 'default'
       }}
+      onClick={isLevelMatching ? toggleGroup : undefined}
     >
       {column.groupFormatter && (column.rowGroup ? groupColumnIndex === column.idx : true) && (
         <column.groupFormatter
diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index ae8af71e7c..7e1369ed9b 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -19,10 +19,7 @@ export function ToggleGroupFormatter<R, SR>({
   }
 
   return (
-    <span
-      style={{ cursor: 'pointer' }}
-      onClick={toggleGroup}
-    >
+    <>
       {groupKey}{' '}
       <span
         ref={cellRef}
@@ -30,6 +27,6 @@ export function ToggleGroupFormatter<R, SR>({
         onKeyDown={handleKeyDown}
         className={isExpanded ? 'caret-expanded' : 'caret-collapsed'}
       />
-    </span>
+    </>
   );
 }

From fa5ca5feef93a50aa3632430630f13f1019dd586 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Fri, 28 Aug 2020 14:26:19 -0500
Subject: [PATCH 64/79] Mock less files for tests

---
 jest.config.mjs  | 3 +++
 jest/fileMock.ts | 1 +
 2 files changed, 4 insertions(+)
 create mode 100644 jest/fileMock.ts

diff --git a/jest.config.mjs b/jest.config.mjs
index ed88874b52..cb0b0ad7c3 100644
--- a/jest.config.mjs
+++ b/jest.config.mjs
@@ -17,6 +17,9 @@ export default {
   coverageReporters: [
     'text'
   ],
+  moduleNameMapper: {
+    '\\.less$': '<rootDir>/jest/fileMock.ts'
+  },
   restoreMocks: true,
   setupFiles: [
     '<rootDir>/jest/setupTests.ts'
diff --git a/jest/fileMock.ts b/jest/fileMock.ts
new file mode 100644
index 0000000000..602eb23ee2
--- /dev/null
+++ b/jest/fileMock.ts
@@ -0,0 +1 @@
+export default 'test-file-stub';

From e3dc7a68706aef275a55f523b815e5a68fd8c8cb Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Tue, 1 Sep 2020 12:27:09 -0500
Subject: [PATCH 65/79] Inline getVerticalRangeToRender

---
 src/hooks/useViewportRows.ts    |  17 +++---
 src/utils/index.ts              |   1 -
 src/utils/viewportUtils.test.ts | 102 --------------------------------
 src/utils/viewportUtils.ts      |  16 -----
 4 files changed, 7 insertions(+), 129 deletions(-)
 delete mode 100644 src/utils/viewportUtils.test.ts
 delete mode 100644 src/utils/viewportUtils.ts

diff --git a/src/hooks/useViewportRows.ts b/src/hooks/useViewportRows.ts
index d833a21fcb..97eee1366e 100644
--- a/src/hooks/useViewportRows.ts
+++ b/src/hooks/useViewportRows.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 
 import { GroupRow, GroupByDictionary, Dictionary } from '../types';
-import { getVerticalRangeToRender } from '../utils';
+const RENDER_BACTCH_SIZE = 8;
 
 interface ViewportRowsArgs<R, SR> {
   rawRows: readonly R[];
@@ -83,16 +83,13 @@ export function useViewportRows<R, SR>({
     return [flattenedRows, allGroupRows];
   }, [expandedGroupIds, groupedRows, rawRows]);
 
-  const isGroupRow = <R>(row: unknown): row is GroupRow<R> => {
-    return allGroupRows.has(row);
-  };
+  const isGroupRow = <R>(row: unknown): row is GroupRow<R> => allGroupRows.has(row);
 
-  const [rowOverscanStartIdx, rowOverscanEndIdx] = getVerticalRangeToRender(
-    clientHeight,
-    rowHeight,
-    scrollTop,
-    rows.length
-  );
+  const overscanThreshold = 4;
+  const rowVisibleStartIdx = Math.floor(scrollTop / rowHeight);
+  const rowVisibleEndIdx = Math.min(rows.length - 1, Math.floor((scrollTop + clientHeight) / rowHeight));
+  const rowOverscanStartIdx = Math.max(0, Math.floor((rowVisibleStartIdx - overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
+  const rowOverscanEndIdx = Math.min(rows.length - 1, Math.ceil((rowVisibleEndIdx + overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
 
   return {
     rowOverscanStartIdx,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 07f4f17083..9f59b7076f 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,6 +1,5 @@
 export * from './domUtils';
 export * from './columnUtils';
-export * from './viewportUtils';
 export * from './keyboardUtils';
 export * from './selectedCellUtils';
 
diff --git a/src/utils/viewportUtils.test.ts b/src/utils/viewportUtils.test.ts
deleted file mode 100644
index a537d28e38..0000000000
--- a/src/utils/viewportUtils.test.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/* eslint-disable jest/no-commented-out-tests */
-import { getVerticalRangeToRender } from './viewportUtils';
-
-// interface Row {
-//   [key: string]: React.ReactNode;
-// }
-
-interface VerticalRangeToRenderParams {
-  height: number;
-  rowHeight: number;
-  scrollTop: number;
-  rowsCount: number;
-}
-
-describe('getVerticalRangeToRender', () => {
-  function getRange({
-    height = 500,
-    rowHeight = 50,
-    scrollTop = 200,
-    rowsCount = 1000
-  }: Partial<VerticalRangeToRenderParams>) {
-    return getVerticalRangeToRender(height, rowHeight, scrollTop, rowsCount);
-  }
-
-  it('should use rowHeight to calculate the range', () => {
-    expect(getRange({ rowHeight: 50 })).toStrictEqual([0, 24]);
-  });
-
-  it('should use height to calculate the range', () => {
-    expect(getRange({ height: 250 })).toStrictEqual([0, 16]);
-  });
-
-  it('should use scrollTop to calculate the range', () => {
-    expect(getRange({ scrollTop: 500 })).toStrictEqual([0, 24]);
-  });
-
-  it('should use rowsCount to calculate the range', () => {
-    expect(getRange({ rowsCount: 5, scrollTop: 0 })).toStrictEqual([0, 4]);
-  });
-});
-
-// describe('getHorizontalRangeToRender', () => {
-//   function getColumns(): CalculatedColumn<Row, unknown>[] {
-//     return [...Array(500).keys()].map(i => ({
-//       idx: i,
-//       key: `col${i}`,
-//       name: `col${i}`,
-//       width: 100,
-//       left: i * 100,
-//       resizable: false,
-//       sortable: false,
-//       formatter: ValueFormatter
-//     }));
-//   }
-
-//   it('should use scrollLeft to calculate the range', () => {
-//     expect(getHorizontalRangeToRender(
-//       getColumns(),
-//       -1,
-//       1000,
-//       300
-//     )).toStrictEqual([2, 13]);
-//   });
-
-//   it('should account for large columns', () => {
-//     const columns = getColumns();
-//     columns[0].width = 500;
-//     columns.forEach((c, i) => {
-//       if (i !== 0) c.left += 400;
-//     });
-//     expect(getHorizontalRangeToRender(
-//       columns,
-//       -1,
-//       1000,
-//       400
-//     )).toStrictEqual([0, 10]);
-//   });
-
-//   it('should use viewportWidth to calculate the range', () => {
-//     const columns = getColumns();
-//     expect(getHorizontalRangeToRender(
-//       columns,
-//       -1,
-//       500,
-//       200
-//     )).toStrictEqual([1, 7]);
-//   });
-
-//   it('should use frozen columns to calculate the range', () => {
-//     const columns = getColumns();
-//     columns[0].frozen = true;
-//     columns[1].frozen = true;
-//     columns[2].frozen = true;
-
-//     expect(getHorizontalRangeToRender(
-//       columns,
-//       2,
-//       1000,
-//       500
-//     )).toStrictEqual([7, 15]);
-//   });
-// });
diff --git a/src/utils/viewportUtils.ts b/src/utils/viewportUtils.ts
deleted file mode 100644
index 3990eca644..0000000000
--- a/src/utils/viewportUtils.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-const RENDER_BACTCH_SIZE = 8;
-
-export function getVerticalRangeToRender(
-  height: number,
-  rowHeight: number,
-  scrollTop: number,
-  rowsCount: number
-) {
-  const overscanThreshold = 4;
-  const rowVisibleStartIdx = Math.floor(scrollTop / rowHeight);
-  const rowVisibleEndIdx = Math.min(rowsCount - 1, Math.floor((scrollTop + height) / rowHeight));
-  const rowOverscanStartIdx = Math.max(0, Math.floor((rowVisibleStartIdx - overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
-  const rowOverscanEndIdx = Math.min(rowsCount - 1, Math.ceil((rowVisibleEndIdx + overscanThreshold) / RENDER_BACTCH_SIZE) * RENDER_BACTCH_SIZE);
-
-  return [rowOverscanStartIdx, rowOverscanEndIdx] as const;
-}

From 359e6cf5f5319b2ed37e36524e42226f3cc9c1bd Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 2 Sep 2020 09:11:39 -0500
Subject: [PATCH 66/79] Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/DataGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 9adb7a40ff..2ed4b8f452 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -262,7 +262,7 @@ function DataGrid<R, K extends keyof R, SR>({
   const isSelectable = selectedRows !== undefined && onSelectedRowsChange !== undefined;
 
   const { columns, viewportColumns, totalColumnWidth, lastFrozenColumnIndex, totalFrozenColumnWidth, groupBy } = useViewportColumns({
-    columns: rawColumns,
+    rawColumns,
     columnWidths,
     scrollLeft,
     viewportWidth: gridWidth,

From 0bc28c11ec0bed3726a3c3ab1ff74b51d340323e Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 2 Sep 2020 09:11:52 -0500
Subject: [PATCH 67/79] Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/DataGrid.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 2ed4b8f452..4b170effea 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -267,7 +267,7 @@ function DataGrid<R, K extends keyof R, SR>({
     scrollLeft,
     viewportWidth: gridWidth,
     defaultColumnOptions,
-    groupBy: rawGroupBy,
+    rawGroupBy,
     rowGrouper
   });
 

From 58f991d3b614e57f02742bcc2a1af530d47970dc Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 2 Sep 2020 09:12:02 -0500
Subject: [PATCH 68/79] Update src/formatters/ToggleGroupFormatter.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/formatters/ToggleGroupFormatter.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index 7e1369ed9b..3ae4dd1a6a 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { GroupFormatterProps } from '../types';
 import { useFocusRef } from '../hooks';
 
-import './ToggleGroupFormatter.less';
 
 export function ToggleGroupFormatter<R, SR>({
   groupKey,

From 40aec7e470516c3468778bf224d196ed70c955e3 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 2 Sep 2020 09:12:23 -0500
Subject: [PATCH 69/79] Update src/formatters/ToggleGroupFormatter.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/formatters/ToggleGroupFormatter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index 3ae4dd1a6a..901ba92d84 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -19,7 +19,7 @@ export function ToggleGroupFormatter<R, SR>({
 
   return (
     <>
-      {groupKey}{' '}
+      {groupKey}
       <span
         ref={cellRef}
         tabIndex={-1}

From 6d34c546de32257a25a74f27c26f8b84e79f7e7e Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 2 Sep 2020 09:16:16 -0500
Subject: [PATCH 70/79] Revert jest changes

---
 jest.config.mjs  | 3 ---
 jest/fileMock.ts | 1 -
 2 files changed, 4 deletions(-)
 delete mode 100644 jest/fileMock.ts

diff --git a/jest.config.mjs b/jest.config.mjs
index cb0b0ad7c3..ed88874b52 100644
--- a/jest.config.mjs
+++ b/jest.config.mjs
@@ -17,9 +17,6 @@ export default {
   coverageReporters: [
     'text'
   ],
-  moduleNameMapper: {
-    '\\.less$': '<rootDir>/jest/fileMock.ts'
-  },
   restoreMocks: true,
   setupFiles: [
     '<rootDir>/jest/setupTests.ts'
diff --git a/jest/fileMock.ts b/jest/fileMock.ts
deleted file mode 100644
index 602eb23ee2..0000000000
--- a/jest/fileMock.ts
+++ /dev/null
@@ -1 +0,0 @@
-export default 'test-file-stub';

From 9306ff4ead2fbedbeb9bd6b5cac9d92c25811da9 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 2 Sep 2020 09:34:58 -0500
Subject: [PATCH 71/79] Cleanup parameters

---
 src/hooks/useViewportColumns.ts | 12 ++++++------
 src/utils/columnUtils.test.ts   | 16 ++++++++--------
 src/utils/columnUtils.ts        |  4 ++--
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/hooks/useViewportColumns.ts b/src/hooks/useViewportColumns.ts
index 709f0c5be4..2fc34bd18f 100644
--- a/src/hooks/useViewportColumns.ts
+++ b/src/hooks/useViewportColumns.ts
@@ -1,30 +1,30 @@
 import { useMemo } from 'react';
 
-import { CalculatedColumn } from '../types';
+import { CalculatedColumn, Column } from '../types';
 import { getColumnMetrics } from '../utils';
 import { DataGridProps } from '../DataGrid';
 import { ValueFormatter } from '../formatters';
 
 type SharedDataGridProps<R, K extends keyof R, SR> = Pick<DataGridProps<R, K, SR>,
-  | 'columns'
   | 'defaultColumnOptions'
-  | 'groupBy'
   | 'rowGrouper'
 >;
 
 interface ViewportColumnsArgs<R, K extends keyof R, SR> extends SharedDataGridProps<R, K, SR> {
+  rawColumns: readonly Column<R, SR>[];
+  rawGroupBy?: readonly string[];
   viewportWidth: number;
   scrollLeft: number;
   columnWidths: ReadonlyMap<string, number>;
 }
 
 export function useViewportColumns<R, K extends keyof R, SR>({
-  columns: rawColumns,
+  rawColumns,
   columnWidths,
   viewportWidth,
   scrollLeft,
   defaultColumnOptions,
-  groupBy: rawGroupBy,
+  rawGroupBy,
   rowGrouper
 }: ViewportColumnsArgs<R, K, SR>) {
   const minColumnWidth = defaultColumnOptions?.minWidth ?? 80;
@@ -34,7 +34,7 @@ export function useViewportColumns<R, K extends keyof R, SR>({
 
   const { columns, lastFrozenColumnIndex, totalColumnWidth, totalFrozenColumnWidth, groupBy } = useMemo(() => {
     return getColumnMetrics<R, SR>({
-      columns: rawColumns,
+      rawColumns,
       minColumnWidth,
       viewportWidth,
       columnWidths,
diff --git a/src/utils/columnUtils.test.ts b/src/utils/columnUtils.test.ts
index 845a7caaf1..a285755bd0 100644
--- a/src/utils/columnUtils.test.ts
+++ b/src/utils/columnUtils.test.ts
@@ -27,9 +27,9 @@ describe('getColumnMetrics', () => {
   }];
 
   it('should set the unset column widths based on the total width', () => {
-    const columns = getInitialColumns();
+    const rawColumns = getInitialColumns();
     const metrics = getColumnMetrics<Row, unknown>({
-      columns,
+      rawColumns,
       viewportWidth,
       minColumnWidth: 50,
       columnWidths: new Map(),
@@ -44,9 +44,9 @@ describe('getColumnMetrics', () => {
   });
 
   it('should set the column left based on the column widths', () => {
-    const columns = getInitialColumns();
+    const rawColumns = getInitialColumns();
     const metrics = getColumnMetrics<Row, unknown>({
-      columns,
+      rawColumns,
       viewportWidth,
       minColumnWidth: 50,
       columnWidths: new Map(),
@@ -56,7 +56,7 @@ describe('getColumnMetrics', () => {
     });
 
     expect(metrics.columns[0].left).toStrictEqual(0);
-    expect(metrics.columns[1].left).toStrictEqual(columns[0].width);
+    expect(metrics.columns[1].left).toStrictEqual(rawColumns[0].width);
     expect(metrics.columns[2].left).toStrictEqual(180);
   });
 
@@ -64,10 +64,10 @@ describe('getColumnMetrics', () => {
     const firstFrozenColumn: Column<Row> = { key: 'frozenColumn1', name: 'frozenColumn1', frozen: true };
     const secondFrozenColumn: Column<Row> = { key: 'frozenColumn2', name: 'frozenColumn2', frozen: true };
     const thirdFrozenColumn: Column<Row> = { key: 'frozenColumn3', name: 'frozenColumn3', frozen: true };
-    const columns = [...getInitialColumns(), secondFrozenColumn, thirdFrozenColumn];
-    columns.splice(2, 0, firstFrozenColumn);
+    const rawColumns = [...getInitialColumns(), secondFrozenColumn, thirdFrozenColumn];
+    rawColumns.splice(2, 0, firstFrozenColumn);
     const metrics = getColumnMetrics<Row, unknown>({
-      columns,
+      rawColumns,
       viewportWidth,
       minColumnWidth: 50,
       columnWidths: new Map(),
diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index aaccd96527..0a57b9415c 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -3,7 +3,7 @@ import { ToggleGroupFormatter } from '../formatters';
 import { SELECT_COLUMN_KEY } from '../Columns';
 
 interface Metrics<R, SR> {
-  columns: readonly Column<R, SR>[];
+  rawColumns: readonly Column<R, SR>[];
   columnWidths: ReadonlyMap<string, number>;
   minColumnWidth: number;
   viewportWidth: number;
@@ -31,7 +31,7 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
   let totalFrozenColumnWidth = 0;
   const { rawGroupBy } = metrics;
 
-  const columns = metrics.columns.map(metricsColumn => {
+  const columns = metrics.rawColumns.map(metricsColumn => {
     let width = getSpecifiedWidth(metricsColumn, metrics.columnWidths, metrics.viewportWidth);
 
     if (width === undefined) {

From 7a15b05117cc387ab291bead8a9712fddcd5504d Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 2 Sep 2020 09:42:31 -0500
Subject: [PATCH 72/79] add grouprow.less

---
 src/formatters/ToggleGroupFormatter.less | 47 ----------------
 src/formatters/ToggleGroupFormatter.tsx  |  2 +-
 style/grouprow.less                      | 68 ++++++++++++++++++++++++
 style/index.less                         |  1 +
 style/row.less                           | 23 --------
 5 files changed, 70 insertions(+), 71 deletions(-)
 delete mode 100644 src/formatters/ToggleGroupFormatter.less
 create mode 100644 style/grouprow.less

diff --git a/src/formatters/ToggleGroupFormatter.less b/src/formatters/ToggleGroupFormatter.less
deleted file mode 100644
index 501b0d1707..0000000000
--- a/src/formatters/ToggleGroupFormatter.less
+++ /dev/null
@@ -1,47 +0,0 @@
-.caret-collapsed,
-.caret-expanded {
-  position: relative;
-  margin-left: 4px;
-  vertical-align: -webkit-baseline-middle;
-  vertical-align: -moz-middle-with-baseline;
-}
-
-.caret-collapsed:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-bottom: 6px solid #000;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-}
-
-.caret-collapsed:after {
-  content: '';
-  position: absolute;
-  left: 2px;
-  top: 2px;
-  border-bottom: 4px solid #fff;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-}
-
-.caret-expanded:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  border-top: 6px solid #000;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-}
-
-.caret-expanded:after {
-  content: '';
-  position: absolute;
-  left: 2px;
-  top: 0;
-  border-top: 4px solid #fff;
-  border-left: 4px solid transparent;
-  border-right: 4px solid transparent;
-}
diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx
index 901ba92d84..5a561d0432 100644
--- a/src/formatters/ToggleGroupFormatter.tsx
+++ b/src/formatters/ToggleGroupFormatter.tsx
@@ -24,7 +24,7 @@ export function ToggleGroupFormatter<R, SR>({
         ref={cellRef}
         tabIndex={-1}
         onKeyDown={handleKeyDown}
-        className={isExpanded ? 'caret-expanded' : 'caret-collapsed'}
+        className={isExpanded ? 'rdg-caret-expanded' : 'rdg-caret-collapsed'}
       />
     </>
   );
diff --git a/style/grouprow.less b/style/grouprow.less
new file mode 100644
index 0000000000..e958eb3d3a
--- /dev/null
+++ b/style/grouprow.less
@@ -0,0 +1,68 @@
+.rdg-group-row > .rdg-cell:not(:last-child):not(.rdg-cell-frozen-last) {
+  border-right: none;
+}
+
+.rdg-group-row-selected {
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-shadow: inset 0 0 0 2px @selectedBorderColor;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  > .rdg-cell:first-child {
+    // preserve left border on the first frozen cell after scrolling to the right
+    box-shadow: inset 2px 0 0 0 @selectedBorderColor;
+  }
+}
+
+.rdg-caret-collapsed,
+.rdg-caret-expanded {
+  position: relative;
+  margin-left: 4px;
+  vertical-align: -webkit-baseline-middle;
+  vertical-align: -moz-middle-with-baseline;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+  }
+}
+
+.rdg-caret-collapsed:before {
+  top: 0;
+  left: 0;
+  border-bottom: 6px solid #000;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+}
+
+.rdg-caret-collapsed:after {
+  left: 2px;
+  top: 2px;
+  border-bottom: 4px solid #fff;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
+
+.rdg-caret-expanded:before {
+  top: 0;
+  left: 0;
+  border-top: 6px solid #000;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+}
+
+.rdg-caret-expanded:after {
+  left: 2px;
+  top: 0;
+  border-top: 4px solid #fff;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+}
diff --git a/style/index.less b/style/index.less
index 0a1d19fdd1..bd6f96e7c4 100644
--- a/style/index.less
+++ b/style/index.less
@@ -4,3 +4,4 @@
 @import 'editor.less';
 @import 'header.less';
 @import 'row.less';
+@import 'grouprow';
diff --git a/style/row.less b/style/row.less
index 7fdaf439fb..3158036d5a 100644
--- a/style/row.less
+++ b/style/row.less
@@ -33,26 +33,3 @@
     border-top: 2px solid darken(@borderColor, 20%);
   }
 }
-
-.rdg-group-row > .rdg-cell:not(:last-child):not(.rdg-cell-frozen-last) {
-  border-right: none;
-}
-
-.rdg-group-row-selected {
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    box-shadow: inset 0 0 0 2px @selectedBorderColor;
-    pointer-events: none;
-    z-index: 2;
-  }
-
-  > .rdg-cell:first-child {
-    // preserve left border on the first frozen cell after scrolling to the right
-    box-shadow: inset 2px 0 0 0 @selectedBorderColor;
-  }
-}

From 85b5e996b5090c71b87bc901390a6c6a23a4116b Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 2 Sep 2020 09:53:57 -0500
Subject: [PATCH 73/79] Add a comment

---
 src/utils/columnUtils.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/columnUtils.ts b/src/utils/columnUtils.ts
index 0a57b9415c..fa016e4ded 100644
--- a/src/utils/columnUtils.ts
+++ b/src/utils/columnUtils.ts
@@ -86,6 +86,7 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
     metrics.minColumnWidth
   );
 
+  // Filter rawGroupBy and ignore keys that do not match the columns prop
   const groupBy: string[] = [];
   const calculatedColumns: CalculatedColumn<R, SR>[] = columns.map((column, idx) => {
     // Every column should have a valid width as this stage

From bc56dc5cdc03d8e464c0fb8057d0e2b52279dff1 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 2 Sep 2020 12:42:17 -0500
Subject: [PATCH 74/79] Update src/GroupCell.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/GroupCell.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/GroupCell.tsx b/src/GroupCell.tsx
index bac381f684..a373d27ed5 100644
--- a/src/GroupCell.tsx
+++ b/src/GroupCell.tsx
@@ -58,7 +58,7 @@ function GroupCell<R, SR>({
       }}
       onClick={isLevelMatching ? toggleGroup : undefined}
     >
-      {column.groupFormatter && (column.rowGroup ? groupColumnIndex === column.idx : true) && (
+      {column.groupFormatter && (!column.rowGroup || groupColumnIndex === column.idx) && (
         <column.groupFormatter
           groupKey={groupKey}
           childRows={childRows}

From 31734512c6de18671e56899e44a5c8b45fe67ffb Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 2 Sep 2020 12:43:17 -0500
Subject: [PATCH 75/79] Update stories/demos/Grouping.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 stories/demos/Grouping.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index 074c26fe03..7bb3ffbe36 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -76,7 +76,7 @@ const columns: Column<Row>[] = [
   }
 ];
 
-function createRows(): Row[] {
+function createRows(): readonly Row[] {
   const rows: Row[] = [];
   for (let i = 1; i < 10000; i++) {
     rows.push({

From 18eb98ad74d8a4266780a4b391b98796fc89ef2f Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 2 Sep 2020 12:43:30 -0500
Subject: [PATCH 76/79] Update stories/demos/Grouping.tsx

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 stories/demos/Grouping.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/stories/demos/Grouping.tsx b/stories/demos/Grouping.tsx
index 7bb3ffbe36..6b816afa82 100644
--- a/stories/demos/Grouping.tsx
+++ b/stories/demos/Grouping.tsx
@@ -25,7 +25,7 @@ interface Option {
 
 const sports = ['Swimming', 'Gymnastics', 'Speed Skating', 'Cross Country Skiing', 'Short-Track Speed Skating', 'Diving', 'Cycling', 'Biathlon', 'Alpine Skiing', 'Ski Jumping', 'Nordic Combined', 'Athletics', 'Table Tennis', 'Tennis', 'Synchronized Swimming', 'Shooting', 'Rowing', 'Fencing', 'Equestrian', 'Canoeing', 'Bobsleigh', 'Badminton', 'Archery', 'Wrestling', 'Weightlifting', 'Waterpolo', 'Wrestling', 'Weightlifting'];
 
-const columns: Column<Row>[] = [
+const columns: readonly Column<Row>[] = [
   SelectColumn,
   {
     key: 'country',

From b41bf6e7559ff6001382e171ec2035ef96c58d60 Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Wed, 2 Sep 2020 12:43:44 -0500
Subject: [PATCH 77/79] Update style/index.less

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 style/index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/style/index.less b/style/index.less
index bd6f96e7c4..4bd39d7e40 100644
--- a/style/index.less
+++ b/style/index.less
@@ -4,4 +4,4 @@
 @import 'editor.less';
 @import 'header.less';
 @import 'row.less';
-@import 'grouprow';
+@import 'grouprow.less';

From 5132d471cc76535e22f19e301f49cebb051a8266 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 2 Sep 2020 12:46:01 -0500
Subject: [PATCH 78/79] Do not extract all the props

---
 src/GroupRow.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index 6ce99da066..f96ac4e9c1 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -18,9 +18,6 @@ function GroupedRow<R, SR>({
   eventBus,
   onFocus,
   onKeyDown,
-  'aria-setsize': ariaSetSize,
-  'aria-posinset': ariaPosInSet,
-  'aria-rowindex': ariaRowIndex,
   ...props
 }: GroupRowRendererProps<R, SR>) {
   // Select is always the first column
@@ -34,9 +31,6 @@ function GroupedRow<R, SR>({
     <div
       role="row"
       aria-level={level}
-      aria-setsize={ariaSetSize}
-      aria-posinset={ariaPosInSet}
-      aria-rowindex={ariaRowIndex}
       aria-expanded={isExpanded}
       className={clsx(
         'rdg-row',

From d2d1ff0ceaddc777c5758fd617e4983268f76039 Mon Sep 17 00:00:00 2001
From: Mahajan <amahajan@freewheel.com>
Date: Wed, 2 Sep 2020 12:55:19 -0500
Subject: [PATCH 79/79] Do not extract focus and keydown

---
 src/GroupRow.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
index f96ac4e9c1..1ccd21cd50 100644
--- a/src/GroupRow.tsx
+++ b/src/GroupRow.tsx
@@ -16,8 +16,6 @@ function GroupedRow<R, SR>({
   selectedCellIdx,
   isRowSelected,
   eventBus,
-  onFocus,
-  onKeyDown,
   ...props
 }: GroupRowRendererProps<R, SR>) {
   // Select is always the first column
@@ -39,8 +37,6 @@ function GroupedRow<R, SR>({
           'rdg-group-row-selected': selectedCellIdx === -1 // Select row if there is no selected cell
         })}
       onClick={selectGroup}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
       style={{ top }}
       {...props}
     >