How to calculate rowspans for a treelike structure representing a HTML table?

Given the following example HTML table representing a 2D matrix of nodes with rowspans and colspans

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

th, td { border: 1px solid black }

<!-- language: lang-html -->

<table>
  <thead>
    <tr>
      <th colspan="3">Major 1</th>
      <th rowspan="3">col4</th>
    </tr>
    <tr>
      <th colspan="2">Sub 1</th>
      <th rowspan="2">col3</th>
    </tr>
    <tr>
      <th>col1</th>
      <th>col2</th>
    </tr>
  </thead>
</table>

<!-- end snippet -->

As you can see in the example there are some filler rowspans, e.g. for "col4". It needs to fill the remaining height

This 2D matrix is dynamic, I need to calculate it based on a treelike structure coming from a configuration. The initial treelike structure for the example above would be

const columns = [{
  title: "Major1",
  children: [{
    title: "Sub1",
    children: [{
      title: "col1"
    }, {
      title: "col2"
    }]
  }, {
    title: "col3"
  }]
}, {
  title: "col4"
}];

In the first place I want to traverse this structure and calculate the colspans and rowspans for each node. For the colspan I thought the formula is

> colspan = sum of child colspans

but I couldn't figure out a formula for the rowspan yet. I started implementing the algorithm for colspans

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const columns = [{
  title: "Major1",
  children: [{
    title: "Sub1",
    children: [{
      title: "col1"
    }, {
      title: "col2"
    }]
  }, {
    title: "col3"
  }]
}, {
  title: "col4"
}];

function traverse(currentColumns) {
  for (const currentColumn of currentColumns) {
    currentColumn.colspan = 1;
    currentColumn.rowspan = 1;

    if (currentColumn.children) {
      traverse(currentColumn.children);

      currentColumn.colspan = currentColumn.children.reduce((totalColspan, childColumn) => totalColspan + childColumn.colspan, 0);
    }
  }
}

traverse(columns)

console.log(columns);

<!-- end snippet -->

but don't know how to calculate the rowspans. Do you know the formula for rowspans?

• Traverse the nodes and calc a node's deepness level, and a maximum level reached maxLevel.

• While traversing collect all items without children into an items array. These items can have rowSpan different from 1. If you don't collect the items we have a performance hit because we need to traverse the nodes the second time to calculate rowSpan, so it's like a cache optimization.

• Loop through the items and calculate rowSpan as maxLevel minus a node's level plus 1.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let maxLevel = 0;
const items = [];

traverse(columns);

items.forEach(item => item.rowSpan = 1 + maxLevel - item.level);

console.log(columns);

function traverse(arr, level = 0){
  for(const item of arr){
    item.colSpan = 1;
    item.level = level;
    maxLevel < level && (maxLevel = level);
    if(item.children){
      item.rowSpan = 1;
      traverse(item.children, level + 1);
      item.colSpan = item.children.reduce((sum, child) => sum + child.colSpan, 0);
    }else{
      items.push(item);
    }
  }
}

<!-- language: lang-html -->

<script>
const columns = [{
  title: "Major1",
  children: [{
    title: "Sub1",
    children: [{
      title: "col1"
    }, {
      title: "col2"
    }]
  }, {
    title: "col3"
  }]
}, {
  title: "col4"
}];
</script>

<!-- end snippet -->