Question

如果我的数据太长，我想添加垂直滚动。水平滚动工作正常，如果数据太大，但是我在React Typescript中无法在材质表中垂直滚动吗？

我的代码是-

{isLoading ?
        (<Spinner></Spinner>)
        : error && error.length > 0 ?
          (<ErrorDetails error={error}></ErrorDetails>)
          : result && (<div className={classes.root}>
            {result && result.length > 0 ?
              (<><MaterialTable
                icons={icons}
                columns={columns}
                data={result}
                options={{
                  exportButton: true,
                  sorting: true,
                  search: false,
                  paging: false,
                  fixedColumns: {
                    left: 2,
                  },
                  toolbar: false
                }}
              /> <section className={classes.rightToolbar}>
                  <Link className={classes.a} to="/scenarioDetails">
                    <OutlinedButtons></OutlinedButtons>
                  </Link>
                </section></>)
              : (<NoRecords></NoRecords>)}
          </div>)}</>)

我还没有添加水平滚动，但是仍然可以正常工作。但是我想添加垂直滚动，如何完成呢？

Answer 1

您可以使用 maxBodyHeight 属性，如果数据超过给定高度，它将创建垂直滚动条。

<MaterialTable
    options={{
      maxBodyHeight: 400,
    }}
/>

Answer 2

这不取决于MaterialTable的道具/设置。您可能希望将表格放置在固定高度的HTMLElement中

如何在我的React材质表中添加垂直滚动？

2 个答案: