Grouping (#2106)

* Initial commit

* Group by multiple columns

* Cleanup viewport rows

* memoize group row, add groupRowRenderer prop

* Cleanup useViewportColumns

* Fix keys

* Add column.groupFormatter prop and checkbox column

* Checkbox selection for group row

* Validate groupBy columns

* Ckeck isSelectable

* ColSpan

* Disable copy/paste and cell drag down on treegrid

* Add treegrid aria attributes

* Fix rowsCount

* Fix rowsCount

* Fix aria-rowindex and aria-rowcount and update grouprow props

* Change expandedGroupIds/onExpandedGroupIdsChange to props

* Use 1 loop

* Cleanup

* Add GroupCell component

* Add row selection for group rows

* Cleanup

* Handle Home and End keys for GroupRow

* Clanup navigation logic

* Cleanup

* Improve navigation logic

* Cleanup

* Handle copy/paste

* Grouping story

* Add select to choose group by field

* Use SortableSelect

* Cleanup

* Improve types

* Fic type

* Address comments

* useFocusRef

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update src/types.ts

Co-authored-by: Nicolas Stepien <[email protected]>

* Update src/types.ts

Co-authored-by: Nicolas Stepien <[email protected]>

* Fix types

* Add stopPropagation helper

* Move onExpandedGroupIdsChange check outside

* Cleanup

* Add groupFocusable and remove __isGroup field

* fix dependencies

* Fix expandedGroupId

* Fix row navigation

* fix border styles

* Use a single array

* Cleanup groupBy columns logic

* Link TS issue

* Add icon prop to ToggleGroupedFormatter

* Cell drag is not supported on a treegrid

* Add caret icon

* Center align

* -moz-middle-with-baseline;

* Update changelog

* Update src/utils/columnUtils.ts

Co-authored-by: Nicolas Stepien <[email protected]>

* Address comments

* Use the suggested sorting logic

* Do not mutate formatterOptions

* Make group cell clickable

* Mock less files for tests

* Inline getVerticalRangeToRender

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update src/formatters/ToggleGroupFormatter.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update src/formatters/ToggleGroupFormatter.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Revert jest changes

* Cleanup parameters

* add grouprow.less

* Add a comment

* Update src/GroupCell.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update stories/demos/Grouping.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update stories/demos/Grouping.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update style/index.less

Co-authored-by: Nicolas Stepien <[email protected]>

* Do not extract all the props

* Do not extract focus and keydown

Co-authored-by: Nicolas Stepien <[email protected]>
Co-authored-by: Nicolas Stepien <[email protected]>

Author: amanmahajan7

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}
+      />
+    );
   }
 };