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.
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 here http://adazzle.github.io/react-data-grid/scripts/example05-custom-formatters.js
Follow these steps
in rowGetter create one more key for each row, this key will be an object which will have your multiple cols data combined
Create one simple component and provide it to formatter
in data grid
in that formatter component you will receive your newly created key in props.
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With