'Change background color of children rows based on their indent level in Ant design Table

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?

cssreactjsantd


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions