在此表中,我想添加一些具有宽度的列。如果列的宽度大于页面的宽度,则不会显示水平滚动条。
如何从沙盒中重新制作示例并添加水平滚动条?可以通过 Table
组件来做到这一点吗?
https://codesandbox.io/s/k9km4qjkk5
react :
import React from "react";
import ReactDOM from "react-dom";
import { AutoSizer, Column, Table } from "react-virtualized";
import "./styles.css";
export default class List extends React.Component {
state = {
list: [
{
name: "Brian Vaughn",
description: "Software engineer",
aa: "aaaaaaaaa",
bb: "bbbbbbbbbbb",
cc: "cccccccccccccc"
},
{
name: "Brian Vaughn",
description: "Software engineer",
aa: "aaaaaaaaa",
bb: "bbbbbbbbbbb",
cc: "cccccccccccccc"
},
...
]
};
render() {
return (
<AutoSizer>
{({ height, width }) => (
<Table
width={width}
height={height}
headerHeight={20}
rowHeight={35}
overscanRowCount={100}
rowCount={this.state.list.length}
rowGetter={function({ index }) {
return this.state.list[index];
}.bind(this)}
>
<Column label="Name" dataKey="name" width={500} flexShrink={0} />
<Column
width={500}
flexShrink={0}
label="Description"
dataKey="description"
/>
<Column width={500} flexShrink={0} label="aa" dataKey="aa" />
<Column width={500} flexShrink={0} label="bb" dataKey="bb" />
<Column width={500} flexShrink={0} label="cc" dataKey="cc" />
</Table>
)}
</AutoSizer>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<List />, rootElement);
最佳答案
感谢 A2A。
我也遇到过类似的情况,表格有 10 列,而视口(viewport)宽度不足以容纳。
经过一些失败的解决方法后,我想出了这个简单的修复方法。
对于Table
组件,有条件地添加width
。
// Sum of min-widths of all columns - 500*5 - in your case
const MIN_TABLE_WIDTH = 2500;
<AutoSizer>
{({width, height}) => (
<Table
width={width < MIN_TABLE_WIDTH ? MIN_TABLE_WIDTH : width}
height={height}
...restProps
>
.....
</Table>
)}
</AutoSizer>
希望对您有所帮助。
关于reactjs - 如何在react-virtualized(CodeSandBox)中向表格添加水平滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55563249/