Question

我正在使用＆＃34; React Data Grid＆＃34;图书馆 http://adazzle.github.io/react-data-grid 我想对列进行分组，每个组都应该有自己的标题。

这样的事情：

| -------------- A组头------------ | -------------- B组头--------------- |

| ------ A1栏----- | ----- A2栏---- | ----- B1栏----- | ------ B2柱------ |

| ------- A1数据------- | ------ A2数据------- | ------- B1数据---- - | ------- B2数据-------- |

它可能应该是一种不太hacky的方式，并且仍然需要支持库的所有功能（如水平滚动）。

我知道可以对行进行分组，如下所示：

http://adazzle.github.io/react-data-grid/examples.html#/grouping

我想要同样的东西，但有列。无法在文档中找到它。

将不胜感激任何提示。感谢。

Answer 1

我认为现在回答已经为时已晚，但仍然提及以防万一有人落在这里。

这很简单，您需要使用customformatter来实现看一看 http://adazzle.github.io/react-data-grid/scripts/example05-custom-formatters.js

遵循这些步骤

在rowGetter中为每行再创建一个密钥，此密钥将是一个对象，它将合并您的多个cols数据
创建一个简单的组件并将其提供给数据网格中的formatter
在该格式化程序组件中，您将在道具中收到新创建的密钥。
根据需要创建一个dom。

这是一个简短的例子

rowGetter(i) {
    const nameandpic= {
        name: this.state.users.name,
        imgpath: this.states.users.imgpath,
    };
    // below line will add nameandpic key in all rows, which your formatter will pick
    const row = Object.assign({}, this.state.users[i], { nameandpic});
    return row;
}

<ReactDataGrid
   columns={[
       { key: 'nameandpic', name: 'Name', formatter: NameFormatter},
       { key: 'age', name: 'Age' },
       { key: 'address', name: 'Address' },
    ]}
   rowGetter={this.rowGetter}
   rowsCount={resultCount}
 />


/*** NameFormatter.js ***/
import React from 'react';
function NameFormatter(props) {

    return (
        <div>
            <span>props.value.name</span>
            <img src={props.values.imgpath} alt="" />
        </div>
    );
}
export default NameFormatter;

如何在React Data Grid中对列进行分组？

1 个答案: