JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

td {width: 5em;}

JavaScript

var j = function (name, start, end, status, err) {
    return {
        name: name,
        startedTimestamp: start,
        endedTimestamp: end,
        isRunning: status,
        errorMsg: err
    };
};



var data = [];

data[0] = [
    j('J1', '01Jan', '01Feb', false, ''),
    j('J2', '02Jan', '02Feb', false, ''),
    j('J3', '03Jan', '', true, '')
];
    
data[1] = [
    j('J1', '01Jan', '01Feb', false, ''),
    j('J3', '03Jan', '29Jul', false, 'Job Failed'),
    j('J4', '21Aug', '', true, '')
];


var dataIndex = 0;
var backgroundJobs = data[dataIndex];
var changeData = function () {
    dataIndex = (dataIndex + 1) % data.length;
    backgroundJobs = data[dataIndex];
}

var tbody = d3.select('tbody');

function tick() {
    var rows = tbody.selectAll("tr")
	.data(backgroundJobs, function(d) {
	    return d.name;
	});

	rows.enter()
		.append("tr");
    
    rows.order();

    var cells = rows.selectAll("td")
		.data(function(row) {
		    return [{column: 'Name', value: row.name},
			    {column: 'Start', value: row.startedTimestamp},
			    {column: 'End', value: row.endedTimestamp},
			    {column: 'Status', value: row.isRunning},
			    {column: 'Metadata', value: ''},
			    {column: 'Errors', value: row.errorMsg}];
		});

	cells.enter()
		.append("td");

	cells.text(function(d) { return d.value;});

	cells.exit().remove();

	rows.exit().remove();
}

setInterval(tick, 500);
setInterval(changeData, 2000);