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

【问题标题】：How to right align text in ag-grid for number如何在 ag-grid 中为数字右对齐文本
【发布时间】：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。

标签： angular ag-grid ag-grid-angular

【解决方案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' },
    ]

【讨论】：