Simple boolean editor that uses the standard HTML checkbox input.
Enabling Checkbox Cell Editor Copy Link
Edit any cell in the grid below to see the Checkbox Cell Editor. Note that by default the Checkbox Cell Renderer is shown, and the editor is only displayed when you start editing (e.g. double click within the cell).
import {
CheckboxEditorModule,
ClientSideRowModelModule,
ColDef,
GridApi,
GridOptions,
ModuleRegistry,
createGrid,
enableDevValidations,
} from "ag-grid-community";
// Enable extended validations only for development
if (process.env.NODE_ENV !== "production") {
enableDevValidations();
}
ModuleRegistry.registerModules([
ClientSideRowModelModule,
CheckboxEditorModule,
]);
const columnDefs: ColDef[] = [
{
headerName: "Checkbox Cell Editor",
field: "boolean",
cellEditor: "agCheckboxCellEditor",
},
];
const data = Array.from(Array(20).keys()).map((val: any, index: number) => ({
boolean: !!(index % 2),
}));
let gridApi: GridApi;
const gridOptions: GridOptions = {
defaultColDef: {
width: 200,
editable: true,
},
columnDefs: columnDefs,
rowData: data,
};
const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);
<div id="myGrid" style="height: 100%"></div>
Enabled with agCheckboxCellEditor and generally used in conjunction with the Checkbox Cell Component.
columnDefs: [
{
cellRenderer: 'agCheckboxCellRenderer',
cellEditor: 'agCheckboxCellEditor',
// ...other props
}
]