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

Question

我正在使用“React Data Grid”库 http://adazzle.github.io/react-data-grid 并且我想对列进行分组，并且每个组都应该有自己的标题。

像这样的东西：

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

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

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

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

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

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

按着这些次序

1. 在 rowGetter 中为每一行再创建一个键，该键将是一个对象，它将合并多个列数据

2. 创建一个简单的组件并将其提供给formatter数据网格

3. 在该格式化程序组件中，您将在 props 中收到新创建的密钥。

4. 创建一个你喜欢的 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;