react-data-grid headerRenderer Sorting - sorting

Question

How is sorting and filtering implemented when using a custom header cell in the react-data-grid?
{
key: "myColumn1",
name: "My Column Name",
headerRenderer: this.renderHeader,
sortable: true,
filterable: true
},
{
key: "myColumn2",
name: "My Other Column Name",
sortable: true,
filterable: true
}
...
renderHeader(props){
return (<extra-stuff>
{props.column.name}
</extra-stuff>)
}
I have myColumn2 sorting fine but nothing happens with the custom header: myColumn1. What do I need to do in renderHeader(){} to get sorting (and filtering, but mainly sorting) working?

Answer 1

Instead of trying to call a function in headerRenderer, put a component instead:
{
key: "myColumn1",
name: "My Column Name",
headerRenderer: <renderHeader value={this.renderHeader()} />,
sortable: true,
filterable: true
},

Answer 2

Looks like a solution was checked-in for this almost a year ago. I do work on an intranet and don't have direct internet access for development so maybe i have an older version. Since I can't get the version in my environment I'll wait for someone to verify that the latest version works as expected before I accept my own answer (or I'll try to get the latest version with the change in there.)
One other thing I will have to do with the way the solution was implemented is stop propagation of the click event because in my custom header i have a ReactIcon that is clickable to change from status wording to a menu. So, if they click right on the icon in the header do the name/menu change and if they click anywhere else in the header then do the sort. I'll have to look up how to do that in React.
Update
I took the changes from the check-in in the link above and added them to my react-data-grid.js and it works great. I.e. I had to add the changes to the pure javascript version of the code that npm pulled into our node_modules.
I also did have to use e.stopPropagation() call in my headerRenderer like i thought i'd have to so that clicking the icon i have in the headerRenderer would not sort when click (but just do a different operation) but it was easy to add.
I do have one question about the change i made to my js which here is a piece of the change...
return React.createElement(
'div',
{className: className,
onClick: this.onClick,
style: {cursor: 'pointer'} },
React.createElement(
'span',
{ className: 'pull-right' },
this.getSortByText()
),
//change was here from just: this.props.column.name
this.props.column.headerRenderer? this.props.column.headerRenderer(this.props) : this.props.column.name
);
How would i have done this in JavaScript so that it would work whether my headerRenderer was ()=>{ return <span>...</span> } or <MyComponent /> ???
Since i always use functions for my headerRenderer i just did the change so that it worked the one way but would like to know how to make the change so it works both ways. Something like this? ...
this.props.column.headerRenderer?
(isFunction(this.props.column.headerRenderer)? this.props.column.headerRenderer(this.props) : React.createElement(this.props.column.headerRenderer, {...this.props}) )
:
this.props.column.name
????