How to correctly update (redraw) grid.js after resize

Question

I've set up grid.js in Vue. https://github.com/grid-js/gridjs

I have set, autoWidth: true and width: '100%' in the config.

The data grid resizes (is responsive) when I resized the window.

But, if the window, or container element resizes larger than the initial size, the grid does not resize with it. It will however correctly resize smaller.

I then used element-resize-detector (https://github.com/wnr/element-resize-detector/) to watch for changes to the container element and call

grid.updateConfig(this.config).forceRender();

to redraw the grid to the new container sized. This works, but it causes problems with the column sorting.

I'm tinkering with code to get around this, but would like to know if someone has a good/better solution for this.

score 1 · Accepted Answer · answered Sep 17 '21 at 13:58

To correctly update grid.js after resize, you can take a look at this response

Using .updateConfig() when resizing is not a good idea because each time you resize, the table redraw. choosing this option lead to decrease UX and it can be very annoying with large datasets.

To resize the table with his container you need to listen for the size of the container and set it to the table by searching the element with gridjs-wrapper class. This way, when the container of you're grid resize, the grid automatically resize without need of an update.

I don't use Vue framework but this is a quick exemple of the idea here :

grid = new gridjs.Grid({
    /* set up you're grid here */
}).render(YOUR_CONTAINER);

// Resize you're grid or call it whenever you want 
setGridSize();

// set the size listener to your grid container
new ResizeObserver(() => setGridSize()).observe(YOUR_CONTAINER);

// function to resize the table with the container size        
function setGridSize(){
  // The grid js wrapper element (assuming you've just one grid on you're page)
  var mywrapper = document.getElementsByClassName("gridjs-wrapper");
  // height and with of you're container
  var height = YOUR_CONTAINER.clientHeight;
  var width = YOUR_CONTAINER.clientWidth;
  // Set it to your grid js wrapper
  mywrapper[0].style.height = height.toString() + "px";
  mywrapper[0].style.width = widht.toString() + "px";
}

How to correctly update (redraw) grid.js after resize

1 Answers1