JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script src="http://datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<table id="notesDatagrid" />

JavaScript

$(document).ready(function () {
    buildTable();
});

var COL_COUNT = 5;

function buildTable() {
    
    //putting dataTableCols here so i can quickly add columnDefs
    var dataTableCols = buildHeaderAndReturnCols();

    var arrayData = tempGetArrayOfArrayData(); 

    var tableObj = $('#notesDatagrid').DataTable({
        "paging": false,
        "bInfo": false,
        "bFilter": true,
        "autoWidth": false,
        "sDom": 'R<"top"i>rt<"bottom"><"clear">',
        "columnDefs": dataTableCols
    });

    tableObj.rows.add(arrayData).draw();

    setupBindingsForHeaderCol();
}

function buildHeaderAndReturnCols() {
    var dataTableColsToReturn = [];

    var header = $('<thead />');
    var headerRow = $('<tr />');
    var i;
    for (i = 0; i < COL_COUNT; i++) {
        var headerCell = $('<th />');
        var cellContents = 'col ' + i + '<br />';
            cellContents += '<input type="text" placeholder="Search col ' + i + '" class="headerColInput" />'
        headerCell.html(cellContents);
        headerRow.append(headerCell);
    }
    header.html(headerRow);
    $('#notesDatagrid').html(header);

    return dataTableColsToReturn;
}

function setupBindingsForHeaderCol() {
    $(".headerColInput").click(function (evt) {
        if (evt.stopPropagation) {
            evt.stopPropagation();
        } else {
            evt.cancelBubble = true;
        }
    });
}

function tempGetArrayOfArrayData() {
    var arrToReturn = [];

    var i, n;
    for (n = 0; n < 10; n++) {
        var childArray = [];
        for (i = 0; i < COL_COUNT; i++) {
            childArray.push('row ' + n + ', col ' + i);
        }
        arrToReturn.push(childArray);
    }

    return arrToReturn;
}