JSFiddle - React, Tailwind, and code Playground

CSS

.row {
   height: 48px;
   border: solid red 1px;
}

.cell {
   height: 48px;
   width: 48px;
   float: left;
   border: solid red 1px;
}

JavaScript

function update(data) {
  var rows = d3
    .selectAll("div")
      .data(data)
      .enter()
      .append("div")
      .classed("row", true)
      
   var cells = rows
      .selectAll("div")
      .data(function(d) { return d })
  
  cells
    
      .enter()
      .append("div")
      .classed("cell", true)
      .text(function(d) {return d})
 }

var arr = [
  [1, 2, 3],
  [1, 2, 3],
  [1, 2, 3]
]

var button = d3.select("body")
  .append("button")
  .text("update")
  .on("click", modifyData);
  
function modifyData(){
  arr.forEach(row => {
    row.push(4)
  });
  update(arr);
}

update(arr);