反应固定数据表 2 滚动条

Posted 2023-02-21

【中文标题】反应固定数据表 2 滚动条

【英文标题】：react fixed-data-table-2 scrollbar

【发布时间】：2019-02-18 13:14:33

【问题描述】：

我正在尝试按照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

【参考方案1】：

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

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

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

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

【讨论】：

感谢您的建议。发现我的问题是在表的宽度和高度属性的声明中，我传入的是字符串而不是整数；解决方法是将值包装在 parseInt() 中。