I've run into an issue when using both grouping and a custom cell with a react grid. A new column seems to be created in the grouping row, and the other rows are pushed to the left, which causes the headers to no longer line up.
Here's a link to a fork of the grouping example from the docs, with a custom cell added that shows this: https://stackblitz.com/edit/react-t9ce44?file=app%2Fmain.js
Did I miss something, or is it bugged?
2 Answers, 1 is accepted
0
Hello, Spencer,
Thank you for the example.
This issue occurs because the customCell render is fired for every cell even form the groupHeaderCell. In this case, we have to check the cell rowType and if it is groupHeader to return null:
https://stackblitz.com/edit/react-t9ce44-rljdkt?file=app/main.js
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Thank you for the example.
This issue occurs because the customCell render is fired for every cell even form the groupHeaderCell. In this case, we have to check the cell rowType and if it is groupHeader to return null:
class CustomCell extends React.Component { render() { const value = this.props.dataItem[this.props.field]; if (this.props.rowType === "groupHeader") { return null } return ( <td style={{ color: value ? this.props.myProp[0].color : this.props.myProp[1].color }}> { (value === true || value === false) ? value.toString() : ""} </td> ); }}https://stackblitz.com/edit/react-t9ce44-rljdkt?file=app/main.js
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Spencer
Top achievements
Rank 1
Rank 1
answered on 10 Jan 2019, 03:08 PM
Ah, thank you! That's exactly what I was missing.