Load
<link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
Style
.tabulator {
border: 0;
}
.tabulator .tabulator-header {
border: 0;
}
.tabulator-row {
background-color: #fff;
}
.tabulator-row.tabulator-row-even {
background-color: #f7f7f7;
}
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
color: #<%=colorTableText%>;
background-color: #<%=colorTableHeading%>;
}
.tabulator .tabulator-header .tabulator-col {
text-align: center;
}
.tabulator .tabulator-header .tabulator-col,
.tabulator-row .tabulator-cell {
border-right: 2px solid #fff;
}
.tabulator-row.tabulator-selectable:hover {
background-color: #fff6bf;
}
Apply Filter
function stateFilter(t) {
if (t.value == "") {
table.clearFilter();
} else {
table.setFilter('state', '=', t.value);
}
}
Do Something When Cell Data Changes
var options = {
data:data,
cellEdited:function(a){
ajaxFunction(a);
// console.log(a._cell.value)
// console.log(a._cell.row.data.state)
}
}
var table = new Tabulator("#tab-table", options);
function ajaxFunction(a) {
$.ajax({
data: {
value: a._cell.value,
state: a._cell.row.data.state
},
success:function (a) {
console.log(a)
},
error:function(a, b, c) {
console.log(a, b, c);
}
})
}
Use a Standard Checkbox in the column
{title:"Active", field:"isActive", width:90, hozAlign:"center", sorter:"boolean", editor:true, formatter: (cell) => {
var value = cell.getValue();
if (value == "TX") {
return `<input type="checkbox" checked/>`;
} else {
return `<input type="checkbox"/>`;
}
}}
// or use a dropdown
{title:"isActive", field:"isActive", align:"center", editor:"select",
editorParams:{
"true":"<b>Yes</b>",
"false":"No"
},
formatter: (cell) => {
const value = cell.getValue();
if (cell.getValue()) {
return `Yes`;
} else {
return `No`;
}
}
}