What is the best method to rendering a grid.js table in resizable container.

If I don't set the height configuration object of the grid, the table size exceed his container and i can't have access to the overflow bar at the end of the table.

grid = new gridjs.Grid({
  columns: [/*A lot of column*/],
  fixedHeader: true,
  width: document.getElementById("MY_CONTAINER_ID").clientWidth,
  height: document.getElementById("MY_CONTAINER_ID").clientHeight,
  data: () => {
   return new Promise(resolve => {
    setTimeout(() =>
      resolve([/*A lot of rows*/]), 2000);
    });
  }
}).render(document.getElementById("MY_CONTAINER_ID"));

In a purpose of a resizable div we can set the height with .updateConfig() method and re-render all the datas but it's a nonsense (even more if the dataset is quite large).

Edit

If you want you're table fit the size of your container set a customm css style with container:{height:100%, width:100%} AND height/width to 100% in the config of the grid.

grid = new gridjs.Grid({
  columns: [/*A lot of column*/],
  fixedHeader: true,
  style:{
    container:{
      'width':'100%',
      'height':'100%'
    },
  },
  width: '100%',
  height: '100%',
  data: () => {
   return new Promise(resolve => {
    setTimeout(() =>
      resolve([/*A lot of rows*/]), 2000);
    });
  }
}).render(document.getElementById("MY_WRAPPER"));

Old answer

To fix this issue, I used ResizeObserver()

I set the height and with of the "gridjs-wrapper" outside of the gridjs.Grid configuration interface and resize my wrapper dynamically with values from the resize listenner connected to my container.

grid = new gridjs.Grid({
  columns: [/*A lot of column*/],
  fixedHeader: true,
  width: document.getElementById("MY_CONTAINER_ID").clientWidth,
  height: document.getElementById("MY_CONTAINER_ID").clientHeight,
  data: () => {
   return new Promise(resolve => {
    setTimeout(() =>
      resolve([/*A lot of rows*/]), 2000);
    });
  }
}).render(document.getElementById("MY_CONTAINER_ID"));
setGridSize();
new ResizeObserver(() => setGridSize()).observe(document.getElementById("MY_CONTAINER_ID"));
        
function setGridSize(){
  var mywrapper = document.getElementsByClassName("gridjs-wrapper");
  var height = document.getElementById("MY_CONTAINER_ID").clientHeight;
  var width = document.getElementById("MY_CONTAINER_ID").clientWidth;
  mywrapper[0].style.height = height.toString() + "px";
  mywrapper[0].style.width = widht.toString() + "px";
}