LWC Custom Tree grid issue

When I want to rebuild/extend some of the functionality for LWC I usually get styling from SLDS. You can check markup here for tree-grid.

Salesforce flattens data and uses aria-expanded, aria-level for styling. I would suggest the same. Here is the script to flatten data. I also updated playground with simple styling for Id

UPDATE: Created separate playground to not override changes.

UPDATE Added expand/hide.

Here is sample row markup with some code.

// rendered.js
let data = [
    { Name:'st1', Id:1, age:'2', num:'342222222', Email:'[email protected]' },
    { Name:'st1', age:'2', Id:2, num:'342222222', Email:'[email protected]', children:[
        { Name:'st1child', Id:6, age:'2', num:'342222222', Email:'[email protected]' },
        { Name:'st1child', Id:7, age:'2', num:'342222222', Email:'[email protected]' }, ]
    },
    { Name:'st1', age:'2', Id:3, num:'342222222', Email:'[email protected]' },
    { Name:'st1', age:'2', Id:4, num:'342222222', Email:'[email protected]' },
    { Name:'st1', age:'2', Id:5, num:'342222222', Email:'[email protected]' },
];
const isExpandedDefault = false;
const flatIt = (data, level) => data.reduce((acc, row) => [...acc, Object.assign(row, {
    level,
    expanded: isExpandedDefault,
}), ...flatIt(row.children || [], level + 1)], []);
data = flatIt(data, 1);

<!-- parent.html -->
<template>
   <table class="slds-tree">
       <thead>
           <th>Name</th>

           <th>Age</th>

           <th>Num</th>

           <th>Email</th>
       </thead>
       <tbody>
           <template for:each={datas} for:item="d">
                <c-child key={d.Id} data={d}></c-child>
           </template>
       </tbody>

   </table>
</template>

// Child.js
export default class Child extends LightningElement {
    @track _data;

    renderedCallback() {

    }

    @api
    set data(value) {
        this._data = value;
        this.ariaExpanded = false;
        this.ariaLevel = value.level;
    }

    get data() {
        return this._data;
    }
}