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.

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.

How to

In my opinion, the best approach here is to set your table to fit the container size with a customm css style like container:{height:100%, width:100%} AND height/width to 100% in the config of the grid.

grid = new gridjs.Grid({
  /* set up you're grid config here then add */
  style:{
    container:{
      'width':'100%',
      'height':'100%'
    },
  },
  width: '100%',
  height: '100%',
}).render('your wrapper');

Why

In fact you need to set up height and with in style AND config because the with/height property in config act on the gridjs-wrapper HtmlElement and you need to fit his parent gridjs-container before for the css property to works properly