const input = [

  { value: "a1", colspan: 1, rowspan: 1 },

  { value: "a2", colspan: 1, rowspan: 1 },

  { value: "a3", colspan: 1, rowspan: 4 },

​

  { value: "b1", colspan: 2, rowspan: 1 },

​

  { value: "c1", colspan: 1, rowspan: 1 },

  { value: "c2", colspan: 1, rowspan: 2 },

​

  { value: "d1", colspan: 1, rowspan: 2 },

​

  { value: "e2", colspan: 2, rowspan: 1 },

];

const width = 3;

​

class Matrix {

  constructor(width) {

    this.width = width

    this.data = []

  }

  set(i, j, d) {

    if (j >= width) throw Error(`set was run out of bounds index (${i}, ${j})`)

    var value = this.get(i, j)

    if (value !== undefined) throw Error(`cell (${i}, ${j}) is occupied, value ${value}`)

    this.data[i][j] = d

  }

  get(i, j) {

    this.data[i] = this.data[i] || Array(this.width)

    return this.data[i][j]

  }

  findNextEmpty(i, j) {

    while (true) {

      if (this.get(i, j) === undefined) {

        return [i, j]

      }

      j += 1

      if (j === this.width) {

        i += 1

        j = 0

      }

    }

  }

​

  fromData(data) {

    let i = 0

    let j = 0

    data.forEach((meta, metaIndex) => {

      [i, j] = this.findNextEmpty(i, j)

      for (var ci = i; ci < i + meta.rowspan; ci += 1) {

        for (var cj = j; cj < j + meta.colspan; cj += 1) {

          this.set(ci, cj, metaIndex)

        }

      }

    })

    return this.data

  }  

}

​

​

var table = new Matrix(width).fromData(input)

table.forEach(r => console.log(r))

​

var lastRendered = -1

var $table = document.querySelector('.table')

var inner = table.forEach(function (row) {

  var $tr = document.createElement('tr')

  row.forEach(function (index) {

    var $td = document.createElement('td')

    if (index > lastRendered) {

      lastRendered = index  // note that also index = lastRendered + 1

      $td.setAttribute('colspan', input[index].colspan)

      $td.setAttribute('rowspan', input[index].rowspan)      

      $td.innerText = input[index].value

      $tr.appendChild($td)

    }

  })

  $table.appendChild($tr)

})

​

​