Search code examples
javascriptreactjsmaterial-uimaterial-designmaterial-table

React material-table: Color rows in data-tree

I am using material-table in my React project. I have 3 levels of the data tree. Here it is the first one:

enter image description here

Is it possible when I click the first of the 2 items on 1st Level in data tree table to color it so it would be easier to see that values under it are child elements. Like this: enter image description here

Also I would be even happier if it is possible to color it when I am passing data to it. Here it is how I am passing data:

data={[
        {
          id: 1, // MAIN ELEMENT 
          name: "Parent",
          value: `Parent`,
        },
        {
          id: 2, //CHILD OF THE MAIN ELEMENT
          name: "Child",
          value: `Child`,
          parentId: 1,
        }]}

Is there an option to color parent Element even before opening it, so it would be clear that it is PARENT and other is CHILD?

UPDATE:

Here is codesandbox example. As you can see when you open Parent1 Parent2 seems to be under Parent1. I want to make it clear that it is NOT under it.

https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js

Solution

  • Let we talk about this problem first. It's neither programmatic nor css problem. It's just the problem how you show data, in other words, UX only.

    There are several ways to achive, this is my work example: https://codesandbox.io/s/withered-dust-hb882?file=/src/App.js

    Basically I just add one first column for parent only, that's it.