大型Grid.js响应表

Question

在可调整大小的容器中呈现grid.js表的最佳方法是什么？

如果我不设置网格的高度配置对象，表的大小会超过它的容器，并且我无法访问表末尾的溢出栏。

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"));

在可调整大小的div中，我们可以使用.updateConfig()方法设置高度并重新呈现所有数据，但这是无稽之谈(如果数据集非常大，更是如此)。

Answer 1

为了解决这个问题，我使用了ResizeObserver()

我在gridjs.Grid配置接口之外设置了"gridjs- wrapper“的高度和with，并使用连接到容器的resize侦听器的值动态调整包装器的大小。

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";
}