Print Page - [Solved] GridColumnGroup inconsistency between Field and Header Title

I encounter a problem when create datagrid with GridColumnGroup, GridHeaderRow and colspan.
Here the code I made:

Code:

  <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

Code:

constructor(props) {
    super(props);

    this.state = {
      data : [
          {type_3:' type 3', type_4: 'type 4', type_5: 'type 5'},
      ],
    };
  }

(https://photos.google.com/share/AF1QipOjbgA4_JvJiICgbA_U0EGOS7hieF9TD4XGUEsjYgzag5NGb0jY-rdIQ34DSBsXFA/photo/AF1QipOpdusXUOaQsHpTCdQkMCB1o_gMKgGYVJ4N8YXH?key=aUN4MHE3b2lHbGRGV0UxazNFZVdaUWdZcldZdnZR)

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?

EasyUI Forum

General Category => EasyUI for React => Topic started by: kifni41 on November 07, 2019, 12:57:39 AM