JSFiddle - React, Tailwind, and code Playground

by dixalex

HTML

<table id="tblGrid">
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
  </tr>
</table>

CSS

td,
th {
  border: 1px solid #111;
  padding: 6px;
}

th {
  font-weight: 700;
}

span.pull-right {
  float: right;
  text-align: right;
}

JavaScript

var ingredients = [];

function addIngredToList(id, name, price, categ) {
  var item = [];
  item.push(id);
  item.push(name);
  item.push(price);
  item.push(categ);
  ingredients.push(item);
}

addIngredToList(1, "Ooo", 8, "a");
addIngredToList(7, "Pppp", 10, "b");
addIngredToList(12, "Kkkk", 6, "c");
addIngredToList(2, "Ffff", 8, "a");
addIngredToList(4, "Ssss", 10, "b");
addIngredToList(15, "Vvvv", 6, "c");
addIngredToList(5, "Iiii", 10, "b");
addIngredToList(21, "Llll", 6, "c");
addIngredToList(22, "Mmmm", 9, "a");
addIngredToList(7, "Bbbb", 12, "b");
addIngredToList(8, "Eeee", 8, "b");
addIngredToList(9, "Gggg", 6, "c");
addIngredToList(10, "Cccc", 6, "c");
addIngredToList(11, "Aaaa", 6, "c");
addIngredToList(6, "Nnnn", 10, "b");
addIngredToList(3, "Zzzz", 8, "a");
addIngredToList(13, "Mmmm", 6, "c");
addIngredToList(14, "Rrrr", 6, "c");
addIngredToList(17, "Hhhh", 5, "d");
addIngredToList(18, "Uuuu", 5, "d");
addIngredToList(19, "Qqqq", 5, "d");
addIngredToList(20, "Xxxx", 5, "d");

//console.log(ingredients);
//console.log(ingredients[0][3].toString());
for (i = 0, z = ingredients.length; i < z; i++) {
  var idCol = ingredients[i][0];
  var nameCol = ingredients[i][1];
  var priceCol = ingredients[i][2];
  var categCol = ingredients[i][3];
  var tdCell = "<td colspan='2' data-id='" + idCol + "' data-catg='" + categCol + "'>" + nameCol + "<span class='pull-right'>kr." + priceCol + "</span></td>";
  console.log(tdCell);
}