在此表中,我想添加一些带有宽度的列。如果列的宽度大于页面的宽度,则不会显示水平滚动条。
如何从沙盒中重新制作示例并添加水平滚动条?可以通过Table
个组件来做到这一点吗?
https://codesandbox.io/s/k9km4qjkk5
反应:
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);
答案 0 :(得分:1)
感谢A2A。
我的情况类似,一张桌子有10列,并且视口宽度不足以容纳
在一些失败的解决方法之后,我想出了这个简单的修复程序。
对于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>
我希望这会有所帮助。