react fixed-data-table-2 scrollbar

Question

I am trying to get familiar with React and the fixed-data-table-2 package by following the tutorial of https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ResizeExample.js.

I am encountering an odd error in that when I resize a column such that a horizontal scroll bar is needed, the scroll bar does not resize proportional to the table width. Rather it allows the user to scroll past all the column-headers.

The series of steps to recreate the error are:

1. Hit the Page
2. Resize Company Column and view the scrollbar is visible
3. Start Scrolling
4. Continue scrolling past all my columns

I was wondering if I had missed a configuration of the Table Component?

"use strict";

import React from 'react';
import FixedDataTable from 'fixed-data-table-2';


const {Table, Column, Cell} = FixedDataTable;


class BackupTable extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
        dataList: [],
        columnWidths: {
          firstName: 240,
          lastName: 150,
          sentence: 140,
          companyName: 60,
        },
      };

      this._onColumnResizeEndCallback = this._onColumnResizeEndCallback.bind(this);

    }

    _onColumnResizeEndCallback(newColumnWidth, columnKey) {
        console.log("SETTING NEW WIDTH (" + newColumnWidth+") of " + columnKey);
        this.setState(({columnWidths}) => ({
          columnWidths: {
            ...columnWidths,
            [columnKey]: newColumnWidth,
          }
        }));
      }


  render() {
      var {dataList, columnWidths} = this.state;
      return (
        <Table
          rowHeight={30}
          headerHeight={50}
          rowsCount={10}
          onColumnResizeEndCallback={this._onColumnResizeEndCallback}
          isColumnResizing={false}
          touchScrollEnabled={true}
          width={1000}
          height={500}
          {...this.props}>
          <Column
            columnKey="firstName"
            header={<Cell>First Name</Cell>}
            cell={<Cell>Basic content</Cell>}
            fixed={true}
            width={columnWidths.firstName}
            isResizable={true}
          />
          <Column
            columnKey="lastName"
            header={<Cell>Last Name (min/max constrained)</Cell>}
            cell={<Cell>Basic content 2</Cell>}
            width={columnWidths.lastName}
            isResizable={true}
            minWidth={70}
            maxWidth={170}
          />
          <Column
            columnKey="companyName"
            header={<Cell>Company</Cell>}
           cell={<Cell>Basic content 4</Cell>}
            width={columnWidths.companyName}
            isResizable={true}
          />
          <Column
            columnKey="sentence"
            header={<Cell>Sentence</Cell>}
            cell={<Cell>Basic content 3</Cell>}
            width={columnWidths.sentence}
            isResizable={true}
          />
        </Table>
      );
    }
}

module.exports = BackupTable;

Screen Shots: INTIAL_TABLE START_SCROLLING

Answer 1

Running the example you provided in this sandbox - it seems like your table is behaving as expected (no errors).

As soon as the sum of the column widths exceeds the width you set for the table (1000px) - the table starts to overflow horizontally and the horizontal scrollbar appears.
In case the sum of the column widths is less than 1000px (like in the initial state) - a 5th "remainder" column appears in order to "fill up" the table to the table width you set.

I think you will see it more clearly if you try playing around with a smaller table width (try changing it to 500 in the sandbox I shared).

In case you are not interested in the horizontal scroll perhaps you should consider setting the overflowX="hidden" prop on your table.