反应物料表自动页面大小 [英] React material table automatic page size

问题描述

我正在使用React +材质表.

I am using React + Material Table.

我有问题

• 是否可以动态设置 pageSize 基于页面上的可用空间?
• 如果没有API可以这样做-如何从组件设计的角度更好地解决此问题?

我要实现什么目标?

材料表"中显示的行数应取决于屏幕尺寸.根据您的屏幕尺寸，该页面的外观看起来并不相似(例如，在笔记本电脑上看起来可能不错，但是在25英寸显示屏上，会有很多空间可以被行填充).

The number of rows displayed in a Material Table should depend on screen size. The page will not look similar depending on your screen size (e.g. on laptop device it could look fine, but on 25 inch display there will be a lot of space which could be filled by rows).

我已经做了什么?

• 我搜索了官方文档，但找不到解决方案.
• 我还在寻找开发人员帖子和其他SO主题-仍然没有结果.

• I searched though the official documentation and was not able to find the solution.
• I was also looking for developer posts and other SO topics - still no result.

当然可以构建一个脚本，该脚本根据容器大小和行大小进行一些简单的计算，以填充尽可能多的行，但是我想避免使用此解决方案并使用一些现成的方法如果可能的话.

Of course it is possible to build a script which does some simple calculations based on container size and row size to fill as much rows as possible, but I would like to avoid this solution and use something out-of-the-box if possible.

推荐答案

我也有相同的要求.因此，我通过使用"AutoSizer 找到了解决方案> react-virtualized-auto-sizer "软件包.与材料表"软件包配合得很好.

I too had the same requirement. So I found a solution, by using AutoSizer from the 'react-virtualized-auto-sizer' package. It goes well with the 'material-table' package.

示例代码:

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

这篇关于反应物料表自动页面大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！