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包装器"；在砂砾外面。网格配置接口，并使用连接到我的容器的resize listenner中的值动态调整我的包装器的大小。

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