<!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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://moment.github.io/luxon/global/luxon.min.js"></script>
<script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.20/jspdf.plugin.autotable.min.js"></script>
</head>
<body>
<div>
<button id="download-csv">Download CSV</button>
<button id="download-json">Download JSON</button>
<button id="download-xlsx">Download XLSX</button>
<button id="download-pdf">Download PDF</button>
<button id="download-html">Download HTML</button>
</div>
<div id="example-table"></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("#example-table", {
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
},
],
});
//trigger download of data.csv file
document.getElementById("download-csv").addEventListener("click", function () {
table.download("csv", "data.csv");
});
//trigger download of data.json file
document.getElementById("download-json").addEventListener("click", function () {
table.download("json", "data.json");
});
//trigger download of data.xlsx file
document.getElementById("download-xlsx").addEventListener("click", function () {
table.download("xlsx", "data.xlsx", {sheetName: "My Data"});
});
//trigger download of data.pdf file
document.getElementById("download-pdf").addEventListener("click", function () {
table.download("pdf", "data.pdf", {
orientation: "portrait", //set page orientation to portrait
title: "Example Report", //add title to report
});
});
//trigger download of data.html file
document.getElementById("download-html").addEventListener("click", function () {
table.download("html", "data.html", {style: true});
});
</script>
</body>
</html>
