A step-by-step guide on dynamically binding an array to a column in an ag

I am currently working with the ag-grid component and I need to bind a single column in a vertical format. Let's say I have an array ["0.1", "0.4", "cn", "abc"] that I want to display in the ag-grid component as shown below, without using any rowData.

    0.1
---------------------------------
    0.4
---------------------------------
    cn
---------------------------------
    abc
--------------------------------

Is there a way to bind the above array in a vertical format using ag-grid, or is there another solution that might work better? Any assistance would be greatly appreciated. Thank you in advance.

Here is a snippet from my HTML file:

<ag-grid-angular 
    style="width: 500px; height: 500px;" 
    class="ag-theme-balham"
    [rowData]="rowData" 
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>
angulartypescriptag-grid

Answer №1

Here is a suggestion for you to try:

export class MyCustomGridComponent {
    public gridOptions: GridOptions;
    public dataList =  ["0.1", "0.4", "cn", "abc"] ;

    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
            {
                headerName: "",
                field: "value",
                width: 100
            }
        ];
        this.gridOptions.rowData = 
        this.dataList.map(function(item) {
  return {"value":item};
})
}
}

Include the following code snippet in your html file:

<div style="width: 100px;">
    <ag-grid-angular #agGrid style="width: 100%; height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

Click here to see a demo

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

Retrieve data from Ionic storage

Need help with Ionic storage value retrieval. Why is GET2 executing before storage.get? My brain needs a tune-up, please assist. public storageGet(key: string){ var uid = 0; this.storage.get(key).then((val) => { console.log('GET1: ' + key + ...

angularjstypescriptionic-frameworkionic4ionic5

Why does React / NextJS throw a "Cannot read properties of null" error?

In my NextJS application, I am using useState and useEffect to conditionally render a set of data tables: const [board,setBoard] = useState("AllTime"); const [AllTimeLeaderboardVisible, setAllTimeLeaderboardVisible] = useState(false); const [TrendingCreat ...

javascriptreactjstypescriptnext.js

How to verify user authorization in Angular and PHP

After setting up authentication with Angular and PHP, I noticed that when the page is reloaded, users are required to re-enter their login credentials. This happens because upon reloading, Angular's "IsLoggedIn" variable gets reset to false. Is there ...

phpangular

Tips for creating a coverage report using a gulp task in Angular 4

I've experimented with numerous plugins for setting up gulp tasks to create coverage reports in Angular 4, but none of them seem to be effective. The issue lies in the fact that most documentation is aimed at javascript files, whereas I am dealing wit ...

angularunit-testinggulpcode-coveragegulp-task

I've been working on setting up a navbar in React/typescript that links to various routes, but I've hit a snag - every time I try to create a link

import React from 'react' import { Link } from 'react-router-dom' export default function NavBar() { return ( <div className='NavContainer'> <link to='/home'>Home</link> <l ...

reactjstypescriptreact-dom-server

Looking to personalize the MUI - datatable's toolbar and place the pagination at the top?

I successfully managed to hide the toolbar icon, but I am struggling with positioning pagination from bottom to top. Additionally, I am attempting to add two buttons (reset and apply) in the view-Column toolbar without any success in customizing the class. ...

javascriptreactjstypescriptuser-interfacematerial-ui

How to Exclude Whitespaces from Strings in Angular 6 DataTables

I am facing a simple issue where I need to display strings with spaces like "st ri ng" in rows within a material data table. However, the spaces are being trimmed and I cannot figure out how to keep them intact. Here is a demo on stackblitz: https: ...

angularangular-material

Warning: Potential spacing issues when dynamically adjusting Material UI Grid using Typescript

When working with Typescript, I encountered an error related to spacing values: TS2322: Type 'number' is not assignable to type 'boolean | 7 | 2 | 10 | 1 | 3 | 4 | 5 | 6 | 8 | "auto" | 9 | 11 | 12'. No lint errors found Version: typesc ...

typescriptmaterial-ui

Children components are not re-rendered by React

I created a basic task manager, but I'm encountering issues when trying to manage all the data from a single point within the TaskManager component. Essentially, I have a TaskManager component that acts as the container for all the data. Within this ...

reactjstypescript

Utilizing NPM Workspace Project in conjunction with Vite to eliminate the necessity of the dist folder during the Vite build process

I am currently working on a project that involves a module using full path exports instead of index files. This project is divided into 2 NPM workspaces: one called core and the other called examples. The challenge I am facing is avoiding long import pat ...

typescriptnpmimportvite

Creating a custom function to extract data from an object and ensure the returned values are of the correct data types

Is there a way to ensure that the output of my function is typed to match the value it pulls out based on the input string? const config = { one: 'one-string', two: 'two-string', three: true, four: { five: 'five-string& ...

typescript

Error NG0304: The element 'mat-select' is not recognized in the template of the 'LoginPage' component

After creating a basic app, I decided to incorporate Angular Material into my project. The app in question is an Ionic 6 / Angular 14 app, however, I encountered an error while attempting to implement mat-select: https://i.sstatic.net/Quc53.png To addres ...

angularionic-frameworkangular-materialangular14

Implementing real-time database updates in FullCalendar Angular when events are dragged and resized

I have integrated fullcalendar into my Angular project and successfully retrieved data from my API to display events: @Component({ selector: 'app-installboard', templateUrl: './installboard.component.html', styleUrls: ['./in ...

angularcallbackscopefullcalendar

Steering templateUrl Value Modification on the Go in Angular 2

Looking for a way to dynamically change the template URL at runtime in order to switch between different views rendered in my component. Is there a solution available for this? For example, I want my component to have both grid and list view options, bu ...

angularangular2-templateangular-routing

I am curious about the significance of the "=>" symbol within the Ionic framework

I utilized the documentation provided on the Ionic website to incorporate Firebase into my mobile application. this.firebase.getToken() .then(token => console.log(`The token is ${token}`)) // store the token server-side and utilize it for sending not ...

javascriptandroidangulartypescriptionic-framework

Encountering a NullInjectorError while running unit tests in Angular 14 specifically related to a missing provider for Untyped

After transitioning my project from Angular 13 to Angular 14, I encountered this error message: Error: NullInjectorError: R3InjectorError(DynamicTestModule)[UntypedFormBuilder -> UntypedFormBuilder]: NullInjectorError: No provider for UntypedFor ...

angularangular14

Is it possible to implement cross-field validation with Angular 2 using model-based addErrors?

Currently, I am working on implementing cross-field validation for two fields within a form using a reactive/model based approach. However, I am facing an issue regarding how to correctly add an error to the existing Error List of a form control. Form: ...

formsvalidationangularform-control

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

My goal is to incorporate particles.js into the home screen component of my project. I have successfully installed "npm install ng-particles" and "npm install tsparticles." However, even after serving and restarting the application, I am unable to resolve ...

htmlcssangulartypescriptparticle.js

Error: The code encounters a SyntaxError due to an unexpected token '?' in iOS 14

Currently in the process of developing a Headless Shopify project using this starter: https://github.com/vercel/commerce. While testing the demo environment, I encountered some bugs that seem to be specific to iOS 14 or newer. The primary issue stems from ...

reactjstypescriptnext.js

The Chart.js graph fails to appear when placed within an ngIf directive

I have encountered an issue with my simple scatter line chart created using Chart.js within a bootstrap panel. It works perfectly fine until I place it inside an ngIf div. Has anyone faced this problem before? Is there a solution to make the chart display ...

htmlangularjstwitter-bootstrapangularchart.js