Display data in a table format with images or text

CSS

.datatable {
  border-collapse: collapse;
}

.datatable td {
  border: 1px solid #000;
  padding: 0.25rem;
}

.datatable img {
  max-width: 300px;
  max-height: 200px;
}

JavaScript

function arrayToTable(data, meta){
  const table = document.createElement("table");
  table.classList.add("datatable");
  for(const row of data){
    const tr = document.createElement("tr");
    for(let i=0; i<row.length; i++){
      let value = row[i];
      const td = document.createElement("td");
      if(meta[i]?.format)
        value = meta[i].format(value);
      if(!(value instanceof Node))
        value = document.createTextNode(value);
      td.appendChild(value);
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  return table;
}

const data = [
  ["Katze unter Baum","https://temp-s.s.abrecht.li/cats/2004-2007%201996.jpg"],
  ["Mlem","https://temp-s.s.abrecht.li/cats/2004-2007%202040.jpg"],
  ["Danger","https://temp-s.s.abrecht.li/cats/2004-2007%20933.jpg"],
];

document.body.appendChild(arrayToTable(data, {
  [1]: {
    format(value){
      const img = document.createElement("img");
      img.src = value;
      return img;
    }
  }
}));