I'm having the following issue with Tabulator. When I initialize and add a hundred rows of data, I scroll to the bottom and then append another 500 rows via the button, the position of the scrollbar is problematic, and it causes different problems when I use addPos with different values. Generally speaking, the position of the scrollbar will change when I append, but the content displayed on the current page should not change.The following code reproduces the issue, does anyone know how to fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabulator Example with Add/Delete Rows</title>
<link href="/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<style>
#example-table {
width: 100%;
max-width: 800px;
height:200px;
margin: 20px auto;
}
.action-buttons {
text-align: center;
margin: 20px 0;
}
.action-buttons button {
margin: 0 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="example-table"></div>
<div class="action-buttons">
<button onclick="addRows()">Add 100 Rows</button>
<button onclick="deleteSelectedRows()">Delete Selected Rows</button>
</div>
<script type="text/javascript" src="/[email protected]/dist/js/tabulator.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var columns = [
{ title: "Name", field: "name", width: 150 },
{ title: "Age", field: "age", align: "left", formatter: "progress" },
{ title: "Favourite Color", field: "color" },
{ title: "Date Of Birth", field: "dob", sorter: "date", align: "center" },
];
var tableData = generateData(100);
window.table = new Tabulator("#example-table", {
addRowPos:"top",
data: tableData,
layout: "fitColumns",
columns: columns,
selectable: true,
});
});
function generateData(count) {
var data = [];
for (var i = 1; i <= count; i++) {
data.push({
id: i,
name: "User " + i,
age: Math.floor(Math.random() * 100),
color: ["red", "blue", "green", "yellow", "orange"][Math.floor(Math.random() * 5)],
dob: randomDate(new Date(1970, 0, 1), new Date())
});
}
return data;
}
function randomDate(start, end) {
return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toISOString().split('T')[0];
}
function addRows() {
var newData = generateData(100);
table.addData(newData);
}
function deleteSelectedRows() {
var selectedRows = table.getSelectedRows();
if (selectedRows.length > 0) {
selectedRows.forEach(function(row) {
row.delete();
});
} else {
alert("No rows selected!");
}
}
</script>
</body>
</html>