Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated docs and status regarding headerRenderer #1710

Closed
5 tasks done
Luis-Palacios opened this issue Jul 11, 2019 · 3 comments
Closed
5 tasks done

Updated docs and status regarding headerRenderer #1710

Luis-Palacios opened this issue Jul 11, 2019 · 3 comments

Comments

@Luis-Palacios
Copy link
Contributor

Luis-Palacios commented Jul 11, 2019


Which version of React JS are you using?

✅ Officially supported ✅

  • v15.4.x

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

  • v16.x.x

Which browser are you using?

✅ Officially supported ✅

  • Chrome

I'm submitting a ...

  • 🐛 Bug Report
  • 💡 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

  1. If I pass headerRendered and Sortable true it should work?
  2. Update docs to indicate how to use a headerRenderer
  3. Update docs to indicate if possible to use a headerRender with sortable true
  4. Update docs to include an example of using a Custom headerRenderer
  5. 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:

image

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
Copy link

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

Screenshot 2019-07-30 at 5 25 55 PM

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
Copy link
Contributor Author

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

@nstepien
Copy link
Contributor

Closing in favor of #2575

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants