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

编辑

如果您希望表格适合容器的大小，请在网格配置中使用

container:{height:100%, width:100%}

AND

height

/

width

到

100%

设置自定义 css 样式。

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

旧答案

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

ResizeObserver()

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

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