I'm using Ant Design Table to display tree data. What I need to do is to color each level of indent differently to make it easier to distinguish.
Below is an example of how I'd want to style each row.
- Parent 1 (White)
- Child 1 (Grey)
- Child 2 (Grey)
- Child 1 (Darker grey)
- Child 1 (Even darker grey)
- Child 3 (Grey)
- Child 1 (Darker grey)
- Parent 2 (White)
- Child 1 (Grey)
Please take a look at Ant Designs' example here: https://codesandbox.io/s/4xmpr1?file=/demo.js
I have tried to use this property:
expandable= {{
expandedRowClassName: (record, index, indent) => {
....
}
}}
But Ant Design does not seem to call this function when using tree data, only if you have set the rowExpandable property to true. But in the case of tree data they arent 'expandable' in this sense so its not calling the function.
Has anyone done this before?