反应固定数据表2滚动条

Question

我正试图通过遵循https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ResizeExample.js教程来熟悉React和固定数据表2包。

我遇到了一个奇怪的错误，当我调整列的大小时，需要一个水平滚动条，滚动条的大小与表的宽度不成比例。相反，它允许用户滚动所有列标题。

重新创建错误的一系列步骤是：

1. 点击页面
2. 调整公司列的大小并查看滚动条是可见的
3. 开始滚动
4. 继续滚动通过我的所有列

我想知道我是否错过了表组件的配置？

​

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

​

屏幕截图：表格 滚动

Answer 1

运行您在这个沙盒中提供的示例--您的表的行为似乎与预期的一样(没有错误)。

一旦列宽度之和超过您为表(1000px)设置的宽度，该表就开始水平溢出，并出现水平滚动条。

如果列宽度之和小于1000px (类似于初始状态)，则会出现第五个“余数”列，以便将表“填充”到您设置的表宽度。

我认为，如果您尝试使用更小的表宽(尝试将其更改为我共享的沙箱中的500 )，您会更清楚地看到它。

如果您对水平滚动不感兴趣，也许您应该考虑在您的表上设置overflowX="hidden"支柱。