material UI datagrid 垂直滚动条

Posted 2023-02-22

【中文标题】material UI datagrid 垂直滚动条

【英文标题】：material UI datagrid vertical scroll bar

【发布时间】：2021-04-05 04:15:44

【问题描述】：

我想渲染一个没有任何垂直滚动条的材质 UI 数据网格。这是网格的代码：

return <div style=height: 400, width: '100%',  >
        <DataGrid className=classes.root rows=closedPositions columns=columns rowHeight=20 
headerHeight=25 disableSelectionOnClick pageSize=20 autoPageSize=true scrollbarSize=1
                  components=
                      pagination: CustomPagination,
                  
        />

autopageSize 的文档是： If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.

因此我很困惑为什么我有一个滚动条。即使我将 div 设置为高度 10,000，表格中没有行，我仍然会得到一个滚动条。

此外，scrollbarSize 为 15 和 1 之间没有区别（对于我想要的水平滚动条）。

有人知道怎么回事吗？

【参考方案1】：

你试试下面的代码吗？

autoHeight=true

这对我来说很好。

示例。

<div style= width: "100%" >
  <DataGrid
    rows=rows
    columns=columns
    autoHeight=true
  />
</div>

【讨论】：

感谢您的回答！目前尚不清楚您希望 OP 在哪里插入您在答案中编写的代码，您能否编辑您的答案，以便更容易看到如何使用您建议的属性？我认为添加整个组件标签就足够了。

谢谢您的建议！我添加了整个组件标签。

它似乎拿走了滚动条，但我的网格不符合 400 像素的高度。它现在少了很多

web-tools2-6mmkzmlse.vercel.app/sample1 这是你的代码。这个页面有一个滚动条，但这是给浏览器的，不是给 DataGrid 的。