<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator Example</title>
<link href="https://unpkg.com/tabulator-tables@4.8.1/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.8.1/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://moment.github.io/luxon/global/luxon.min.js"></script>
</head>
<body>
<div id="players"></div>
<script type="text/javascript">
//Create Date Editor
var dateEditor = function (cell, onRendered, success, cancel) {
//cell - the cell component for the editable cell
//onRendered - function to call when the editor has been rendered
//success - function to call to pass the successfuly updated value to Tabulator
//cancel - function to call to abort the edit and return to a normal cell
//create and style input
var cellValue = luxon.DateTime.fromFormat(cell.getValue(), "dd/MM/yyyy").toFormat("yyyy-MM-dd"),
input = document.createElement("input");
input.setAttribute("type", "date");
input.style.padding = "4px";
input.style.width = "100%";
input.style.boxSizing = "border-box";
input.value = cellValue;
onRendered(function () {
input.focus();
input.style.height = "100%";
});
function onChange() {
if (input.value != cellValue) {
success(luxon.DateTime.fromFormat(input.value, "yyyy-MM-dd").toFormat("dd/MM/yyyy"));
} else {
cancel();
}
}
//submit new value on blur or change
input.addEventListener("blur", onChange);
//submit new value on enter
input.addEventListener("keydown", function (e) {
if (e.keyCode == 13) {
onChange();
}
if (e.keyCode == 27) {
cancel();
}
});
return input;
};
var tabledata = [{
playerid: 1,
playername: "Virat Kohli",
price: "17",
team: "RCB",
joiningdate: "01/01/2020"
}, {
playerid: 2,
playername: "Rohit Sharma",
price: "15",
team: "MI",
joiningdate: "02/01/2020"
}, {
playerid: 3,
playername: "MS Dhoni",
price: "15",
team: "CSK",
joiningdate: "03/01/2020"
}, {
playerid: 4,
playername: "Shreyas Iyer",
price: "7",
team: "RCB",
joiningdate: "04/01/2020"
}, {
playerid: 5,
playername: "KL Rahul",
price: "11",
team: "KXIP",
joiningdate: "05/01/2020"
}, {
playerid: 6,
playername: "Dinesh Karthik",
price: "7",
team: "KKR",
joiningdate: "06/01/2020"
}, {
playerid: 7,
playername: "Steve Smith",
price: "12",
team: "RR",
joiningdate: "07/01/2020"
}, {
playerid: 8,
playername: "David Warner",
price: "12",
team: "SRH",
joiningdate: "08/01/2020"
}, {
playerid: 9,
playername: "Kane Williamson",
price: "3",
team: "SRH",
joiningdate: "09/01/2020"
}, {
playerid: 10,
playername: "Jofra Archer",
price: "7",
team: "RR",
joiningdate: "10/01/2020"
}, {
playerid: 11,
playername: "Andre Russell",
price: "9",
team: "KKR",
joiningdate: "11/01/2020"
}, {
playerid: 12,
playername: "Chris Gayle",
price: "2",
team: "KXIP",
joiningdate: "12/01/2020"
},
];
var table = new Tabulator("#players", {
height: 220,
data: tabledata,
layout: "fitColumns",
pagination: "local",
paginationSize: 5,
tooltips: true,
columns: [{
title: "Player Name",
field: "playername",
sorter: "string",
width: 150,
headerFilter: "input",
editor: "input"
}, {
title: "Player Price",
field: "price",
sorter: "number",
hozAlign: "left",
formatter: "progress",
editor: "input"
},
{
title: "Team",
field: "team",
sorter: "string",
hozAlign: "center",
editor: "select",
editorParams: {
values: {
"RCB": "RCB",
"MI": "MI",
"KKR": "KKR",
}},
headerFilter: true,
headerFilterParams: {
"RCB": "RCB",
"MI": "MI",
"KKR": "KKR",
}
}, {
title: "Joining Date",
field: "joiningdate",
sorter: "date",
hozAlign: "center",
editor: dateEditor
},
],
});
</script>
</body>
</html>