Lazy loading from a server

Tags: #<Tag:0x00007efc7194ddf0> #<Tag:0x00007efc7194dc88>
#1

It was already mentioned on a forum earlier, but couple of years ago. What is the best practice on how to deal with a lazy loading from a server today?

In principle, I should probably use a hook as it was done in this topic

hot.addHook('afterScrollVertically', function() {
var last = hot.getPlugin('AutoRowSize').getLastVisibleRow();
console.log(last);

})

But then, I need somehow remove the upper rows and populate the table from the bottom. Otherwise, when a user scroll through a long table it will keep the old data in memory and will load a new one from a server constantly, which might be not good…?

Sorting on a server’s side I believe is still problematic, right?

Thanks

#2

Oki I kinda figured out

import Handsontable from "handsontable";
//import "handsontable/dist/handsontable.min.css";
//import "pikaday/css/pikaday.css";

const data = [];

for (let i = 0; i < 1500; ++i) {
  data.push([i, Math.random(), Math.random()]);
}

const loadData = (offset, window) => {
  const res = [];
  if (offset + window > data.length) return 'EOF';
  const size = Math.min(offset + window, data.length);
  for (let i = offset; i < size; ++i) {
res.push(data[i]);
  }
  return [size - offset, res];
}

const example = document.getElementById('myTable');
example.innerHTML = '';



example.position = "relative";
example.display = "block";

const bufferMaxSize = 150;
const initial = loadData(0, bufferMaxSize);
let bufferSize = initial[0];

const hot = new Handsontable(example, {
  data: initial[1],
  height: 450,
  multiColumnSorting: true,
  filters: true,
  rowHeaders: true,
  manualRowMove: true,
  renderAllRows: false,

  licenseKey: "non-commercial-and-evaluation"
});

let offset = 0;

const shift = 50;

hot.addHook("afterScrollVertically", function(){
  const last = hot.getPlugin('AutoRowSize').getLastVisibleRow();
  const first = hot.getPlugin('AutoRowSize').getFirstVisibleRow();
  
  if (last >= bufferSize - 1) {


const newData = loadData(offset + shift, bufferMaxSize);
if (newData === 'EOF') {
  console.log('EOF');
  return;
}

bufferSize = newData[0];

offset += shift;

hot.suspendRender();
hot.updateSettings({
			data: newData[1]
		});
hot.scrollViewportTo(first - shift);
hot.resumeRender();

  }

  if (offset > 0 && first < 1) {
offset -= shift;

const newData = loadData(offset, bufferMaxSize);
bufferSize = newData[0];

hot.suspendRender();
hot.updateSettings({
			data: newData[1]
		});
hot.scrollViewportTo(first + shift);
hot.resumeRender();    
  }

  

  
  });

Works great

#3

Hi @krikus.ms

Thank you for contacting us and providing your solution. It looks really solid, and might be a great guide for other users!

1 Like
#4