JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/brynja/cdn/brynja.js"></script>
<div id="root"></div>

CSS

table * { animation: updated 0.5s; }
@keyframes updated { 0% { background-color: orangered; } 100% { background-color: inherit; } }

JavaScript

const { render, createComponent } = brynja;

const table = createComponent((columns, data) => _=>_
  .child('table', _=>_
    .child('tr', _=>_
      .children('th', columns.length, (_, i)=>_
        .text(columns[i])
      )
    )
    .children('tr', data.length, (_, i)=>_
      .children('td', columns.length, (_, j)=>_
        .text(data[i][columns[j]])
      )
    )
  )
);

const data = [
  { name: 'Bob', age: 20, weight: 75, height: 170 },
  { name: 'Lisa', age: 24, weight: 62, height: 168 },
  { name: 'Mattias', age: 33, weight: 94, height: 185 }
];

render(_=>_
	.do(
  	table(['name', 'age'], data),
  	table(['name', 'weight', 'height'], data),
  )
);