ถ้า table ของเราทำจากตาราง html ธรรมดา ๆ สามารถแปลงเป็น Tabulator ได้ โดย Tabulator: data from html table แต่ถ้าเราต้องการที่จะ custom data เพิ่มจะทำได้อย่างไร ในตัวอย่างจะเพิ่ม score แบบสุ่มเข้าไป
snippets/Tabulator/data.table.custom.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.custom</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="source-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>
<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>
function getTableDataFromHTML(tableId) {
var table = document.getElementById(tableId);
var rows = table.querySelectorAll('tbody tr');
var data = [];
rows.forEach(function (row) {
var cells = row.querySelectorAll('td');
data.push({
id: cells[0].textContent,
name: cells[1].textContent,
surname: cells[2].textContent,
age: cells[3].textContent,
gender: cells[4].textContent,
score: Math.floor(Math.random() * 101)
});
});
return data;
}
var tableData = getTableDataFromHTML("source-table");
new Tabulator("#tabulator-table", {
columns: [
{
field: "id",
title: "ID"
},
{
field: "name",
title: "Name"
},
{
field: "surname",
title: "Surname"
},
{
field: "age",
title: "Age"
},
{
field: "gender",
title: "Gender"
},
{
field: "gender",
title: "Gender"
},
{
field: "score",
title: "Score"
}
],
data: tableData,
layout: "fitColumns",
pagination: true,
paginationSize: 10
});
</script>
</body>
</html>
โดย version นี้จะมีการใช้ getTableDataFromHTML อ่านตารางเองแล้วสุ่ม score ออกมาเพิ่มจากที่มีในตาราง แล้วสร้าง Tabulator จาก tableData