JSFiddle - React, Tailwind, and code Playground

by Rodmunera

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<table id="matrixTable">
    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
        </tr>
    </thead>
</table>

JavaScript

var data = [
    [2,1],[2,3],[1,5],[2,2],[3,4],[4,1]
];

var loadData = function(data){
    $('#matrixTable').dataTable({
        autoWidth: false
        ,destroy: true
        ,retrieve: false
        ,paginationType: "full_numbers"
        ,displayLength: 100
        ,order: [
            [0,"asc"]
            ,[1,"asc"]
        ]
        ,data: data
        ,columnDefs: [
            {
                // [0]
                "render": function(val, type, row){
                    var rowID = ' data-rowID="' + row[0] + '"';
                    var sformField = '<input type="text"' + rowID + ' value="' + row[0] + '" />'
                    return sformField;
                }
                ,className:"nowrap"
                ,"targets":0
            }
            ,{
                // [1]
                "render": function(val, type, row){
                    var rowID = ' data-rowID="' + row[0] + '"';
                    var sformField = '<input type="text"' + rowID + ' value="' + row[1] + '" />'
                    return sformField;
                }
                ,className:"nowrap"
                ,"targets":1
            }
       ]
    });

}
loadData(data);