Is there a way to create a dynamic nested table from Json/Html Code using the JsPDF-AutoTable library in Angular?

Question

I'm looking to create a Nested Table using the Auto-table library by inputing a json file or html code.

I referred to this thread on Stack Overflow and it mentioned there was no native support for nested tables.

The table should be generated something similar to this where it will have nested tables inside each row.

Table Sample

JSON File

{
   "Topic":"Travel",
   "Status":"Active",
   "Currency":"EUR",
   "Items":[
      {
         "Code":"Airplane",
         "Mode":"Air Travel",
         "Quantity":5
      },
      {
         "Code":"Train",
         "Mode":"Public Transport",
         "Quantity":30
      }
   ]
}

HTML

<table class="jh-type-object jh-root">
  <tr>
    <th class="jh-key jh-object-key">Topic</th>
    <td class="jh-value jh-object-value"><span class="jh-type-string">Travel</span></td>
  </tr>
  <tr>
    <th class="jh-key jh-object-key">Status</th>
    <td class="jh-value jh-object-value"><span class="jh-type-string">Active</span></td>
  </tr>
  <tr>
    <th class="jh-key jh-object-key">Currency</th>
    <td class="jh-value jh-object-value"><span class="jh-type-string">EUR</span></td>
  </tr>
  <tr>
    <th class="jh-key jh-object-key">Items</th>
    <td class="jh-value jh-object-value">
      <table class="jh-type-array">
        <tr>
          <td class="jh-value jh-array-value">
            <table class="jh-type-object">
              <tr>
                <th class="jh-key jh-object-key">Code</th>
                <td class="jh-value jh-object-value"><span class="jh-type-string">Airplane</span></td>
              </tr>
              <tr>
                <th class="jh-key jh-object-key">Mode</th>
                <td class="jh-value jh-object-value"><span class="jh-type-string">Air Travel</span></td>
              </tr>
              <tr>
                <th class="jh-key jh-object-key">Quantity</th>
                <td class="jh-value jh-object-value"><span class="jh-type-int jh-type-number">5</span></td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="jh-value jh-array-value">
            <table class="jh-type-object">
              <tr>
                <th class="jh-key jh-object-key">Code</th>
                <td class="jh-value jh-object-value"><span class="jh-type-string">Train</span></td>
              </tr>
              <tr>
                <th class="jh-key jh-object-key">Mode</th>
                <td class="jh-value jh-object-value"><span class="jh-type-string">Public Transport</span></td>
              </tr>
              <tr>
                <th class="jh-key jh-object-key">Quantity</th>
                <td class="jh-value jh-object-value"><span class="jh-type-int jh-type-number">30</span></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Tried the 'didDrawCell' hook but since the data is dynamic depending on the request the format of the table generated would change. Some might have 4 nested sub-tables but some might have only 2 in certain cases. I'm looking for a solution that would create the tables/nested tables just by reading the json/code directly.