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

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.

We can use cellRenderer to show checkbox in grid, which will work when you want to edit the field also. Grid will not update the checkbox box value in the gridoption - rowdata directly till you do not update node with respective field in node object which can be access by params object.

params.node.data.fieldName = params.value;

here fieldName is field of the row.

{
    headerName: "display name",
    field: "fieldName",
    cellRenderer: function(params) { 
        var input = document.createElement('input');
        input.type="checkbox";
        input.checked=params.value;
        input.addEventListener('click', function (event) {
            params.value=!params.value;
            params.node.data.fieldName = params.value;
        });
        return input;
    }
}

What about this? It's on Angular and not on React, but you could get the point:

{ 
    headerName: 'Enabled', 
    field: 'enabled', 
    cellRendererFramework: CheckboxCellComponent
},

And here is the checkboxCellComponent:

@Component({
    selector: 'checkbox-cell',
    template: `<input type="checkbox" [checked]="params.value" (change)="onChange($event)">`,
    styleUrls: ['./checkbox-cell.component.css']
})
export class CheckboxCellComponent implements AfterViewInit, ICellRendererAngularComp {

    @ViewChild('.checkbox') checkbox: ElementRef;

    public params: ICellRendererParams;

    constructor() { }

    agInit(params: ICellRendererParams): void {
        this.params = params;
    }

    public onChange(event) {
        this.params.data[this.params.colDef.field] = event.currentTarget.checked;
    }
}

Let me know