Angular Ag-Grid not displaying correctly

Question

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";

score 26 · Accepted Answer · edited Mar 11 '20 at 16:31

26

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";

edited Mar 11 '20 at 16:31

Krishna

6,107
2
40
43

answered Sep 06 '19 at 12:33

Uma

422
4
5

4

How come this is not documented? Thanks a lot – Makky Jun 22 '20 at 13:34
1

@Makky ag-grid documentation is not as good as angular – jeea Jul 07 '21 at 12:26
You can use the minified editions too: `ag-grid.min.css` and `ag-theme-batham.min.css` – slasky Aug 16 '23 at 20:33

John Erbynn · Answer 2 · 2021-01-31T17:07:39.443

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.

edited Jan 31 '21 at 17:07

answered Jan 30 '21 at 19:54

John Erbynn

355
1
4
14

score 0 · Answer 3 · answered Oct 02 '21 at 10:15

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>

score 0 · Answer 4 · answered Apr 06 '22 at 17:56

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.

score 0 · Answer 5 · answered Sep 07 '22 at 05:59

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";

answered Sep 07 '22 at 05:59

Anusatya Choudhary

1
2

score 0 · Answer 6 · answered Oct 05 '22 at 14:47

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/ag-grid-community@28.2.0/styles/ag-grid.css');
@import url('https://unpkg.com/ag-grid-community@28.2.0/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.

score 0 · Answer 7 · answered Oct 27 '22 at 08:15

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.

answered Oct 27 '22 at 08:15

Pedro Victor

1
2

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](/help/how-to-answer). – Community Nov 01 '22 at 12:01

Angular Ag-Grid not displaying correctly

7 Answers7

app.component.html

Linked