Having difficulty converting string columns/data to numerical values when exporting an Ag-Grid table to Excel with getDataAsExcel function

I am having an issue with exporting data from my ag-grid table to excel using the API method getDataAsExcel.

The problem arises because I have a column containing only string values, while all other columns are numeric and displayed in the ag-grid table as "6,999,500".

Despite this display format, when I export the data, all columns are saved with the format "General" or String instead.

For example, if my ag-grid table looks like this:

TABLE

name | salary | fee

john | 10,000 | 14

dany | 50 | 1,000

where, name -> string

salary -> numeric

fee -> numeric

It's strange that when exported to excel, all the values are saved as "String", except for 14 and 50 in this case. I observed that the numbers without commas (like 14 and 50) are exported as numeric, while those with commas (such as 10,000 and 1,000) are exported as string.

I attempted to use the parseInt() function like this:

if value = 10,000

parseInt(value.replace(/,/g, ''));

Even after replacing 10,000 with its parsed value, it still remains a String when exported.

Is there a way to change the formatting of the entire column, or at least parse these values individually?

Any assistance would be greatly appreciated!

Answer №1

It is essential to explicitly define the dataType for excel export, as detailed in the documentation.

var columnDef = {
    ...,
    cellClass: 'itsANumber'
};

ExcelStyles: [
        {
            id: "itsANumber",
            dataType: 'number', // can use string, number, boolean, dateTime
        },

The dataType parameter (optional) can be one of (string, number, boolean, dateTime, error). While it is usually automatically determined based on the content of the cell, specifying this parameter can help enforce a specific data type. For example, if your cell content is 003 and you want it to remain as such, setting the dataType to string will preserve the original format instead of converting it to a number (which would display as just 3).

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

Angular template-driven forms with a custom validator allows for creating your own validation

Hey StackOverFlow folks, I'm currently facing an issue with a custom validation in template-driven forms. I have a stepper component and a unique form that encapsulates all the groups. For each step, I need the inputs' sum to be 100%, triggering ...

Here is a guide on sorting through data within an array of objects using React.js and Typescript

How can I filter dealers' data based on the minimum and maximum price range of a slider change? I am retrieving dealers' data using an API and storing the slider's min and max values in a handle change function. What is the best way to filte ...

Verify that each field in the form contains a distinct value

I have a formarray with nested formgroups. How do I ensure that the elements within each formgroup are unique? Here is an example of my form setup: form: FormGroup = this.formBuilder.group({ fields: this.formBuilder.array([]), }); private createField() ...

What is the process for removing a document with the 'where' function in Angular Fire?

var doc = this.afs.collection('/documents', ref => ref.where('docID', '==', docID)); After successfully retrieving the document requested by the user with the code above, I am unsure of how to proceed with deleting that do ...

Issue with Typescript Conditional Type not being functional in a function parameter

For a specific use-case, I am looking to conditionally add a key to an interface. In attempting to achieve this, I used the following code: key: a extends b ? keyValue : never However, this approach breaks when a is generic and also necessitates explicit ...

"Facing Issues with lite-server crashing while setting up Angular 2 Quick

Hello Internet folks, Welcome Working through the Angular2 Quickstart guide has been quite a journey. I've encountered several instances where the lite-server would crash right after running npm start. The crash would be displayed like this in your ...

Enhancing view with Typescript progressions

My current view only displays a loader.gif and a message to the user. I am looking to enhance the user experience by adding a progress indicator, such as "Processing 1 of 50", during the data update process. The ts class interacts with a data service layer ...

What is the reason behind the Typescript compiler not converting .ts files to .js files automatically?

Displayed below are the folders on the left showcasing my Typescript file in /src (blue) compiled into Javascript in /dist (purple) using tsc. https://i.stack.imgur.com/7XNkU.png In the source file on the left, there is a reference to a .ts module file t ...

Leverage the useRef hook with React Draggable functionality

Having recently delved into coding, I find myself navigating the world of Typescript and React for the first time. My current challenge involves creating a draggable modal in React that adjusts its boundaries upon window resize to ensure it always stays wi ...

Using Angular 4 to monitor changes in two-way binding properties

Recently, I developed a unique toggle-sorting component that examines if the current sorting parameters align with its sorting slug and manages clicks to reflect any changes. // toggle-sorting.component.ts @Input() sortingSlug: string; @Input() currSorti ...

Automatic renewal of bearer token in Angular 7

My AuthService has two key methods: getAuthToken (returns a Promise to allow lazy invocation or multiple invocations with blocking wait on a single set) refreshToken (also returns a Promise, using the refresh token from the original JWT to request a ...

Utilizing *ngFor to display elements with odd indices

Within my Angular application, I have successfully used a loop to populate the 4 employeeList components. Here is the code snippet: <div *ngFor="let record of records"> <p-panel> <div comp-employeeList [listFilter]="record.Filte ...

Dividing a JSON object into arrays containing keys and values within an Angular framework

I have a code snippet that involves receiving a JSON object of type Tenant from an API. I need to separate this object into keys and values within my function called tenantParser(). However, when I try to log displayedValues and displayedKeys, both show ...

What kind of function possesses additional attributes or characteristics?

I am finding it difficult to define the type for the function foo as demonstrated below: function foo() { do something } foo.boo = () => { do something else } foo("hello"); foo.boo("hello"); This JavaScript code is functioning corr ...

What other options exist besides RxJS operators?

Imagine a scenario like this: submit(): void { this.loading = true; dataLength?: number = untracked(this.dataService.data)?.length; this.dataService.addData(this.dataForm.value); effect( () => { if (this.dataLength !== thi ...

Utilizing Sequelize's Where clause with the flexibility of optional parameters

Can you guide me on writing Sequelize queries with optional parameters? Consider the below query example: const result : SomeModel[] = await SomeModel.findAll( {where: { id: givenId, ...

How to retrieve the displayed text of a selected option in an Angular 7 reactive form dropdown control instead of the option value

Is there a way to retrieve the displayed text of the selected value in a drop-down list instead of just the value when using reactive forms? This is my current script: <form [formGroup]="formGroup" formArrayName="test"> <ng-container matColu ...

Angular 4 - Enabling one checkbox guarantees activation for all

Can someone help me troubleshoot this issue? I'm trying to create an array of strings based on a checkbox form, but when I check one box, they all get checked. How can I fix this so that only the selected checkboxes are added to the array (MenteeLevel ...

Issue with Bootstrap Angular dropdown menu malfunctioning within ChildRoute

Recently, I have been working on integrating admin bootstrap html with Angular. As part of this integration, I added CSS and JS files in angular.json as shown below: "styles": [ "src/styles.css", "src/assets/goo ...

What could be causing the "Error: InvalidPipeArgument" to appear in my Angular code?

Currently, I am tackling a challenge within my Angular project that involves the following situation: Essentially, my HomeComponent view code looks like this: <div class="courses-panel"> <h3>All Courses</h3> <mat-t ...