首页 > 解决方案 > react-data-grid 列标题中不需要的滚动条

问题描述

问题

在我的 react-data-grid 表的标题中,出现了一个不需要的滚动条。对于我见过的大多数示例,这不会发生。滚动条是不必要的和分散注意力的。

我发现人们想要删除垂直滚动条的问题,但不是只影响标题的问题。我绝对想保留第 2 行及以后的数据的垂直滚动条(一旦出现),但我不希望标题中有单独的小滚动条。

例子

请参阅此代码笔以复制该问题: https ://codesandbox.io/s/gracious-paper-7zo4u?file=/src/App.js:0-690

代码

import React from "react";
import ReactDataGrid from "react-data-grid"; // 6.1.0

const cols = [
  {key: 'a', name: 'alpha', editable: false, sortable: false},
  {key: 'b', name: 'beta', editable: false, sortable: false}
];

const data = [
  {a: 1, b: 1},
  {a: 2, b: 2},
  {a: 3, b: 3}
];

class App extends React.Component {
  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    console.log('CALLED >> onGridRowsUpdated');
  };

  render() {
    return (
      <ReactDataGrid
        columns={cols}
        rowGetter={i => data[i]}
        rowsCount={data.length}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect={true}
      />
    );
  }
}

export default App;

图片

查看标题的右侧,它有一个不需要的迷你滚动条 在此处输入图像描述

标签: react-data-grid

解决方案


推荐阅读