JSFiddle - React, Tailwind, and code Playground

HTML

<table border="2" id="testTable"></table>

JavaScript

var obj = [{
    columnA: 'First',
    columnB: 'A',
    columnC: 'A'
}, {
    columnA: 'First',
    columnB: 'D',
    columnC: 'H'
}, {
    columnA: 'Third',
    columnB: 'D',
    columnC: 'H'
}, {
    columnA: 'Third',
    columnB: 'E',
    columnC: 'H'
}];

for (var i = 0; i < obj.length; i++) {
    tr = $('<tr/>');

    addColumn(tr, 'columnA', i);
    addColumn(tr, 'columnB', i);
    addColumn(tr, 'columnC', i);
    $('#testTable').append(tr);

}

function addColumn(tr, column, i) {
    var row = obj[i],
        prevRow = obj[i - 1],
        td = $('<td>' + row[column] + '</td>');
    if (prevRow && row[column] === prevRow[column]) {
        td.hide();
    } else {
        var rowspan = 1;
        for (var j = i; j < obj.length - 1; j++) {
            if (obj[j][column] === obj[j + 1][column]) {
                rowspan++;
            } else {
                break;
            }
        }
        td.attr('rowspan', rowspan);
    }

    tr.append(td);
}