How add horizontal scrollbar to table in react-virtualized (CodeSandBox)

Question

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

Answer 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.