React Bootstrap table : not able to update checkbox value when using dataFormat on one of the table columns

Question

I am using react bootstrap table and have "Status" as one of the columns in the table. This column is formatted using dataFormat tag and i have written a function to display render the checkbox. Something like this :

<TableHeaderColumn dataField='STATUS' dataFormat={statusFormatter}>Column name</TableHeaderColumn>

Now i want to update the value of the checkbox. But i think statusFormatter being a function does not provide me handle to update the value of a checkbox.

Here is my code for the function :

function statusFormatter(cell, row) {
let checkBoxValue = false;

if (cell==='RESOLVED')
     checkBoxValue = true;  

return (
    <CheckBoxForTable active={checkBoxValue} onToggle={this.onStatusUpdate.bind(this)}/>
)
}

I am getting the following error: Cannot read property 'bind' of undefined

Can anybody guide me how to update the checkbox value and send an action to the server.

Answer 1

Here is a work around, Just pass onStatusUpdate of your component to formatter function

<TableHeaderColumn 
   dataField='STATUS' 
   dataFormat={(cell, row) => statusFormatter(cell, row, this.onStatusUpdate.bind(this))}
>Column name</TableHeaderColumn>

and your formatter

function statusFormatter(cell, row, onStatusUpdate) {
let checkBoxValue = false;

if (cell==='RESOLVED')
     checkBoxValue = true;  

return (
    <CheckBoxForTable active={checkBoxValue} onToggle={onStatusUpdate}/>
)
}