I encounter a problem when create datagrid with GridColumnGroup, GridHeaderRow and colspan.
Here the code I made:
<GridColumnGroup frozen align="left" width="570px">
<GridHeaderRow>
<GridColumn title={ReactHtmlParser("POKEMON <br>NAME")} field="name" rowspan='2' width="50px" key='grd2' ></GridColumn>
<GridColumn title={ReactHtmlParser("DESCRIPTION <br>OF POKEMON")} field="description" rowspan='2' header={this.styleHeader.bind(this)} width="90px" key='grd3' ></GridColumn>
</GridHeaderRow>
<GridHeaderRow>
</GridHeaderRow>
</GridColumnGroup>
<GridColumnGroup>
<GridHeaderRow>
<GridColumn title={ReactHtmlParser("TYPE ADVANTAGES - <br> FOR ATTACKING ENEMY ")} colspan="5" key='grd21' ></GridColumn>
<GridColumn title="LAST BATTLE" field="last_battle" rowspan="2" width="150px" key='grd16' ></GridColumn>
<GridColumn title="LAST BATTLE TIME" field="last_battletime" rowspan="2" width="150px" key='grd17' ></GridColumn>
</GridHeaderRow>
<GridHeaderRow>
<GridColumn title="Type 1" field="type_1" width="100px" key='kiye1' ></GridColumn>
<GridColumn title="Type 2" field="type_2" width="80px" colspan="1" key='kiye2' ></GridColumn>
<GridColumn title="Type 3" field="type_3" width="80px" colspan="1" key='kiye3' ></GridColumn>
<GridColumn title="Type 4" field="type_4" width="80px" colspan="1" key='kiye4'></GridColumn>
<GridColumn title="Type 5" field="type_5" width="200px" colspan="1" key='kiye5' ></GridColumn>
</GridHeaderRow>
</GridColumnGroup>
then the output is inconsistent, title and field+width is not match (see attachment)
also the data is not match
constructor(props) {
super(props);
this.state = {
data : [
{type_3:' type 3', type_4: 'type 4', type_5: 'type 5'},
],
};
}
the order of field,data,width, is different from the title.
Data of
type_3 show on Type 5
type_4 show on LAST BATTLE
type_5 show on LAST BATTLE TIME
What I missed here?