如何将单元格中的复选框和文本对齐到 ag 网格的中心 angular

Question

我有一个 angular 应用程序，我需要将复选框和文本对齐到 table 个单元格的中心。

.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" }];

我尝试了很多方法，但我无法将复选框和单元格中的文本向右移动任何人都可以帮助e吗

Answer 1

要将单元格内容居中对齐，请在列定义中设置 cellClass：

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

并定义CSS中的class如下：

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

如何将单元格中的复选框和文本对齐到 ag 网格的中心 angular

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

ag-grid

ag-grid-ng2

angular

ag-grid-angular