JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<table width="100%" class="display" id="example"></table>
JavaScript
var dataSet = [{
name: "Tiger Nixon",
position: "System Architect",
office: "Edinburgh"
}, {
name: "Garrett Winters",
position: "Accountant",
office: "Tokyo"
}, {
name: "Ashton Cox",
position: "Junior Technical Author",
office: "San Francisco"
}];
function on_GridActionButton_Click(event) {
alert("You clicked in " + event.data.name + "'s row");
}
$(document).ready(function() {
var table = $('#example').DataTable({
data: dataSet,
columns: [{
data: "name",
title: "Name"
}, {
data: "position",
title: "Position"
}, {
data: "office",
title: "Office"
}, {
name: "control",
searchable: false,
title: "#",
orderable: false,
defaultContent: "<input type=\"button\" value=\"Click me\">",
createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
$(cell).on("click", "input", rowData, on_GridActionButton_Click);
}
}]
});
});