AG Grid: center checkbox alone in cell - ag-grid

Question

Versions:
vueJS: 3.0.0
bootstrap: 5.0.0-beta3
ag-grid-community: 26.1.0
ag-grid-vue3: 26.1.2
See screenshot below. In my columnDefs for ag-grid, I have specified checkboxSelection: true for the Pending column. I do not wish to render any text in that column. Rather, I wish for a single checkbox that is centered in each cell. Can this be done? As things stand now, the checkbox is left-aligned in the cell.
Here is the columnDef for Pending:
{ headerName: "Pending", field: "pending", sortable: true, editable: true, checkboxSelection: true, cellStyle: () => getPageStatus() },
And here is styling for column headers:
.ag-header-cell-label {
justify-content: center;
}
Thanks for looking into it.

Answer 1

I scratched up a general solution that explains how to render custom HTML elements within a grid cell. Most of this solution is based on pre-existing articles and blogs out there. Note the data model here (rendered to the grid) assumes a pending property.
<template>
<ag-grid-vue
class="ag-theme-alpine"
:frameworkComponents="frameworkComponents"
:columnDefs="columnDefs"
:rowData="getRowData"
rowSelection="multiple"
domLayout="autoHeight"
editType="fullRow"
#grid-ready="onGridReady">
</ag-grid-vue>
<script>
import CheckboxRenderer from '#/components/CheckboxRenderer.vue';
export default {
data() {
return {
frameworkComponents: {
checkboxRenderer: CheckboxRenderer
},
columnDefs: [
{ headerName: "Pending", field: "pending", sortable: true, editable: true,
cellStyle: () => getPageStatus(), cellRenderer: 'checkboxRenderer', valueGetter: params => params ? null : null },
]
}
}
};
CheckboxRenderer.vue
<template>
<input ref="eGui" #click="checkedHandler" type="checkbox" v-model="params.data.pending" class="ag-input-field-input ag-checkbox-input" />
</template>
<script>
export default {
name: "CheckboxRenderer",
props: {
params: Object
},
methods: {
getGui() {
return this.$refs.eGui;
},
checkedHandler(e) {
let checked = e.target.checked;
let colId = this.params.column.colId;
this.params.node.setDataValue(colId, checked);
}
},
};
</script>
<style>
.ag-checkbox-input {
width: 18px;
height: 18px;
vertical-align: middle;
}
</style>