1

我正在尝试按照https://github.com/schrodinger/fixed-data-table-2/blob/master/examples/ResizeExample.js的教程来熟悉 React 和 fixed-data-table-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;

屏幕截图： INTIAL_TABLE START_SCROLLING

4

1 回答 1

0

运行您在此沙箱中提供的示例- 您的表似乎按预期运行（没有错误）。

一旦列宽总和超过您为表格设置的宽度 ( 1000px) - 表格开始水平溢出并出现水平滚动条。
如果列宽的总和小于1000px（如在初始状态下） - 将出现第 5 个“剩余”列，以便将表格“填充”到您设置的表格宽度。

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

如果您对水平滚动不感兴趣，也许您应该考虑overflowX="hidden"在桌子上设置道具。

于 2018-09-13T21:05:11.043 回答