node.js - react 虚拟化表 x 滚动

Question

是否可以在react-virtualized中设置x滚动？我有一个固定宽度的表格，要显示的列比表格中的空间多，所以我需要一个 x-scrollinig。在我的测试中，如果我这样做了，表格就会缩小，并且如果表格空间不足，则只会显示内容“...”。

Answer 1

我自己也曾为此苦苦挣扎了一段时间。我通过将表格的宽度设置为 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>
 );
}