Title: [SOLVED] DATAGRID Styling headerStyle & headerCls cannot working?
Post by: kifni41 on August 06, 2020, 12:41:49 AM
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 headerStyle={{backgroundColor:'#ccc'}} this not affect the style , also when i try then i inspect element, no class in the header also need more example in document tho
Title: Re: DATAGRID Styling headerStyle & headerCls cannot working?
Post by: jarry on August 08, 2020, 01:02:03 AM
Please set the 'hcellCss' to modify the header cell's style. <GridColumn field="name" title="Name" hcellCss={{backgroundColor: '#ddd'}}></GridColumn>
Title: Re: DATAGRID Styling headerStyle & headerCls cannot working?
Post by: kifni41 on August 12, 2020, 02:26:07 AM
i also try your code using hcellCss, nothing happen
i see on inspect element, no style added there, is there any config i miss?
Title: Re: DATAGRID Styling headerStyle & headerCls cannot working?
Post by: jarry on August 12, 2020, 04:29:28 PM
Please try to update to the newest version.
Title: Re: DATAGRID Styling headerStyle & headerCls cannot working?
Post by: kifni41 on August 12, 2020, 07:23:25 PM
thanx, solved now
|