Display hierarchical data in table

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Handsontable Nested Rows Example</title> 
  <style>
    html, body {
      margin: 0;
      height: 100%;
    }
    #hot {
      height: 100%;
      width: 100%;
    }
  </style>
<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
</head>
<body>
  <div id="hot"></div>
 
  <script>
    const data = [
      {
        id: 1,
        name: 'Parent 1',
        __children: [
          { id: 2, name: 'Child 1.1',
          __children:[
            {id: 3, name: 'Child of Child 1.1.1'}
          ] }, 
        ]
      }
    ];

    const container = document.getElementById('hot');

    const hot = new Handsontable(container, {
      data: data,
      colHeaders: ['ID', 'Name'],
      columns: [
        { data: 'id', type: 'numeric' },
        { data: 'name', type: 'text' }
      ],
      nestedRows: true,
      rowHeaders: true,
      licenseKey: 'non-commercial-and-evaluation', // Use your key for production
      contextMenu: true
    });
  </script>
</body>
</html>