{"action":"closed","issue":{"url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1014","repository_url":"https://api.github.com/repos/adazzle/react-data-grid","labels_url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1014/labels{/name}","comments_url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1014/comments","events_url":"https://api.github.com/repos/adazzle/react-data-grid/issues/1014/events","html_url":"https://github.com/adazzle/react-data-grid/issues/1014","id":272816191,"node_id":"MDU6SXNzdWUyNzI4MTYxOTE=","number":1014,"title":"Grouping fails when dragging column - Cannot read property 'types' of undefined (undefined = dataTransfer)","user":{"login":"mpkelly","id":6851384,"node_id":"MDQ6VXNlcjY4NTEzODQ=","avatar_url":"https://avatars1.githubusercontent.com/u/6851384?v=4","gravatar_id":"","url":"https://api.github.com/users/mpkelly","html_url":"https://github.com/mpkelly","followers_url":"https://api.github.com/users/mpkelly/followers","following_url":"https://api.github.com/users/mpkelly/following{/other_user}","gists_url":"https://api.github.com/users/mpkelly/gists{/gist_id}","starred_url":"https://api.github.com/users/mpkelly/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mpkelly/subscriptions","organizations_url":"https://api.github.com/users/mpkelly/orgs","repos_url":"https://api.github.com/users/mpkelly/repos","events_url":"https://api.github.com/users/mpkelly/events{/privacy}","received_events_url":"https://api.github.com/users/mpkelly/received_events","type":"User","site_admin":false},"labels":[{"id":356756874,"node_id":"MDU6TGFiZWwzNTY3NTY4NzQ=","url":"https://api.github.com/repos/adazzle/react-data-grid/labels/Will%20Accept%20PR","name":"Will Accept PR","color":"e99695","default":false},{"id":729409653,"node_id":"MDU6TGFiZWw3Mjk0MDk2NTM=","url":"https://api.github.com/repos/adazzle/react-data-grid/labels/good%20first%20issue","name":"good first issue","color":"5319e7","default":true},{"id":183927596,"node_id":"MDU6TGFiZWwxODM5Mjc1OTY=","url":"https://api.github.com/repos/adazzle/react-data-grid/labels/wontfix","name":"wontfix","color":"ffffff","default":true}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":8,"created_at":"2017-11-10T04:25:23Z","updated_at":"2018-07-19T13:39:12Z","closed_at":"2018-07-19T13:39:12Z","author_association":"NONE","body":"### Which version of React JS are you using?\r\n\r\n✅ Officially supported ✅\r\n- [ ] v15.4.x\r\n\r\n⚠️ Not officially supported, expect warnings ⚠️\r\n- [ ] v15.5.x\r\n- [x] v15.6.x\r\n\r\n☣️ Not officially supported, expect warnings and errors ☣️\r\n- [ ] v16.x.x\r\n\r\n---\r\n\r\n### Which browser are you using?\r\n\r\n✅ Officially supported ✅\r\n- [ ] IE 9 / IE 10 / IE 11\r\n- [ ] Edge\r\n- [x] Chrome\r\n\r\n⚠️ Not officially supported, but \"should work\" ⚠️\r\n- [ ] Firefox\r\n- [ ] Safari\r\n\r\n---\r\n\r\n### I'm submitting a ...\r\n\r\n- [x] 🐛 Bug Report\r\n- [ ] 💡 Feature Request\r\n\r\n> 👋 Need general support? Not sure about how to use React itself, or how to get started with the Grid?\r\n> Please do not submit support request here. Instead see\r\n\r\n> https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md\r\n\r\n---\r\n\r\n### Issue Details\r\n\r\nI would like to support sorting, filtering and grouping and have created the implementation below that I based on the official examples. However, when I try to drag a column to I get the following error:\r\n\r\n```\r\nbundle.js:176335 Uncaught TypeError: Cannot read property 'types' of undefined\r\n    at matchNativeItemType (bundle.js:176335)\r\n    at HTML5Backend.handleTopDragStart (bundle.js:175810)\r\n    at GestureDetector.Instance.triggerEvent [as trigger] (bundle.js:80425)\r\n    at Object.dragGesture [as handler] (bundle.js:80580)\r\n    at Object.triggerGesture (bundle.js:80128)\r\n    at Array.forEach (<anonymous>)\r\n    at Object.each (bundle.js:79389)\r\n    at Object.detect (bundle.js:80125)\r\n    at Object.doDetect (bundle.js:79848)\r\n    at HTMLDocument.onTouchHandler (bundle.js:79784)\r\n```\r\n\r\nThe function that errors is:\r\n\r\n```JavaScript\r\n\tfunction matchNativeItemType(dataTransfer) {\r\n\t\tvar dataTransferTypes = Array.prototype.slice.call(dataTransfer.types || []); //ERROR\r\n\r\n\t\treturn Object.keys(nativeTypesConfig).filter(function (nativeItemType) {\r\n\t\t\tvar matchesTypes = nativeTypesConfig[nativeItemType].matchesTypes;\r\n\r\n\t\t\treturn matchesTypes.some(function (t) {\r\n\t\t\t\treturn dataTransferTypes.indexOf(t) > -1;\r\n\t\t\t});\r\n\t\t})[0] || null;\r\n\t}\r\n\r\n```\r\n\r\nMy code\r\n\r\n```Typescript\r\nimport * as React from \"react\";\r\nimport * as ReactDataGrid from \"react-data-grid\";\r\nimport {ToolsPanel, Data, Draggable} from \"react-data-grid-addons\";\r\n\r\nexport interface DashboardTaskGridProps {\r\n\r\n}\r\n\r\nexport interface DashboardTaskGridState {\r\n  rows:any[];\r\n  filters: any;\r\n  sortColumn:string;\r\n  groupBy:any[];\r\n  expandedRows:any;\r\n  sortDirection:string;\r\n}\r\n\r\nexport class DashboardTaskGrid extends React.Component<DashboardTaskGridProps, DashboardTaskGridState> {\r\n\r\n  private columns: any[];\r\n  public grid: any;\r\n\r\n  constructor(props: DashboardTaskGridProps) {\r\n    super(props);\r\n    this.columns = [\r\n      { key: 'id', name: 'ID', draggable: true},\r\n      { key: 'title', name: 'Title', sortable: true, filterable:true, draggable: true},\r\n      { key: 'count', name: 'Count', sortable: true, filterable:true, draggable: true} ];\r\n\r\n    this.state = {\r\n      rows: this.createRows(),\r\n      filters: {},\r\n      groupBy: [],\r\n      sortColumn:null,\r\n      sortDirection: null,\r\n      expandedRows: {}\r\n    };\r\n  }\r\n\r\n  createRows = () => {\r\n    let rows = [];\r\n    for (let i = 1; i < 1000; i++) {\r\n      rows.push({\r\n        id: i,\r\n        title: 'Title ' + i,\r\n        count: i * 1000\r\n      });\r\n    }\r\n\r\n   return rows;\r\n  };\r\n\r\n  handleGridSort = (sortColumn, sortDirection) => {\r\n    this.setState({ sortColumn: sortColumn, sortDirection: sortDirection });\r\n  };\r\n\r\n  getSize = () => {\r\n    return this.getRows().length;\r\n  };\r\n\r\n  getRows = () => {\r\n    return Data.Selectors.getRows(this.state);\r\n  };\r\n\r\n  rowGetter = (index) => {\r\n    const rows = this.getRows();\r\n    return rows[index];  };\r\n\r\n  handleColumnFilter = (filter:any) => {\r\n    let newFilters = {...this.state.filters};\r\n    if (filter.filterTerm) {\r\n      newFilters[filter.column.key] = filter;\r\n    } else {\r\n      delete newFilters[filter.column.key];\r\n    }\r\n    this.setState({ filters: newFilters });\r\n  };\r\n\r\n  onColumnGroupAdded = (colName) => {\r\n    let columnGroups = this.state.groupBy.slice(0);\r\n    let activeColumn = this.columns.find((c) => c.key === colName)\r\n    let isNotInGroups = columnGroups.find((c) => activeColumn.key === c.name) == null;\r\n    if (isNotInGroups) {\r\n      columnGroups.push({key: activeColumn.key, name: activeColumn.name});\r\n    }\r\n\r\n    this.setState({groupBy: columnGroups});\r\n  };\r\n\r\n  onColumnGroupDeleted = (name) => {\r\n    let columnGroups = this.state.groupBy.filter(function(g){\r\n      return typeof g === 'string' ? g !== name : g.key !== name;\r\n    });\r\n    this.setState({groupBy: columnGroups});\r\n  };\r\n\r\n  onRowExpandToggle = ({ columnGroupName, name, shouldExpand }) => {\r\n    let expandedRows = Object.assign({}, this.state.expandedRows);\r\n    expandedRows[columnGroupName] = Object.assign({}, expandedRows[columnGroupName]);\r\n    expandedRows[columnGroupName][name] = {isExpanded: shouldExpand};\r\n    this.setState({expandedRows: expandedRows});\r\n  };\r\n\r\n  createToolbar = () => {\r\n    return (\r\n      <ToolsPanel.AdvancedToolbar>\r\n        <ToolsPanel.GroupedColumnsPanel\r\n          groupBy={this.state.groupBy}\r\n          onColumnGroupAdded={this.onColumnGroupAdded}\r\n          onColumnGroupDeleted={this.onColumnGroupDeleted}/>\r\n      </ToolsPanel.AdvancedToolbar>\r\n    );\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Draggable.Container>\r\n        <ReactDataGrid\r\n          ref={ node => {\r\n            this.grid = node;\r\n            this.grid.onToggleFilter();\r\n          } }\r\n          onGridSort={this.handleGridSort}\r\n          onAddFilter={this.handleColumnFilter}\r\n          onRowExpandToggle={this.onRowExpandToggle}\r\n          enableDragAndDrop={true}\r\n          columns={this.columns}\r\n          toolbar={this.createToolbar()}\r\n          rowGetter={this.rowGetter}\r\n          rowsCount={this.getSize()}\r\n          canFilter={true}\r\n          onClearFilters={()=>this.setState({filters: {}})}\r\n          minHeight={500} />\r\n        </Draggable.Container>\r\n    )\r\n  }\r\n}\r\n\r\n```\r\nIs this a bug or am I missing a dependency somewhere?\r\n\r\n"}}
{"actor":{"display_login":"stale"}}