react-data-grid headerRenderer 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?

btw, a function as value to headerRender works just fine for display a custom header. the sorting is the only thing that doesn't work. i tried a component but i thought in react you always want functional where possible for efficiency. — user2052618, Nov 16 '17 at 20:28

SteveB · Answer 1 · 2017-11-16T18:14:03.543

0

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
},

edited Nov 16 '17 at 18:14

answered Nov 16 '17 at 00:40

SteveB

894
7
15

i tried a component instead of a function and that didn't fix my non-sorting. the headerRenderer is typed to take a func so it should work with a function as well. i must need to do something extra i'm not doing. – user2052618 Nov 16 '17 at 17:08
So I did a little more research and you would need a component but it is not exported in react-data-grid at this time. I've tried changing the className to react-grid-HeaderCell-sortable but that doesn't work either. Lastly, I tried onClick={this. handleGridSort('task','ASC')} but that throws an error. I'm going to keep trying but we may need to fork react-data-grid and export SortableHeaderCell or put it as a request/bug with the author. Your thoughts? – SteveB Nov 17 '17 at 05:31

user2052618 · Answer 2 · 2017-11-28T14:38:12.420

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

????

react-data-grid headerRenderer Sorting

2 Answers2

Update