javascript - 如何对 React Data Grid 中的列进行分组？

Question

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

像这样:

|---------------- A 组标题------------|---------------- B 组 header ----------------|

|------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

按照这些步骤

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

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

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

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;