How to align the checkbox and text in cell to center in ag grid angular

Question

I have an angular application in that I need to align the checkbox and text to center in table cells.

.component.ts

 columnDefs: ColDef[] = [
  { headerName:'Select',width: 80,field:'select',checkboxSelection:true },
    { headerName:'Action Code',field: 'ActionCode' ,width: 120},
    { headerName:'Action Name',field: 'ActionName' ,width: 180},
    { headerName:'Due Date',field: 'DueDate',width: 190},
   
];

rowData = [
 
    {select: "",ActionCode: 'C-IO', ActionName: 'Begin Golas Workflow', DueDate: "MM/DD/YYYY 12:00 PM"},
    { ActionCode: 'C-IO-A2', ActionName: 'Identify Tobacco triggers', DueDate: "MM/DD/YYYY 12:00 PM" },
    { ActionCode: 'C-MPS', ActionName: 'Set up a Goal', DueDate: "MM/DD/YYYY 12:00 PM" },
    { ActionCode: 'C-PA', ActionName: 'Set up a Goal', DueDate: "MM/DD/YYYY 12:00 PM" },
    { ActionCode: 'C-PA', ActionName: 'Set up a Goal', DueDate: "MM/DD/YYYY 12:00 PM" },
    { ActionCode: 'CODE#', ActionName: 'Set up a Goal', DueDate: "MM/DD/YYYY 12:00 PM" }];

I have tried many ways but Iam unable to move the checkbox and the text in cells to right Can anyone help e on the same

Answer 1

To align cell content to center, set cellClass in column definition:

{ headerName:'Select',width: 80,field:'select',checkboxSelection:true, cellClass: 'cellCenter' }

and define the class in CSS as follows:

.cellCenter .ag-cell-wrapper {
  justify-content: center;
}