How to group columns in React Data Grid?

6
votes

I'm using "React Data Grid" library http://adazzle.github.io/react-data-grid and I want to group columns, and each group should have its own header.

Something like this:

|-------------- Group A header ------------|-------------- Group B header---------------|

|------A1 column-----|-----A2 column----|-----B1 column-----|------B2 column------|

|-------A1 Data-------|------A2 Data-------|-------B1 Data------|-------B2 Data--------|

It should possibly be a not hacky way and all the functions of the library should be still supported (like horizontal scrolling).

I know it's possible to group rows, like this:

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

I want the same thing but with columns. Couldn't find it in the docs.

Would be grateful for any tip. Thanks.

1
javascriptcssreactjsdatagrid

1 Answers

1
votes

I think it is too late to answer now, but still mentioning just in case somebody lands here.

It is quite simple, You need to use customformatter to achieve this have a look http://adazzle.github.io/react-data-grid/scripts/example05-custom-formatters.js

Follow these steps

  1. in rowGetter create one more key for each row, this key will be an object which will have your multiple cols data combined

  2. Create one simple component and provide it to formatter in data grid

  3. in that formatter component you will receive your newly created key in props.

  4. Create a dom as you like.

Here is a short example

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;