Currently, I am encountering an issue with loading data using a tabulator on my webpage. There are 38 tables that need to be populated, each containing approximately 2000 rows of data. The problem lies in the fact that it is taking an excessive amount of time for the data to load - around 30 minutes, which is completely unacceptable. Even after attempting pagination, our strict printing requirements are not being met as the data is not fully accessible when trying to print (ctrl + P).
In my setup, I am utilizing HTML Formatter, textarea, and fit columns for display purposes.
One of the specific tables used is outlined below:
const someTable = new Tabulator('#someContainer', {
layout: 'fitColumns',
resizableRows: true,
columns: [
{ title: 'f1', field: 'col1', sorter: 'string', headerSort: false, formatter: 'textarea' },
{ title: 'f2', field: 'col2', sorter: 'string', headerSort: false, formatter: 'textarea' },
{ title: 'f3', field: 'col3', sorter: 'string', headerSort: false, formatter: 'textarea' },
{ title: 'f4', field: 'col4', sorter: 'string', headerSort: false, formatter: 'textarea' },
{ title: 'f5', field: 'col5', sorter: 'string', headerSort: false, formatter: 'textarea' },
{ title: 'f6', field: 'col6', sorter: 'string', headerSort: false, formatter: 'textarea' }
]
});
let someData = document.getElementById('someData').value;
someData = JSON.parse(someData);
someTable.addData(someData, true);
setTimeout(function() {
someTable.redraw(true);
}, 100);
}
I would greatly appreciate any insights into why this slow loading process is occurring. (I have also tried removing the timeout without significant improvement).
Additionally, experimenting with progressive loading did not result in reduced loading times either.