Customizing Column Headers in Ag-Grid when Implementing Aggregation Functions

When using aggFunc in a column definition, the headerName appears in the format func(string) instead of just displaying the string as defined. This behavior is not present when AggFunc is 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);
    },
}

Even though the headerName is set to say "test", it will actually display as func(test).

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

Answer №1

Make sure to set the following property to true in your gridOptions:

suppressAggFuncInHeader : true;

According to the documentation-

When this property is enabled, column headers will not display the aggFunc information, for example 'sum(Bank Balance)' will be shown as 'Bank Balance'.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The logic behind regular expressions

Currently working on building a web application with Angular 6 and I have a query: I'm in the process of developing a custom input component (specifically for text inputs) like so: @Component({ selector: 'input-text', templateUrl: &apos ...

Updating view with *ngIf won't reflect change in property caused by route change

My custom select bar has a feature where products-header__select expands the list when clicked. To achieve this, I created the property expanded to track its current state. Using *ngIf, I toggle its visibility. The functionality works as expected when cli ...

The Angular Observable continues to show an array instead of a single string value

The project I am working on is a bit disorganized, so I will try to explain it as simply as possible. For context, the technologies being used include Angular, Spring, and Maven. However, I believe the only relevant part is Angular. My goal is to make a c ...

What could be causing the data-* prefix to malfunction in Angular 9?

I'm facing an issue with a basic component in Angular 9. Check out the code below: Component : @Component({ selector: 'hello', template: `<h1>Hello {{name}}!</h1>`, styles: [`h1 { font-family: Lato; }`] }) export class He ...

Uploading audio mp3 files with Angular 2 and ExpressJS to the server (maximum size of 16MB)

I am embarking on a new project that will require users to upload audio MP3 files under 16MB in size, which falls within the maximum file size limit for mongoDB. I have been researching but haven't found a clear solution on how to handle this on the s ...

Trigger a redraw of the Angular Material sidenav

My webpage features two Angular Material sidenavs. However, the website's CSS includes an @media query: @media (max-width: 1440px) { mat-sidenav { width: 300px; } } When the screen width changes without a page reload, I notice a gap ...

Obtain the initial URL when initializing an Angular application

In the process of creating an Angular application for a landing page of a SaaS platform, the SaaS redirects to the Angular app using the URL http://localhost:4200/token=<token>. Shortly after, Angular switches to the home component at http://localhos ...

Unable to submit a post on Ionic 3 platform

I've been attempting to make a POST request using HttpClient Angular to communicate with a server, but I've encountered an error in my code: File: *.ts import { HttpClient } from '@angular/common/http'; constructor(public http: Http ...

The 'setState' property is not found on the 'Window' type

I am encountering an issue with the code snippet in my index.tsx file let state = {}; window.setState = (changes: any) => { state = Object.assign({}, state, changes); ReactDOM.render(<App {...state} />, document.getElementById("root")); ...

Working with Typescript: Defining the return type of a function that extracts a subset of an object

Currently, I am attempting to create a function that will return a subset of an object's properties. However, I’m facing some issues with my code and I can't pinpoint the problem. const initialState = { count: 0, mounted: false, } type St ...

Please provide pattern block links and any special characters as input

I have a promotion box where users can input text to send to administrators. Objectives I need to prevent users from inputting links and special characters. Users should only be able to input letters a-z (case insensitive) and numbers 0-9. Input is option ...

Setting the ariaLabel value in TypeScript is a straightforward process that involves defining the

In my TypeScript React application, I am attempting to dynamically set the ariaLabel value. However, ESLint is flagging an error: Property 'ariaLabel' does not exist on type 'HTMLButtonElement'. I have tried various types but none of t ...

How can we update the information in the initial observable using data from a separate observable, taking into consideration specific conditions in Angular with RxJS?

Encountered a scenario where I need to fetch data from an API (e.g. cars via getCars()) that returns Observables and then get additional data by car model (e.g. features via getFeatures(model)) in order to replace the features data for each car. In relati ...

Ways to implement es6 in TypeScript alongside react, webpack, and babel

Being new to front-end development, I have found that following a simple tutorial can quickly help me start tackling problems in this field. One issue I've encountered is with ES5, which lacks some of the tools that are important to me, like key-value ...

API Router in Express with TypeORM returning 404 error when handling POST request

I've encountered a tricky bug while attempting to make POST requests to a test endpoint on my local server. My approach involves using Insomnia to send a basic Register JSON POST request to http://localhost:5000/api/auth/register with the following d ...

Angular, perplexed by the output displayed in the console

I'm completely new to Angular and feeling a bit lost when it comes to the console output of an Angular app. Let me show you what I've been working on so far! app.component.ts import { Component } from '@angular/core'; @Component({ ...

How to vertically align Material UI ListItemSecondaryAction in a ListItem

I encountered an issue with @material-ui/core while trying to create a ListItem with Action. I am looking for a way to ensure that the ListItemSecondaryAction stays on top like ListItemAvatar when the secondary text becomes longer. Is there any solution to ...

Dealing with errors when working with an array of Observables in forkJoin: Tips and techniques

In my Angular app, I am fetching an observable stream from an API and I would like to handle errors using forkJoin. import { Observable } from 'rxjs'; import { forkJoin, of, throwError } from 'rxjs'; //Creating an array of observables ...

What is causing the ESLint error when trying to use an async function that returns a Promise?

In my Next.js application, I have defined an async function with Promise return and used it as an event handler for an HTML anchor element. However, when I try to run my code, ESLint throws the following error: "Promise-returning function provided t ...

What steps can be taken to prevent a tab click from causing issues?

Within my application, there is a tab group that contains four tabs: <ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Programmes" tabIcon="icon-programmes"></ion-tab> <ion-tab [root]="tab2Root" (ionSelect)="studioCheck()" tabTitle= ...