title: How to display table in parent child hierarchy?
body: <p>I have array look like this.</p>
  
  <pre><code>var recursiveArray = [
      {
          "ProductCode": "50007",
          "SerialNumber": 288890,
          "SubAssemblyNumber": 288891,
          "Children": [
              {
              "ProductCode": "50007",
              "SerialNumber": 288891,
              "SubAssemblyNumber": 288892,
              "Children": [
                  {
                      "ProductCode": "51660",
                      "SerialNumber": 288892,
                      "SubAssemblyNumber": 288894
                  }
              ]
              }, {
                  "ProductCode": "51660",
                  "SerialNumber": 288891,
                  "SubAssemblyNumber": 288893
              }
          ]
      }, {
          "ProductCode": "51660",
          "SerialNumber": 288890,
          "SubAssemblyNumber": 288895,
          "Children": [{
              "ProductCode": "50007",
              "SerialNumber": 288895,
              "SubAssemblyNumber": 288896
          }]
      }
  ];
  </code></pre>
  
  <p><a href="https://jsfiddle.net/patel33hardik/6ps8n3rL/4/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>What I have done is in this fiddle to display table but I could not find how to give indentation at a deep level.</p>
  
  <p>I want output as following:</p>
  
  <p><a href="https://i.stack.imgur.com/51Ubw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/51Ubw.png" alt="Output"></a></p>