React-data-grid: Updated docs and status regarding headerRenderer

[Luis-Palacios]

• Have you already searched for similar issues? Please help us out and double-check first!
  Yes, I have seen lot's of issues and PR related to this, however, it is still not clear for me what if the current status just to mention a few #410 #1148 #572 looking at this it seems is possible to use a headerRenderer and Sortable: True but looking at the current state of the code here it seems is not?

---

Which version of React JS are you using?

✅ Officially supported ✅

• [x] v15.4.x

☣️ Not officially supported, expect warnings and errors ☣️

• [x] v16.x.x

---

Which browser are you using?

✅ Officially supported ✅

• [x] Chrome

I'm submitting a ...

• [x] 🐛 Bug Report
• [x] 💡 Feature Request

---

Issue Details

• Current behavior
  If I pass a custom headerRenderer and Sortable as true I get the following error:

  Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
  

  If I pass the headerRenderer and Sortable as false I get no error and it works correctly.

• Desired behavior

• If I pass headerRendered and Sortable true it should work?
• Update docs to indicate how to use a headerRenderer
• Update docs to indicate if possible to use a headerRender with sortable true
• Update docs to include an example of using a Custom headerRenderer
• Provide a way to pass specific styles or CSS class to each column header?

I'm willing to help if needed with a PR for docs or even code, but I would like to know first the current status of this as is not clear on the current docs. I have provided an example repo that test with the latest react version and the officially supported v15.4.x

I created an example repo that demonstrates the issue here: Example repo and I can see more details about the error there:

If you change sortable to false it should correctly

I also created a branch that uses the officially supported react version(15.4.x) and the error there is on the console:

Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in

And btw thanks for this awesome grid it has really helped us deliver great value to our clients.

[Ragzzy-R]

can confirm. This happens on 5.0.5 as well as 6.1.0 (they are the versions I tried). After a bit of digging the source, I found the following.

When u set sortable = true, RDG loads up the component SortableHeaderCell to render the headers of the grid.

I couldnt find the code of 6.1.0 on github so i tried looking into the minified file and found this

n=this.props.headerRenderer?f.cloneElement(this.props.headerRenderer,this.props):this.props.column.name;

the headerRenderer we pass is a function reference of our component, but cloneElement requires a proper React-ish object (value returned by React.CreateElement()).

this has been fixed on the codebase with this commit

but seems like it has not yet arrived to the npm package. so for time being, use the following workaround.

when u pass headerRenderer to your column, instead of this

columnDef[i].headerRenderer = MySuperHeaderRender

do this

columnDef[i].headerRenderer = React.createElement(MySuperHeaderRender, {})

this passes a valid react object to the SortableHeaderCell. and dont worry about the props, because RDG anyways pass proper props when it clones.

[Luis-Palacios]

Since I only needed custom styling for different columns I ended up discovering and using an undocumented cell property called cellClass which allows me to pass a CSS class for the columns that I want. That worked for me I tried looking around the docs to see if I could create a PR to add that property for the docs but I wasn't able to figure out where It needed to be added