thanks, work.
i didn't think like that before 

How to set a tree item ? no example i can find in documentation,

is it use 'selectNode' and how to do it?
when first load, i want to set an item as highlighted/selected,

i tried this, not work, eheh

Code:

componentDidMount() {
   setTimeout(()=>{
         this.tree.selectNode({iconCls:"icon-table", text: "TABLE 2", to: "/table2"})
     },2000);
}

i make custom style on datagridcolumn like this

Code:

 
 <GridColumn key={'fk'} field={something}  width={36} filterable={false}
             hcellCss={this.styleHeader(value)}
             cellCss={this.styleCell.bind(this)} align="center" 
   ></GridColumn> 

and i put console

Code:

styleCell(row,value) {
  console.log('here......')
}

this styleCell always rendering whenever mouse moving in datagrid,
I think this affect performance so much,
can I shut down the rendering when mouse moving?
user scrolling when mouse is moving some time, lag when scrol

Nice, work now.

And i found another problem btw, group name related.
When i add numbering like

Code:

<GridColumn  field="rn" align="center" width="30px" filterable={false}
                            cellCss="datagrid-td-rownumber"
                            render={({rowIndex}) => (
                              <span>{rowIndex+1}</span>
                            )}
                          />

group name counted as row, so number start at 2.
I there more than 1 group name there, numbering become more invalid.

thanx, solved now

i also try your code using hcellCss, nothing happen

i see on inspect element, no style added there,
is there any config i miss?

i try put console inside onPageChange function,

when i click colapse icon in grouping name nothing happend, not triggered

Code:

import React from 'react';
import { DataGrid, GridColumn } from 'rc-easyui';

class Coba2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.getData()
    }
  }
  getData() {
    return [
      {"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
      {"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
      {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
      {"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
      {"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
      {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
      {"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
      {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
      {"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
      {"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
    ]
  }
  render() {
    return (
      <div>
        <h2>Basic DataGrid</h2>

        <DataGrid data={this.state.data} style={{height:250}}>
          <GridColumn field="itemid" title="Item ID"></GridColumn>
          <GridColumn field="name" title="Name" headerStyle={{backgroundColor:'#ccc'}}></GridColumn>
          <GridColumn field="listprice" title="List Price" align="right"></GridColumn>
          <GridColumn field="unitcost" title="Unit Cost" align="right"></GridColumn>
          <GridColumn field="attr" title="Attribute" width="30%"></GridColumn>
          <GridColumn field="status" title="Status" align="center"></GridColumn>
        </DataGrid>
        
      </div>
    );
  }
}

export default Coba2;

i try this basic code, then try to use

Code:

headerStyle={{backgroundColor:'#ccc'}}

this not affect the style ,

also when i try

Code:

headerCls

then i inspect element, no class in the header

also need more example in document tho

But i found another problem minor,

by doing this thing i can't collapse the grouping when click the icon in grouping row

Thanks, this help a lot.
you're so genius Jarry 

so how the answer to this case? hehe need help please,
can you give me example

the datagrid can't show correct data,
i can't figured it,
Group Name always count as row data

ah, so when i try this, remove selectionMode in buttongroup its work

Code:

 <ButtonGroup >
        {this.state.months.map((value,index)=>{
              return <LinkButton style={{width:'35px'}} toggle selected={value.id===this.state.selectMonth2? true : false} key={'xz'+value.id} onClick={()=>{this.setState({selectMonth2: value.id});} }>
               {value.name}
              </LinkButton>

        })}
  </ButtonGroup>

this work fine now, hehe,

Here i want to set as selected if the button meet condidion.
this is the state

Code:

this.state = {
 selectMonth2:6,
 months: [
        {id:1,name:"Jan"}, {id:2,name:"Feb"}, {id:3,name:"Mar"}, {id:4,name:"Apr"}, {id:5,name:"May"}, {id:6,name:"Jun"},
        {id:7,name:"Jul"}, {id:8,name:"Aug"}, {id:9,name:"Sep"}, {id:10,name:"Oct"}, {id:11,name:"Nov"}, {id:12,name:"Dec"}
    ]
}

then i loop button, try to selected if meet condition

Code:

 

<ButtonGroup selectionMode="single">
{this.state.months.map((value,index)=>{
    return <LinkButton style={{width:'35px'}} toggle selected={value.id===this.state.selectMonth2? true : false} key={'xz'+value.id} onClick={()=>{this.setState({selectMonth2: value.id});} }>
               {value.name}
       </LinkButton>
 })}
</ButtonGroup>
 

but can't work, how to set button selected?

[pageFilter]

thanks
i tried add pageFilter={this.pageFilter}
its worked for normal pagination,

but when i try datagrid lazy pagination, pageFilter is not detected or not called at all

when i put console.log() not show any log,
and not error when i delete pageFilter(data, pageNumber, pageSize)

hi,

i try make datagrid with pagination with pagination,
when i show limit 4 row per page, it show 4 row (include the groupfield).
any config or some tips to show data correctly?

Here the attachment, using grouping vs no grouping.