How to use a checkbox for a boolean data with ag-grid

Question

I have searched for awhile now and haven't seen any real example of this.

I am using ag-grid-react and I would like for a column that holds a boolean to represent that boolean with a checkbox and update the object in the rowData when changed.

I know there is checkboxSelection and I tried using it like what I have below, but realized while it's a checkbox, it's not linked to the data and is merely for selecting a cell.

var columnDefs = [
    { headerName: 'Refunded', field: 'refunded', checkboxSelection: true,}
]

So is there a way to do what I am looking for with ag-grid and ag-grid-react?

Answer 1

You should use the cellRenderer property

const columnDefs = [{ headerName: 'Refunded', 
    field: 'refunded', 
    editable:true,
    cellRenderer: params => {
        return `<input type='checkbox' ${params.value ? 'checked' : ''} />`;
    }
}];

I was stuck in the same problem , this is the best I could come up with but I wasn't able to bind the value to this checkbox.

I set the cell property editable to true , now if you want to change the actual value you have to double click the cell and type true or false.

but this is as far as I went and I decided to help you , I know it doesn't 100% solve it all but at least it solved the data presentation part.

incase you found out how please share your answers with us.