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.

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

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

回答1:

Thanks for A2A.

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.

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>

I hope it helps.

来源：https://stackoverflow.com/questions/55563249/how-add-horizontal-scrollbar-to-table-in-react-virtualized-codesandbox

标签

reactjs

html-table

scrollbar

react-virtualized