reactjs - 如何在react-virtualized(CodeSandBox)中向表格添加水平滚动条

Question

在此表中，我想添加一些具有宽度的列。如果列的宽度大于页面的宽度，则不会显示水平滚动条。

如何从沙盒中重新制作示例并添加水平滚动条？可以通过 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);

Answer 1

感谢 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>

希望对您有所帮助。