Question

我正在通过遵循https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ResizeExample.js的教程来熟悉React和fixed-data-table-2软件包。

我遇到一个奇怪的错误，因为当我调整列的大小以致需要水平滚动条时，滚动条的大小不会与表的宽度成比例。而是允许用户滚动浏览所有列标题。

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

点击页面
调整“公司”列的大小并查看滚动条是否可见
开始滚动
继续滚动浏览我所有的列

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

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

屏幕截图： INTIAL_TABLE START_SCROLLING

反应固定数据表2滚动条

0 个答案: