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

Question

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

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

Answer 1

如果您只希望列标题和单元格都右对齐，您可以使用 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' },
    ]

Answer 2

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

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

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

Answer 3

非常坦率的...

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 的官方文档（尽管有所改变）