反应虚拟化 table x 滚动

Question

是否可以在 react-virtualized 中设置 x 滚动？我有一个固定宽度的 table，要显示的列比 table 中的 space 多，所以我需要一个 x-scrollinig。在我的测试中，如果我这样做了，table 只是缩小了，如果 table 用完了 space，则只显示“...”的内容。

Answer 1

react-virtualized Table docs 的介绍段落（强调已添加）：

Table component with fixed headers and windowed rows for improved performance with large data sets. This component expects explicit width and height parameters. Table content can scroll vertically but it is not meant to scroll horizontally.

您或许可以破解它，但它并不支持水平滚动，因此它可能无法正常工作。如果您的应用有此要求，请考虑使用 Grid 或 MultiGrid。

Answer 2

但是，在 bvaughn's accepted answer, the hack for a horizontally scrollable table could look something like this 的基础上，请注意此 hack 附带的以下警告：

您溢出的 Table 列将不会被虚拟化
滚动焦点被包装器的 x 轴滚动捕获，您将需要在内部 Table 组件内单击以重新聚焦并重新获得 y 轴滚动。这非常令人沮丧，尤其是在移动设备上。

Answer 3

我自己也为此苦苦挣扎了一段时间。我通过将 table 的宽度设置为 width={Object.keys(rows[0]).length*150} 并将每列的最小宽度设置为 150（或者您选择的任何内容，只需确保它与您的 table 中的宽度相同）来实现。

然后用Paper包起来，给它一个width和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>
 );
}

反应虚拟化 table x 滚动

react-virtualized table x-scrolling

node.js

reactjs

redux

react-virtualized