Ag-grid：使用AggFunc时如何更改定义列标题名称？

Question

对于给定的列定义，当使用 aggFunc 时， headerName 以 func(string) 格式显示 - 我只希望标题显示我定义的字符串。当 AggFunc 为 null 时，此行为不存在。

const  columnDef: any = {

    headerName: 'Test',
    field: date,
    suppressMenu: true,
    width: 80,
    editable: true,
    lockPosition: true,
    type: 'numericColumn',
    aggFunc: function(data) {

      let sum = 0;
      data.forEach( function(value) {
        if (value) {
            sum = sum + parseFloat(value);
          }
      } );
      if (!sum) { return null; }

      return sum.toFixed(2);
    },
}

headerName 应该显示“test”，但会显示 func(test)。

https://i.sstatic.net/xHPMh.jpg

Answer 1

您需要在

gridOptions

中将此属性标记为 true。

suppressAggFuncInHeader : true;

根据文档 -

当为 true 时，列标题将不包含 aggFunc，例如 'sum(Bank 余额）”将只是“银行余额”。

Answer 2

const gridOptions = {
    columnDefs: [
      {
        headerName: "Select",
        checkboxSelection: (params) => !params.node.footer, // Hide checkbox for footer rows
        width: 100,
      },
      {
        headerName: "Currency",
        field: "currency",
        rowGroup: true,
        hide: true,
        sortable: false,
      },
      {
        headerName: "Custodian Name",
        field: "custodianName",
        sortable: true,
        cellStyle: (params) => {
          if (params.node.footer) {
            return { fontWeight: 'bold' }; // Bold text for footer rows
          }
          return null;
        },
      },
      {
        headerName: "Balance",
        field: "balance",
        valueParser: (params) => Number(params.value),
        aggFunc: 'sum', // Aggregate function for total row
        sortable: true,
        cellStyle: (params) => {
          if (params.node.footer) {
            return { fontWeight: 'bold' }; // Bold text for footer rows
          }
          return null;
        },
      },
      {
        headerName: "Orders",
        field: "orders",
        valueParser: (params) => Number(params.value),
        aggFunc: 'sum', // Aggregate function for total row
        sortable: true,
        cellStyle: (params) => {
          if (params.node.footer) {
            return { fontWeight: 'bold' }; // Bold text for footer rows
          }
          return null;
        },
      },
      {
        headerName: "Net Balance",
        field: "netBalance",
        valueParser: (params) => Number(params.value),
        aggFunc: 'sum', // Aggregate function for total row
        sortable: true,
        cellStyle: (params) => {
          if (params.node.footer) {
            return { fontWeight: 'bold' }; // Bold text for footer rows
          }
          return null;
        },
        valueFormatter: (params) => {
          console.log(params.node, 'ss')
          if (params.node.footer) {
            return `${params.value}`; // Format total for footer
          }
          return params.value; // Default formatting for other rows
        },
      },
    ],
    defaultColDef: {
      flex: 1,
      minWidth: 150,
      sortable: true,
      resizable: true,
    },
    groupIncludeTotalFooter: true, // Include total footer for grouped rows
    groupUseEntireRow: true,
    groupDefaultExpanded: 1,
    groupIncludeFooter: true, // Enable footer for all columns
  };

  return (
    <div style={{ padding: "10px 50px", backgroundColor: "azure" }}>
      <div className="ag-theme-material" style={{ height: 400, width: "100%" }}>
        {loading ? (
          <p>Loading...</p>
        ) : error ? (
          <p>Error: {error}</p>
        ) : (
          <AgGridReact
            rowData={rowData} // Use raw rowData without modification
            gridOptions={gridOptions} // Use gridOptions
          />
        )}
      </div>
    </div>
  );
}

export default App;