Angular Ag-Grid not displaying correctly

P

7

13

I'm trying to use Angular Ag-Grid in my Web Application.

I've followed these tutorials

Problem / Issue I Follwed every thing exactly. Even data is being loaded in grid but View is not very appreciable. Here what I'm getting (not alignment, no coloring)

What I tried I search extensively over Google and Stack Overflow. Some Answers recommend that CSS is not loading Properly ( which is solid argument) but I double check my import statements on Component.css and Also tried adding .css reference in index.html. The .css files which I refer are exists and reference was also good.

What I Expect

Codes

appComponent.html

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

appComponent.ts

import { Component } from '@angular/core';
import { Grid } from 'ag-grid/main';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'Grid1';
  columnDefs = [
    { headerName: "Make", field: "make" },
    { headerName: "Model", field: "model" },
    { headerName: "Price", field: "price" },
  ];

  rowData = [
    { make: "Toyota", model: "m1", price: 35351 },
    { make: "Ford", model: "m2", price: 6546 },
    { make: "M3", model: "m3", price: 646 },
    { make: "M765", model: "m4", price: 56486 }
  ]
}

app.component.scss

@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-balham.css";

I Also tried other tutorial which says this app.component.scss

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

Phil answered 6/9, 2019 at 9:16 Comment(0)

C

31

Ag Grid styles should be imported in styles.scss not in app.component.scss

So try to import in styles.scss and check:

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

Crashland answered 6/9, 2019 at 12:33 Comment(3)

How come this is not documented? Thanks a lot – Silassilastic 22/6, 2020 at 13:34

@Silassilastic ag-grid documentation is not as good as angular – Polyvalent 7/7, 2021 at 12:26

You can use the minified editions too: ag-grid.min.css and ag-theme-batham.min.css – Gregg 16/8, 2023 at 20:33

D

0

I encountered quite a different but similar situation in that after configuring and integrating agGrid, the features work as expected but the display doesn't render really well. For instance, the sorting and filter icon doesn't render, checkbox not displaying when enabled.

I realized it was because I selected a different theme in the HTML from the one imported in the global style.css/scss.

Daff answered 30/1, 2021 at 19:54 Comment(0)

T

0

first you must be add related modules in app.module.ts
after that you can add directly CSS sources in your html file
like this:

app.component.html

<head>
  <script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
  <link
    rel="stylesheet"
    href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"
  />
  <link
    rel="stylesheet"
    href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"
  />
</head>

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

Tacita answered 2/10, 2021 at 10:15 Comment(0)

W

0

Post it here since this is the first result in Google search.

Had the same issue: React + Storybook are not displaying correctly ag-grid with dark/light custom themes.

Putting default @import "~ag-grid-community/dist/styles/ag-grid"; into common style.css fixed the issue.

Wuhsien answered 6/4, 2022 at 17:56 Comment(0)

M

0

I encountered the same thing in react-ag-grid, solved by importing the styles.

import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

Mesopotamia answered 7/9, 2022 at 5:59 Comment(0)

D

0

At the root of your project folder, import the grid styles into your styles.scss file, like this:

@import '~ag-grid-community/styles/ag-grid.css';
@import '~ag-grid-community/styles/ag-theme-alpine.css';

or with relative path

@import '../node_modules/ag-grid-community/styles/ag-grid.css';
@import '../node_modules/ag-grid-community/styles/ag-theme-alpine.css';

or with CDN

@import url('https://unpkg.com/[email protected]/styles/ag-grid.css');
@import url('https://unpkg.com/[email protected]/styles/ag-theme-alpine.css');

When integrated, don't forget to re-run the server, npm run ng serve, the table grid should render correctly with style as expected.

Daff answered 5/10, 2022 at 14:47 Comment(0)

S

0

in my case the main problem is, the CDN files contains more styles than the ag-grid installed by npm , my solution was used the CND from index.html in my angular 12 project.

Simsar answered 27/10, 2022 at 8:15 Comment(1)

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Ethelda 1/11, 2022 at 12:1

app.component.html

Recommended topics

Hot tags