Merge pull request #463 from qiufeihong2018/fix/enable-column-width-resizing

fix:Enable Column Width Resizing for Merged Header Cells #446

Author: MichaelMatejko

src/lib/Behaviors/DefaultBehavior.ts

@@ -6,6 +6,7 @@ import {
   handleDoubleClick,
   getScrollOfScrollableElement,
   isSelectionKey,
+  getCompatibleCellAndTemplate,
 } from "../../core";
 import {
   KeyboardEvent,
@@ -49,6 +50,8 @@ export class DefaultBehavior extends Behavior {
     location: PointerLocation,
     state: State
   ): Behavior {
+    const { cell } = getCompatibleCellAndTemplate(state, location);
+    
     // changing behavior will disable all keyboard event handlers
     const target = event.target as HTMLDivElement;
     if (
@@ -57,7 +60,7 @@ export class DefaultBehavior extends Behavior {
         (event.pointerType === "touch" &&
           (target.className === "rg-touch-resize-handle" ||
             target.className === "rg-resize-handle"))) &&
-      location.row.idx === 0 &&
+      (location.row.idx === 0 || cell.type === "header") &&
       location.column.resizable &&
       location.cellX >
         location.column.width -

src/lib/Components/CellRenderer.tsx

@@ -134,7 +134,7 @@ export const CellRenderer: React.FC<CellRendererProps> = ({
             })}
         >
             {cellTemplate.render(cellToRender, isMobile ? isInEditMode : false, onCellChanged)}
-            {location.row.idx === 0 && location.column.resizable && <ResizeHandle />}
+            {(location.row.idx === 0 || cell.type === 'header' && state.props?.enableColumnResizeOnAllHeaders) && location.column.resizable && <ResizeHandle />}
             {state.enableGroupIdRender && cell?.groupId !== undefined && !(isInEditMode && isMobile) && (
                 <span className="rg-groupId">{cell.groupId}</span>
             )}

src/lib/Model/PublicModel.ts

@@ -35,8 +35,10 @@ export type SelectionMode =
 export interface ReactGridProps {
     /** Array of `Column`s */
     readonly columns: Column[];
-    /** Array of `Row`s  */
+    /** Array of `Row`s */
     readonly rows: Row<Cell>[];
+    /** Enables column resizing on all header cells */
+    readonly enableColumnResizeOnAllHeaders?: boolean;
     /** Object that contains available custom cell templates */
     readonly customCellTemplates?: CellTemplates;
     /** Focus position (managed constantly by outer app) */

src/test/TestGrid.tsx

@@ -524,6 +524,7 @@ export const TestGrid: React.FC<TestGridProps> = (props) => {
                   rows={rows}
                   columns={columns}
                   initialFocusLocation={config.initialFocusLocation}
+                  enableColumnResizeOnAllHeaders={config.enableColumnResizeOnAllHeaders}
                   focusLocation={enableFrozenFocus ? config.focusLocation : undefined}
                   // onCellsChanged={handleChangesTest2} // TODO This handler should be allowed
                   onCellsChanged={handleChanges}

src/test/testEnvConfig.ts

@@ -8,6 +8,7 @@ export const config: TestConfig = {
     pinToBody: false,
     additionalContent: false,
     flexRow: false,
+    enableColumnResizeOnAllHeaders: false,
 
     rgViewportHeight: 600,
     rgViewportWidth: 1150,
@@ -196,6 +197,8 @@ export interface TestConfig {
     additionalContent: boolean;
     flexRow: boolean;
 
+    enableColumnResizeOnAllHeaders: boolean;
+
     rgViewportHeight: number;
     rgViewportWidth: number;
     margin: string;