Can we organize the inner array objects in angular ag-grid using grouping?

Is there a method to organize the array of objects within the table similar to the provided screenshot below?

  • Attempted to utilize angular ag grid grouping-custom-group-columns, however, it only functions with string arrays and not object arrays.

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

**Data : **

{
    "id": 1,
    "unit":"01111", 
    "coid":"03111", 
    "facilityName":"abc company", 
    "market":"Charleston", 
    "mcMarket":"Carolina", 
    "production":"02/01/23", 
    "inactive":"5/01/23",
    "cdm": [{
      "id": 1,
      "cdmDate":"10/01/23", 
      "cdmPct":"8.00", 
      "exclusions":"250, 252"
    }] 
  }

Answer №1

Are you searching for information on how to implement row spanning in ag-Grid?

Learn more about Row Spanning here

In Javascript, you have the ability to customize cell height to span multiple rows in ag-Grid. This functionality is similar to 'cell merging' in Excel or 'row spanning' in HTML tables.

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

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 a ...

The Shell Application is not refreshing React HtmlElement Micro Front end

I am currently facing an issue when trying to inject the following React MFE into another Angular shell application. The MFE loads successfully the first time, but if it is hidden or removed from the DOM and then reloaded, it fails to load. Could you plea ...

Pass the input value directly to typescript without the need for a send button

I am looking to capture user input from a regular text box: <form> <input type="text" oninput="sendInput()" /> </form> My goal is to send the user's typed input directly to a typescript file without the need for a submit button ...

Validating a single field name with various DTO types based on conditions in a NestJS application

There is a field named postData in EmailTypeDto, but it has different types based on conditions. It may be confusing to explain in words, but the code makes it clear. export class EmailTypeDto { @IsEnum(EmailType) public type: EmailType; @ValidateIf ...

What steps can I take to prevent encountering a Typescript Error (TS2345) within the StatePropertyAccessor of the Microsoft Bot Framework while setting a property?

During the process of constructing a bot in Typescript, I encountered TS2345 error with Typescript version 3.7.2. This error is causing issues when attempting to create properties dynamically, even if they are undefined, or referencing them in the statePro ...

Duplicate the ng-template using ng-content as the body (make a duplicate of ng-content)

I have been working on creating a feature that allows users to add custom columns to a PrimeNg table. The main reason for developing this feature is to provide users with a default table that already has numerous configuration options pre-set. However, I ...

Is it possible for Angular components to retrieve information on the current route and parameters?

I am struggling to understand why it's so difficult... why we are not supposed to care about the route from outside the routed component.... HOWEVER: I am attempting to develop a service so that my header (and any other component) can have access to ...

Tips for interacting with the DOM in an Angular 4 application

I am trying to call the addItems method, but I keep getting an error: Uncaught TypeError: this.addItems is not a function Currently, I am using Angular 4 along with jQuery and the fullpage.js library. page-content.component.ts import { Component, OnI ...

update a property of a live object using an API request

Below is a sample of the service function I am working with: getByIdWithCategory(id: number): Observable<Product> { const category = new Category(); category.name = 'sample category'; return this.httpClient.get<Product> ...

VS Code couldn't locate a definition for the function 'myMethod'

For some reason, I am unable to find a definition for 'myMethod' in VS Code. In my angular projects, after importing one project into VS Code, I can easily navigate to definitions using the 'F12' key. However, when I import another pro ...

Guide to routing within the same component in Angular?

In the scenario where I have multiple lists of users with IDs such as (1, 2, 3, 4, 5...), the desired functionality is that upon clicking a button, the details for each respective user should be displayed. For example, clicking on the first user's det ...

Touch gestures using Hammer.js including tapping and swiping downwards

Is there a way to use HammerJS in Angular Material to implement drag-down functionality that triggers an event? I want the dragdown event, as shown in the image below on the gray bar just above the Facebook button. How can I achieve this? https://i.sstat ...

RC6 - What is the significance of encountering an 'Unexpected token <' error message?

After updating to RC.6, I am encountering a series of errors related to third-party components. Specifically, the error message displayed is: SyntaxError: Unexpected token <. This issue has arisen with ng2-bootstrap, ng2-select, and angular2-jwt. Howev ...

What could be causing my if statement to fail even though the condition is met?

I'm attempting to generate dynamic fields based on my chosen attributes. I have two array objects called addAttributes and fakeAttributes. The fakeAttributes contain the details of the selected attributes. I have a dropdown select component that displ ...

Angular deletes any leading whitespace during the rendering process

While working on a project, I encountered an issue with my Angular component. It's supposed to display a string from its input on the HTML page, but I noticed that leading whitespace is being stripped out. <span>{{value}}</span> The value ...

What purposes do the different files within an Angular bundle serve during AoT compilation?

After running the command ng build --prod --aot in my Angular 4 project, I found the following files in my dist folder. inline.6405cab307cfc3c6a636.bundle.js : 2 KB main.a799c9fd4322567743dc.bundle.js : 35 KB polyfills.b72d4efc376613f94934.bu ...

In the world of three js, objects vanish from view as the camera shifts

I am attempting to display a d3 force graph in three.js using standard Line and BoxGeometry with a photo texture applied. When the force graph is updated, I call the draw function which is triggered by: controls.addEventListener('change', () =&g ...

The optimization efforts on several components ended up having a negative impact on the overall performance

I've been dedicated to optimizing an online game app recently. This React app has a large code base and is experiencing some major lag issues, especially on the mobile version. Throughout this process, I've come across various challenges includi ...

Using PrimeNG's DataTable component, you can easily modify the class or style of a

Is it possible to dynamically add a class to each individual cell in a table based on the data values? <p-dataTable [value]="invoices" tableStyleClass="table-invoices"> <p-column field="status" header="Status" styleClass="mini status"> ...

Adding TypeScript to your Vue 3 and Vite project: A step-by-step guide

After setting up my project by installing Vue and Vite using the create-vite-app module, I decided to update all the packages generated by 'init vite-app' to the latest RC versions for both Vue and Vite. Now, I am interested in using TypeScript ...