Grouping

CHANGELOG.md

@@ -18,6 +18,9 @@
     - `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`
@@ -26,6 +29,8 @@
   - `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:**

package.json

@@ -83,6 +83,7 @@
     "react-dom": "next",
     "react-popper": "^2.2.3",
     "react-select": "^3.1.0",
+    "react-sortable-hoc": "^1.11.0",
     "ts-jest": "^26.1.4",
     "ts-loader": "^8.0.2",
     "typescript": "~4.0.2"

src/Cell.tsx

@@ -79,16 +79,20 @@ function Cell<R, SR>({
       onContextMenu={wrapEvent(handleContextMenu, onContextMenu)}
       {...props}
     >
-      <column.formatter
-        column={column}
-        rowIdx={rowIdx}
-        row={row}
-        isCellSelected={isCellSelected}
-        isRowSelected={isRowSelected}
-        onRowSelectionChange={onRowSelectionChange}
-      />
-      {dragHandleProps && (
-        <div className="rdg-cell-drag-handle" {...dragHandleProps} />
+      {!column.rowGroup && (
+        <>
+          <column.formatter
+            column={column}
+            rowIdx={rowIdx}
+            row={row}
+            isCellSelected={isCellSelected}
+            isRowSelected={isRowSelected}
+            onRowSelectionChange={onRowSelectionChange}
+          />
+          {dragHandleProps && (
+            <div className="rdg-cell-drag-handle" {...dragHandleProps} />
+          )}
+        </>
       )}
     </div>
   );

src/Columns.tsx

@@ -3,10 +3,12 @@ import { SelectCellFormatter } from './formatters';
 import { Column } from './types';
 import { stopPropagation } from './utils';
 
+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,
@@ -33,5 +35,18 @@ export const SelectColumn: Column<any, any> = {
         onChange={props.onRowSelectionChange}
       />
     );
+  },
+  groupFormatter(props) {
+    return (
+      <SelectCellFormatter
+        aria-label="Select Group"
+        tabIndex={-1}
+        isCellSelected={props.isCellSelected}
+        value={props.isRowSelected}
+        onChange={props.onRowSelectionChange}
+        // Stop propagation to prevent row selection
+        onClick={stopPropagation}
+      />
+    );
   }
 };