JSFiddle - React, Tailwind, and code Playground

CSS

td {
    padding:3px 5px
}
.empty {
    background:#CCC
}
h3{font-weight:bold; padding: 5px 0}

JavaScript

createDemoTable(10, 6);
createDemoTable(12, 6);

createDemoTable(17, 4);

function createDemoTable(items, row_size) {
    /* create demo data*/
    var data = [];
    for (i = 0; i < items; i++) {
        data.push('Item #' + (i + 1))
    }

    var items_per_row = row_size;

    var tableHTML = ['<table border="1">'];
    var num_items = data.length;



    for (j = 0; j < num_items; j = j + items_per_row) {
        var rowEnd = j + items_per_row;
        var rowData = data.slice(j, rowEnd);

        tableHTML.push('<tr>');
        $.each(rowData, function (idx, item) {
            tableHTML.push('<td>' + item + '</td>')
        });

        if (rowEnd > num_items) {
            tableHTML.push(emptyCells(num_items, items_per_row));
        }
        tableHTML.push('</tr>');

    }


    tableHTML.push("</table>");
    $('body').append('<h3>Num Items: '+num_items+', items/row: '+items_per_row+'</h3>');
    $("body").append(tableHTML.join(""));
}

function emptyCells(num_items, items_per_row) {
    var qty = items_per_row - (num_items % items_per_row);
    
    var cells = [];
    for (i = 0; i < qty; i++) {
        cells.push('<td class="empty">Empty</td>')
    }

    return cells.join('')
}