Input Documents

The outer array holds a collection of entity instances. We can intially assume that the instances share a common structure.

[
  {
    a: "A",
    b: "B",
    c: [
      "C0", "C1", "C2"
    ],
    d: [
      { e: "E0", f: "F0" },
      { e: "E1", f: "F1" },
      { e: "E2", f: "F2", k: [1, 2, 3] },
      { e: "E3", f: "F3" }
    ],
    g: { h: { i: "I", j: "J" } }
  },
  …
]
      

Output Table

Output HTML

<table id="static">
    <thead>
      <tr>
        <th rowspan="4">a</th>
        <th rowspan="4">b</th>
        <th rowspan="4">c</th>
        <th colspan="3">d</th>
        <th colspan="2">g</th>
      </tr>
      <tr>
        <th rowspan="3">e</th>
        <th rowspan="3">f</th>
        <th rowspan="3">k</th>
      </tr>
      <tr>
        <th colspan="2">h</th>
      </tr>
      <tr>
        <th>i</th>
        <th>j</th>
      </tr>
    </thead>
    <tbody data-rownum="1">
      <tr>
        <td rowspan="6">A</td>
        <td rowspan="6">B</td>
        <td>C0</td>
        <td>E0</td>
        <td>F0</td>
        <td class="undefined"></td>
        <td rowspan="6">I</td>
        <td rowspan="6">J</td>
      </tr>
      <tr>
        <td>C1</td>
        <td>E1</td>
        <td>F1</td>
        <td class="undefined"></td>
      </tr>
      <tr>
        <td>C2</td>
        <td rowspan="3">E2</td>
        <td rowspan="3">F2</td>
        <td>1</td>
      </tr>
      <tr>
        <td class="undefined" rowspan="3"></td>
        <!-- leftovers from c.length > d.length -->
        </td>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
      </tr>
      <tr>
        <td>E3</td>
        <td>F3</td>
        <td class="undefined"></td>
      </tr>
    </tbody>
  </table>