เพราะว่าตัว Datatables ยังคงผูกตัวเองอยู่กับ jQuery มันก็ใช้ดี ง่าย ดัดแปลงได้หลากหลาย แต่เพราะว่า jQuery แทบจะหยุดพัฒนาแล้วจึงจำเป็นที่จะต้องหา javascript tables library ตัวใหม่ที่เข้ากับจาวาสคริปต์สมัยใหม่มากกว่าเดิมก็มาถูกใจ Tabulatot
Tabulator/installation.CDN.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator: Installation CDN</title>
<!-- Tabulator CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/css/tabulator.min.css"
integrity="sha512-RYFH4FFdhD/FdA+OVEbFVqd5ifR+Dnx2M7eWcmkcMexlIoxNgm89ieeVyHYb8xChuYBtbrasMTlo02cLnidjtQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" rel="stylesheet" />
</head>
<body>
<div id="tabulator-table"></div>
<!-- Tabulator JS -->
<script integrity="sha512-8+qwMD/110YLl5T2bPupMbPMXlARhei2mSxerb/0UWZuvcg4NjG7FdxzuuvDs2rBr/KCNqhyBDe8W3ykKB1dzA=="
crossorigin="anonymous" referrerpolicy="no-referrer"
src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/js/tabulator.min.js"></script>
<script>
// table data
var tableData = [
{ id: 1, name: "Pitt", surname: "Phunsanit", age: 43, gender: "Male" },
{ id: 2, name: "พิชญ์", surname: "พันธุ์สนิท", age: 43, gender: "ชาย" }
];
// Tabulator setup
var table = new Tabulator("#tabulator-table", {
columns: [
{
field: "id",
title: "ID",
width: 60
},
{
field: "name",
title: "Name"
},
{
field: "surname",
title: "Surname"
},
{
field: "age",
title: "Age"
},
{
field: "gender",
title: "Gender"
}
],
data: tableData,
layout: "fitColumns"
});
</script>
</body>
</html>
จะเห็นว่า มันใช้งานง่ายจริง ๆ