Fix grouping example (#1311)

* Remove unnecessary setScrollLeft

* Fix grouping example

* Wrap header cell with DraggableHeader cell
Add HeaderRowType constant
Use column name instead of key for group name

packages/common/constants/HeaderRowType.js

@@ -0,0 +1,2 @@
+export const HEADER = 'header';
+export const FILTER = 'filter';

packages/common/constants/index.js

@@ -1,5 +1,6 @@
 import * as CellNavigationMode from './CellNavigationMode';
 import * as EventTypes from './EventTypes';
+import * as HeaderRowType from './HeaderRowType';
 import keyMirror from 'keymirror';
 
 
@@ -23,6 +24,7 @@ const CellExpand = {
 export {
   CellNavigationMode,
   EventTypes,
+  HeaderRowType,
   UpdateActions,
   CellExpand,
   DragItemTypes

packages/react-data-grid-addons/src/data/RowGrouper.js

@@ -22,14 +22,15 @@ class RowGrouper {
   groupRowsByColumn(rows, columnIndex = 0) {
     let nextColumnIndex = columnIndex;
     let columnName = this.columns.length > 0 && typeof this.columns[columnIndex] === 'string' ? this.columns[columnIndex] : this.columns[columnIndex].key;
+    const columnGroupDisplayName = this.columns.length > 0 && typeof this.columns[columnIndex] === 'string' ? this.columns[columnIndex] : this.columns[columnIndex].name;
     let groupedRows = this.resolver.getGroupedRows(rows, columnName);
     let keys = this.resolver.getGroupKeys(groupedRows);
     let dataviewRows = this.resolver.initRowsCollection();
 
     for (let i = 0; i < keys.length; i++) {
       let key = keys[i];
       let isExpanded = this.isRowExpanded(columnName, key);
-      let rowGroupHeader = {name: key, __metaData: {isGroup: true, treeDepth: columnIndex, isExpanded: isExpanded, columnGroupName: columnName}};
+      let rowGroupHeader = {name: key, __metaData: {isGroup: true, treeDepth: columnIndex, isExpanded: isExpanded, columnGroupName: columnName, columnGroupDisplayName}};
 
       dataviewRows = this.resolver.addHeaderRow(rowGroupHeader, dataviewRows);
 

packages/react-data-grid-addons/src/draggable/DraggableHeaderCell.js

@@ -1,40 +1,30 @@
 import { DragSource } from 'react-dnd';
-import React, {Component} from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { DragItemTypes } from 'common/constants';
 
 class DraggableHeaderCell extends Component {
-
   componentDidMount() {
-    let connectDragPreview = this.props.connectDragPreview;
-    let img = new Image();
+    const { connectDragPreview } = this.props;
+    const img = new Image();
     img.src = './assets/images/drag_column_full.png';
-    img.onload = function() {
-      connectDragPreview(img);
-    };
-  }
-
-  setScrollLeft(scrollLeft) {
-    if (this.node) {
-      node.style.webkitTransform = `translate3d(${scrollLeft}px, 0px, 0px)`;
-      node.style.transform = `translate3d(${scrollLeft}px, 0px, 0px)`;
-    }
+    img.onload = () => connectDragPreview(img);
   }
 
   render() {
-    const { connectDragSource, isDragging} = this.props;
+    const { connectDragSource, isDragging } = this.props;
     if (isDragging) {
       return null;
     }
-    return connectDragSource(<div ref={node => this.node = node} style={{cursor: 'move'}}>{this.props.renderHeaderCell(this.props)}</div>);
+    return connectDragSource(<div style={{ cursor: 'move' }}>{this.props.children}</div>);
   }
 }
 
 DraggableHeaderCell.propTypes = {
   connectDragSource: PropTypes.func.isRequired,
   connectDragPreview: PropTypes.func.isRequired,
   isDragging: PropTypes.bool.isRequired,
-  renderHeaderCell: PropTypes.func.isRequired
+  children: PropTypes.element.isRequired
 };
 
 function collect(connect, monitor) {

packages/react-data-grid-examples/src/scripts/example12-customRowRenderer.js

@@ -10,11 +10,6 @@ class RowRenderer extends React.Component {
     renderBaseRow: PropTypes.func.isRequired
   };
 
-  setScrollLeft = (scrollBy) => {
-    // if you want freeze columns to work, you need to make sure you implement this as apass through
-    this.row.setScrollLeft(scrollBy);
-  };
-
   getRowStyle = () => {
     return {
       color: this.getRowBackground()