如何在react-virtualized(CodeSandBox)中向表添加水平滚动条 [英] How add horizontal scrollbar to table in react-virtualized (CodeSandBox)

问题描述

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

In this table I want to add some colums with widths. If columns are more width than page, the horizontal scrollbar doesn't show.

如何从沙盒中重新制作示例并添加水平滚动条?可以通过Table组件执行此操作吗?

How to remake example from sandbox and add horizontal scrollbar? Is to possible doing this by Table components?

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);

推荐答案

感谢A2A.

我遇到了一个类似的情况，一张桌子有10列，并且视口宽度不足以容纳它.

I had a similar situation with a table having 10 columns and viewport width isn't enough to fit.

一些失败的解决方法后，我想出了一个简单的解决方法.

After some failed workaround, I came up with this simple fix.

对于Table组件，有条件地添加width.

For the Table component, add the width conditionally.

// 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>

希望对您有帮助.

这篇关于如何在react-virtualized(CodeSandBox)中向表添加水平滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！