如何在 ag-grid 中为数字右对齐文本

Posted 2023-03-28

【中文标题】如何在 ag-grid 中为数字右对齐文本

【英文标题】：How to right align text in ag-grid for number

【发布时间】：2021-01-11 14:32:13

【问题描述】：

如果 ag-grid 中的任何单元格具有十进制、整数或数字等数值，我希望该单元格右对齐。

this.defaultColumnDefs = 
      width: 75,
      exportColumn: true,
      type: 'numericColumn',
      cellClass(params) 
        return params.colDef.type === 'numericColumn' ? 'ag-numeric-cell' : '';
      ,
      filterParams: 
        buttons: ['clear'],
      ,
      menuTabs: ['filterMenuTab'],
      filter: 'agTextColumnFilter',
      resizable: true,
      sortable: true
    ;

它以前可以工作，现在我必须转到每一列并指定类型。为什么不采用默认类型？

【问题讨论】：

到目前为止你尝试了什么？

@Ekta 您使用的是哪个 agGrid 版本？

@Ekta 我有一个项目正在做同样的事情，在默认列定义中使用 type 和 cellClass，它仍在工作。使用版本 23。

【参考方案1】：

相当简单...

var colDef = 
    name: 'No. Field',
    field: 'noField',
    cellStyle: function(params) 
        if (typeof params.value === 'number') 
            return text-align: 'right';
         else 
            return null;
        
    

您可以通过您的整个 ColumDefinitions (ColDef) 集以编程方式将该单元格样式应用于您的所有列。

顺便说一句，这来自 ag-grid 的官方文档（尽管有所改变）

【讨论】：

我实际上在 desc 中粘贴了代码，在我更新之前它曾经可以工作，然后它没有采用这种风格，我已经更新了我的问题

【参考方案2】：

Ag-grid documentation提供了一个简单的解决方案：

columnDefs: [
         headerName: 'Column A', field: 'a' ,
         headerName: 'Column B', field: 'b', type: 'rightAligned' ,
    ]

只需添加 type: 'rightAligned' 属性。

【参考方案3】：

如果您只希望列标题和单元格都右对齐，您可以使用 NicuVlad 的答案：

columnDefs: [
         headerName: 'Column A', field: 'a' ,
         headerName: 'Column B', field: 'b', type: 'rightAligned' ,
    ]

但是，如果您只希望单元格右对齐而不是标题：

columnDefs: [
         headerName: 'Column A', field: 'a' ,
         headerName: 'Column B', field: 'b', cellClass: 'ag-right-aligned-cell' ,
    ]

如果您希望标题右对齐而不是单元格：

columnDefs: [
         headerName: 'Column A', field: 'a' ,
         headerName: 'Column B', field: 'b', headerClass: 'ag-right-aligned-header' ,
    ]