title: What is the best approach to render nested rows in a data-table?
body: <p>I'm planning to create a tree data table for file browser and wondering how to render rows for files in a folder. The data is in a flat list of file paths but I'm able to re-format it to be the same as the structure of the folders.</p>
  <p>I am debating if I have to render children of a folder as nested rows inside a row or if I could have them as sibling rows and just modify the padding to indicate the hierarchy?</p>
  <p>This is how the data looks like:</p>
  <pre><code>[ {
      &quot;name&quot; : &quot;Parent Folder&quot;,
      &quot;path&quot; : &quot;/home/desktop/report&quot;,
      &quot;size&quot; : 2156754,
      &quot;createdOn&quot; : -1,
      &quot;fileType&quot; : &quot;FOLDER&quot;,
      &quot;itemId&quot; : 478202,
    }, {
      &quot;name&quot; : &quot;nested file&quot;,
      &quot;path&quot; : &quot;/home/desktop/report/test.js&quot;,
      &quot;size&quot; : 15402,
      &quot;createdOn&quot; : 1595072355000,
      &quot;fileType&quot; : &quot;FILE&quot;,
      &quot;itemId&quot; : 478203,
      &quot;parentId&quot; : 478202,
    }, {
      &quot;name&quot; : &quot;nested folder&quot;,
      &quot;path&quot; : &quot;/home/desktop/report/build&quot;,
      &quot;size&quot; : 2141352,
      &quot;createdOn&quot; : 1595072355000,
      &quot;fileType&quot; : &quot;FOLDER&quot;,
      &quot;itemId&quot; : 478204,
      &quot;parentId&quot; : 478202,
      &quot;faulty&quot; : false,
      &quot;newItemCount&quot; : 478498,
      &quot;itemCount&quot; : 478498
    },
    {
      &quot;name&quot; : &quot;nested folder&quot;,
      &quot;path&quot; : &quot;/home/desktop/report/build/main&quot;,
      &quot;size&quot; : 2141352,
      &quot;createdOn&quot; : 1595072355000,
      &quot;fileType&quot; : &quot;FILE&quot;,
      &quot;itemId&quot; : 478204,
      &quot;parentId&quot; : 478204,
    }
    ]
  </code></pre>