Grid.js Responsive Table With Large Size

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 c

Solution 1:

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: () => {
   returnnewPromise(resolve => {
    setTimeout(() =>resolve([/*A lot of rows*/]), 2000);
    });
  }
}).render(document.getElementById("MY_CONTAINER_ID"));
setGridSize();
newResizeObserver(() =>setGridSize()).observe(document.getElementById("MY_CONTAINER_ID"));
        
functionsetGridSize(){
  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";
}