是否可以在react-virtualized中设置x滚动?我有一个固定宽度的表格,要显示的列比表格中的空间多,所以我需要一个 x-scrollinig。在我的测试中,如果我这样做了,表格就会缩小,并且如果表格空间不足,则只会显示内容“...”。
最佳答案
我自己也曾为此苦苦挣扎了一段时间。我通过将表格的宽度设置为 width={Object.keys(rows[0]).length*150}
并将每列的最小宽度设置为 150(或者您选择的任何内容,只需确保它在表格中相同)来实现。
然后用Paper包裹它并给它一个宽度和overflowX:'auto'
像这样:
const VirtualizedTable = withStyles(styles)(MuiVirtualizedTable);
export default function DataPreview(props) {
const rows = [{ One: 'one', Two: 'Two',Three: 'Three',Four:'Four', Five:'Five', Six:'Six'}]
return (
<Paper style={{ height: 400, width:700, overflowX: 'auto'}}>
<VirtualizedTable
width={Object.keys(rows[0]).length*150}
rowCount={rows.length}
rowGetter={({ index }) => rows[index]}
columns={Object.keys(rows[0]).map(head=>{return(
{
minWidth:150,
label:head,
dataKey:head
}
)})}
/>
</Paper>
);
}
关于node.js - react 虚拟化表 x 滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46177344/