反应材料表自动页面大小

我正在使用 React + Material Table。

我有问题

• 有没有办法动态设置pageSize https://material-table.com/#/docs/all-props基于页面上的可用空间？
• 如果没有 API 可以做到这一点 - 如何从组件设计的角度更好地解决这个问题？

我想实现什么目标？

材料表中显示的行数应取决于屏幕尺寸。根据您的屏幕尺寸，页面看起来不会相似（例如，在笔记本电脑设备上，它可能看起来不错，但在 25 英寸显示屏上，会有大量空间可以由行填充）。

我已经做了什么？

• 我搜索了虽然官方文档 https://material-table.com并且无法找到解决方案。
• 我也在寻找开发人员帖子和其他 SO 主题 - 仍然没有结果。

当然，可以构建一个脚本，根据容器大小和行大小进行一些简单的计算，以填充尽可能多的行，但我想避免这种解决方案，并在可能的情况下使用开箱即用的解决方案。

我也有同样的要求。所以我找到了一个解决方案，通过使用自动尺寸调整器来自 '反应虚拟化自动调整大小 https://www.npmjs.com/package/react-virtualized-auto-sizer' 包裹。它与“材料表”包配合得很好。

示例代码：

    import AutoSizer from 'react-virtualized-auto-sizer';  

    export default function Monitor() {
    const columns = [...];
    const data = [..];
    return (
        <AutoSizer>
        {({ height, width }) => {
            console.log(`Height: ${height} | Width: ${width}`);
            const pageSize = Math.floor((height - 192) / 48);
            console.log(`Page Size: ${pageSize}`);

            return (
            <div style={{ height: `${height}px`, width: `${width}px`, overflowY: 'auto' }}>
                <MaterialTable
                columns={columns}
                data={data}
                options={{
                    pageSize: pageSize,
                    pageSizeOptions: [],
                    toolbar: true,
                    paging: true
                }}
                icons={tableIcons}
                ></MaterialTable>
            </div>
            );
        }}
        </AutoSizer>
    );
    }