1

enter image description here

i want change my background color with condition in BootstrapTable but it always return

enter image description here

enter image description here

My function

trStyle = (cell,row) => {
if(row.createdby == "system"){
  return { backgroundColor: '#b2hf3' }
}else{
  return { backgroundColor: '#ffffff' }
}

My code

<BootstrapTable data={this.state.datas}
              pagination={true}
              options={options}
              search={true}
              trStyle={ this.trStyle }
            >
              <TableHeaderColumn width='90' dataField='action' headerAlign='center' dataAlign='center' dataFormat={this.buttonFormatter}>ACTION</TableHeaderColumn>
              <TableHeaderColumn width='100' dataField='isActive' headerAlign='center' dataAlign='center' dataFormat={this.statusFormatter}>STATUS</TableHeaderColumn>
              <TableHeaderColumn width='155' isKey={true} dataField='username' headerAlign='center' dataAlign='center'>USERNAME</TableHeaderColumn>
              <TableHeaderColumn width='160' dataField='namaLengkap' headerAlign='center' dataAlign='center'>NAMA</TableHeaderColumn>
              <TableHeaderColumn width='120' dataField='roleName' headerAlign='center' dataAlign='center'>ROLE</TableHeaderColumn>
              <TableHeaderColumn width='150' dataField='namaWilayah' headerAlign='center' dataAlign='center'>WILAYAH</TableHeaderColumn>
              <TableHeaderColumn width='180' dataField='alamat' headerAlign='center' dataAlign='center'>ALAMAT</TableHeaderColumn>
              <TableHeaderColumn width='110' dataField='noTelepon' headerAlign='center' dataAlign='center'>TELEPON</TableHeaderColumn>
              <TableHeaderColumn width='180' dataField='email' headerAlign='center' dataAlign='center'>EMAIL</TableHeaderColumn>
              <TableHeaderColumn width='90' dataField='createdby' headerAlign='center' dataAlign='center'>CreatedBY</TableHeaderColumn>
            </BootstrapTable>
Ragil Pratama
  • 75
  • 12
  • 1
    The error means `row` is undefined. Also, post code, not images of code. –  Aug 09 '22 at 12:50
  • done i attach the code – Ragil Pratama Aug 09 '22 at 12:53
  • Can you link us to the docs for trStyle? I can't find them. –  Aug 09 '22 at 12:53
  • i try this https://stackoverflow.com/questions/51144512/alternating-background-color-react-bootstrap-table but failed – Ragil Pratama Aug 09 '22 at 12:58
  • 1
    According to [this](https://github.com/AllenFang/react-bootstrap-table/blob/master/examples/js/style/tr-style-table.js) the parameters are `(row, rowIndex)`. Still, that doesn't really explain the error you're getting. Which library and version are you using exactly? And why not a current one? –  Aug 09 '22 at 13:03
  • "react-bootstrap-table": "^4.3.1" – Ragil Pratama Aug 09 '22 at 13:06
  • 1
    1. use `trStyle = (row) => {` 2. `'#b2hf3` isn't a color. A color has six hex digits. `h` isn't even in the hex range. live and working example: https://codesandbox.io/s/using-dot-notation-for-jsx-type-forked-t1nd7k?file=/src/index.js –  Aug 09 '22 at 13:30

0 Answers0