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
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;
}