ตัวอย่างการแปลงตัว html table เป็น Tabulator วิธีที่ง่ายที่สุด แทบจะไม่ต้องทำอะไรเลย
Tabulator/data.table.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator: data.table</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>
<table id="tabulator-table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pitt</td>
<td>Phunsanit</td>
<td>43</td>
<td>Male</td>
</tr>
<tr>
<td>2</td>
<td>พิชญ์</td>
<td>พันธุ์สนิท</td>
<td>43</td>
<td>ชาย</td>
</tr>
</tbody>
</table>
<!-- Tabulator JS -->
<script crossorigin="anonymous"
integrity="sha512-8+qwMD/110YLl5T2bPupMbPMXlARhei2mSxerb/0UWZuvcg4NjG7FdxzuuvDs2rBr/KCNqhyBDe8W3ykKB1dzA=="
referrerpolicy="no-referrer"
src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/6.3.1/js/tabulator.min.js"></script>
<script>
var table = new Tabulator ("#tabulator-table", {
layout: "fitColumns",
pagination: true,
paginationSize: 10
}) ;
</script>
</body>
</html>