Incorrect table render

[grigorii-horos]

Incorrect render of this snippet:

<table border="1">
  <thead>
    <tr>
      <th colspan="2" rowspan="2">
        This header spans two columns and two rows
      </th>
      <th>Header A</th>
    </tr>
    <tr>
      <th>Header B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell A</td>
      <td>Cell B</td>
      <td>Cell C</td>
    </tr>
  </tbody>
</table>

[grigorii-horos]

JS snippet, equal to html:

import Table from "cli-table3";

const tableRender = new Table({});

tableRender.push(
  [
    {
      content:
        "\u001B[1m\u001B[31mThis header spans two columns and two rows\u001B[39m\u001B[22m",
      colSpan: 2,
      rowSpan: 2,
    },
    {
      content: "\u001B[1m\u001B[31mHeader A\u001B[39m\u001B[22m",
    },
  ],
  [
    {
      content: "Cell A",
    },
    {
      content: "Cell B",
    },
    {
      content: "Cell C",
    },
  ]
);

console.log(tableRender.toString());

[speedytwenty]

JS snippet, equal to html:

This is not equal. Your "JS snippet" does not include a row for Header B.

Try this on for size:

import Table from "cli-table3";
const tableRender = new Table({});
tableRender.push(
  [
    {
      content:
        "\u001B[1m\u001B[31mThis header spans two columns and two rows\u001B[39m\u001B[22m",
      colSpan: 2,
      rowSpan: 2,
    },
    {
      content: "\u001B[1m\u001B[31mHeader A\u001B[39m\u001B[22m",
    },
  ],
  [
    {
      content: "\u001B[1m\u001B[31mHeader B\u001B[39m\u001B[22m",
    },
  ],
  [
    {
      content: "Cell A",
    },
    {
      content: "Cell B",
    },
    {
      content: "Cell C",
    },
  ]
);
console.log(tableRender.toString());

Result: