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]>
adazzle · Sep 2, 2020 · e8e950d · e8e950d
1 parent ebfaa14
commit e8e950d
Show file tree

Hide file tree

Showing 32 changed files with 889 additions and 386 deletions.
diff --git a/CHANGELOG.md b/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:**

diff --git a/package.json b/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"

diff --git a/src/Cell.tsx b/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>
   );

diff --git a/src/Columns.tsx b/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}
+      />
+    );
   }
 };