Responsive tables

[martinpesout]

Hi, how can I re-init whole table after resizing of the window. Scrolling seems to be broken after resizing whole table because height of the cells is different.

Thanks

[NeXTs]

Hi Martin!
That's a good question, clusterize was designed for static height rows.
I like your idea so I'll implement it into plugin as soon as I'm released.
As a quick workaround you could do something like this.

var clusterize;
function initClusterize() {
  clusterize = new Clusterize({
    rows: data,
    scrollId: 'scrollArea',
    contentId: 'contentArea'
  });
}

var resize_debouncer = 0;
$(window).on('resize', function() {
  clearTimeout(resize_debouncer);
  resize_debouncer = setTimeout(function() {
    clusterize && clusterize.destroy(true);
    initClusterize();
  }, 100);
});
initClusterize();

This will force clusterize to adapt to new rows height.
If you render rows by yourself (array of strings) - everything must work quickly.
Important note: clusterize.destroy(true) - parameter should be true, otherwise all rows would be inserted into table and of course that may be slow

[martinpesout]

Cool, it works. Thanks

[NeXTs]

@s-a @martinpesout

Hello guys, please update to last version of clusterize and check how it works for you after window resize. You need to remove workaround that I gave you earlier, default init should be enough now.

var clusterize = new Clusterize({
  rows: data,
  scrollId: 'scrollArea',
  contentId: 'contentArea'
});

[martinpesout]

Thanks. It works like a charm :)

[s-a]

👍 👍

[NeXTs]

@s-a @martinpesout
Fixed an old bug, got new one :D
You need to upgrade to v0.8.2

[caecamilato]

Hi, I'm having the same problem but it didn't solve it with the latest version. I have a table with 100 rows, and when I resize the scrollId div it doesn't redraw all the rows again. Someone would have an example online. Detail that I apply the plugin to an existing table with 100 lines and 30 visible lines. When I increase the height by resize it doesn't display the other lines