7

下面是我的 Reactdata 网格代码

    this._columns = [
          {
            key: 'id',
            name: 'ID',
            width: 40
          },
          {
            key: 'task',
            name: 'Title',
            width:100
          },
          {
            key: 'priority',
            name: 'Priority',
            width:100
          },
          {
            key: 'issueType',
            name: 'Issue Type',
            width:100
          },
          {
            key: 'complete',
            name: '% Complete',
            width:100
          },
          {
            key: 'startDate',
            name: 'Start Date',
            width:100
          },
          {
            key: 'completeDate',
            name: 'Expected Complete',
            width:100
          }
        ];

          render() {
        return  (
          <ReactDataGrid
            columns={this._columns}
            rowGetter={this.rowGetter}
            rowsCount={this._rows.length}
            minHeight={500}
            minColumnWidth={120} 
          />);
      }

使用下面的 React 数据网格： https ://github.com/adazzle/react-data-grid

我想将宽度作为百分比传递，我们如何使用 React 数据网格来实现。任何帮助，将不胜感激。谢谢

4

3 回答 3

2

我知道可能为时已晚，但您可以通过将值设置为字符串来实现

const columns = [
  {
    key: 'Month',
    name: 'Mes',
    width: '50%',
  },
  {
    key: 'Tickets',
    name: 'Tickets',
    width: '10%',
  },
 ];

希望能帮助到你

于 2019-04-29T10:35:29.573 回答
1

要使给定的列可调整大小，请设置column.resizable = true.

如果您需要知道 a 何时column调整大小，请使用onColumnResizeprop。这将在调整列大小时触发，并将报告列索引及其新宽度。

这些可以保存在后端并用于在组件初始化时通过width在每列中设置键来恢复列宽。

通过resizable:true您想要调整大小，如下所示。

this._columns = [
  {
    key: 'id',
    name: 'ID',
    resizable: true,
    width: 40
  },
  {
    key: 'task',
    name: 'Title',
    resizable: true
  }]

参考这里了解更多信息

于 2018-09-05T09:52:25.203 回答
0

要在反应组件中以百分比形式传递，您只需执行以下宽度='100%'。

于 2018-09-05T09:47:44.077 回答