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

Sai Krishna · Accepted Answer · 2020-01-16 12:28:23Z

4

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.

answered Jan 16, 2020 at 12:28

Sai Krishna

6575 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related