Grid.js Responsive table with large size

Question

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).

Answer 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: () => {
   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";
}