Question

我想要一个带有可编辑数据和可调整大小列的react-data-grid。仅可以调整示例的最后一列的大小。

我结合了https://adazzle.github.io/react-data-grid/docs/examples/column-resizing中的“基本编辑”和“列大小调整”。

import React from 'react';
import ReactDataGrid from 'react-data-grid';

const defaultColumnProperties = {
  editable: true, 
  resizable: true, 
  width: 120,
};
const columns = [
  { key: 'id', name: 'ID' },
  { key: 'title', name: 'Title' },
  { key: 'complete', name: 'Complete' },
].map(c => ({ ...c, ...defaultColumnProperties }));;

const rows = [
  { id: 0, title: 'Task 1', complete: 20 },
  { id: 1, title: 'Task 2', complete: 40 },
];

class Example extends React.Component {
  state = { rows };

  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };

  render() {
    return (
      <ReactDataGrid
        columns={columns}
        rowGetter={i => this.state.rows[i]}
        rowsCount={this.state.rows.length}
        minHeight={500}
        onColumnResize={(idx, width) =>
          console.log(`Column ${idx} has been resized to ${width}`)
        }
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect
      />
    );
  }
}

我希望能够抓住第1列和第2列之间的垂直分隔符，并拖动以扩大第1列的宽度，但是唯一可抓取的列分隔符位于最后一列之后，因此我唯一能调整大小的列就是最后一列

Answer 1

虽然添加Bootstrap CSS确实可以解决问题，但更简单的解决方案是仅添加重新获得框框边框所需的BS CSS：

styles.css

* {
  box-sizing: border-box;
}

我只是将其范围限定为使用react-data-grid的组件，如下所示：

styles.scss

#myComponent {
  * {
    box-sizing: border-box;
  }
}

Answer 2

将此行添加到index.html

<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">

是通过将另一个具有调整工作列大小的项目与这个问题项目进行比较发现的。

为什么这些react-data-grid列不可调整大小？

2 个答案: