title: React material-table: Color rows in data-tree
body: <p>I am using material-table in my React project. I have 3 levels of the data tree. Here it is the first one:</p>
  <p><a href="https://i.stack.imgur.com/Njm8J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Njm8J.png" alt="enter image description here" /></a></p>
  <p>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:
  <a href="https://i.stack.imgur.com/WjFLb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WjFLb.png" alt="enter image description here" /></a></p>
  <p>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:</p>
  <pre><code>data={[
          {
            id: 1, // MAIN ELEMENT 
            name: &quot;Parent&quot;,
            value: `Parent`,
          },
          {
            id: 2, //CHILD OF THE MAIN ELEMENT
            name: &quot;Child&quot;,
            value: `Child`,
            parentId: 1,
          }]}
  </code></pre>
  <p>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?</p>
  <p>UPDATE:</p>
  <p>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.</p>
  <p><a href="https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/jolly-germain-6fncr?file=/src/App.js</a></p>