Insert data to specific column when dynamically building a table

I am getting a data object as JSON from the backend and I need to build a table dynamically:

data = {
   0: {'column1': 'some_data1', 'column2': 'some_data11', 'column3': 'some_data111'}
   1: {'column1': 'some_data2', 'column2': 'some_data22', 'column3': 'some_data222'}
   2: {'column1': 'some_data33', 'column2': 'some_data33', 'column3': 'some_data333'}
}

And I need to insert the data of column2 in the third column, and column3 in the middle.
But when I try to create cell, insert it and append the data, I get:

> Failed to execute 'insertCell' on 'HTMLTableRowElement': The value
> provided (2) is outside the range

I guess because the column doesn't exist yet, and when I try to insert the cell from column3 to the table's column 2 it throws the error:

let data = getData();
tbodyRef = document.getElementById("tableBody");
let newRow = tbodyRef.insertRow();

for (const [key, value] of Object.entries(data)) {
    if (key === 'column1') {
        newCell = newRow.insertCell(0);
        cellText = document.createTextNode(value);
        newCell.appendChild(cellText);
    } else if (key === 'column2') {
        newCell = newRow.insertCell(2);
        cellText = document.createTextNode(value);
        newCell.appendChild(cellText);
    } else if (key === 'column3') {
        newCell = newRow.insertCell(1); 
        cellText = document.createTextNode(value);
        newCell.appendChild(cellText);
    }
}

So I believe that when I do newCell = newRow.insertCell(2); the third column (index 2) doesn't exist yet. What should I do? Should I first count the number of columns in the object (number of keys for example), then loop to create empty cells, then insert data? Or there is a better way?

Insert the data as plain HTML - much faster than creating DOM elements, define the needed order of columns and map them into a rendered HTML. Also you can provide format functions for you column data:

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

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

const data = {
   0: {'column1': 'some_data1', 'column2': 1688452200, 'column3': 'some_data111'},
   1: {'column1': 'some_data2', 'column2': 1688452200, 'column3': 'some_data222'},
   2: {'column1': 'some_data33', 'column2': 1688452200, 'column3': 'some_data333'},
};

const columns = {
  column1: null, 
  column3: null,
  column2: formatDate
};

document.querySelector('tbody').innerHTML = 
  Object
    .values(data)
    .map(row => '<tr><td>' + 
        Object.entries(columns).map(([name, fn]) => fn?.(row[name]) ?? row[name]).join('</td><td>') + 
      '</td></tr>'
    ).join('');
    
function formatDate(timestamp){
  const date = new Date(timestamp * 1000);
  date.setMinutes(date.getMinutes() + date.getTimezoneOffset());
  return date.toTimeString().slice(0, 8);
}

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

<table>
  <tbody></tbody>
</table>

<!-- end snippet -->