Menu
I would like to reinitialise a data table because the data inside the table has been updated. I noticed that $('#...').tabulator("destroy") could be a solution. However, it seems there is no tabulator function in the newest version of Tabulator.
May I ask how to fulfil a function which is the same to tabulator("destroy") in the old version?
254
asked Oct 27 '25 05:10
Don't use Destroy it will Destroy the whole Tabulator, use clearData Update and Add as per documentation.
Check my below code
<!DOCTYPE html>
<html lang="en">
<head><link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"></head>
<body>
<div id="example-table"></div>
<button onclick="removeData()">Clear Data</button>
<button onclick="update()">Update Data</button>
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<script>
const tabledata1 = [
{id: 1, name: "Oli ", money: "0", col: "red", dob: ""},
{id: 2, name: "Mary ", money: "0", col: "blue", dob: "14/05/1982"},
{id: 3, name: "Christine ", money: "0", col: "green", dob: "22/05/1982"},
{id: 4, name: "Brendon ", money: "0", col: "orange", dob: "01/08/1980"},
{id: 5, name: "Margret ", money: "0", col: "yellow", dob: "31/01/1999"},
];
const tabledata2 = [
{id: 1, name: " Bob", money: "12", col: "red", dob: ""},
{id: 2, name: " May", money: "1", col: "blue", dob: "14/05/1982"},
{id: 3, name: " Lobowski", money: "42", col: "green", dob: "22/05/1982"},
{id: 4, name: "Brendon ", money: "0", col: "orange", dob: "01/08/1980"},
{id: 5, name: " Marmajuke", money: "16", col: "yellow", dob: "31/01/1999"},
];
const table = new Tabulator("#example-table", {
height: 205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: [ //Define Table Columns
{title: "Name", field: "name", width: 150},
{
title: "money",
field: "money",
align: "left",
formatter: "money"
},
{title: "Favourite Color", field: "col"},
{title: "Date Of Birth", field: "dob", sorter: "date", align: "center"},
]
});
function removeData() {
table.clearData();
}
function update() {
table.updateOrAddData(tabledata2);
// table.addData(tabledata2);
}
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
