13

How do I go about customizing the Ag-Grid themes (eg. ag-theme-material.css) in an existing Angular App?

The documentation they have provided is lacking, as it doesn't explain how to perform these changes/configurations.

Any help would greatly be appreciated.

Andrew Lobban
  • 2,065
  • 2
  • 24
  • 38
  • 1
    did you see this example - https://github.com/ag-grid/ag-grid-customise-theme? You need to change the Saas variables in .scss file and then import this file in your component. – koolhuman Mar 15 '18 at 17:58
  • 1
    @koolhuman I have seen it, but this .scss file, where does this go? Initially, I thought this was the styles.scss file in angular. – Andrew Lobban Mar 15 '18 at 19:59
  • 1
    .scss file would go as an import statement in your component.ts file where you have defined your ag-grid. import './myStyles.scss'; – koolhuman Mar 15 '18 at 20:26
  • Let me get this clear, if I need to override styles in Ag-Grid it can only be done at component level that it is nested in? – Andrew Lobban Mar 15 '18 at 20:34
  • It doesn't work for me and is there clear instructions on how to achieve this? Do you have a sample program with this implemented? – Andrew Lobban Mar 15 '18 at 20:58
  • are you using webpack for compiling? – koolhuman Mar 15 '18 at 21:09
  • Yes webpack, I made a fresh stackblitz. Can you show me what you're talking about please? https://stackblitz.com/github/alobban/Ag-Grid-Sample – Andrew Lobban Mar 16 '18 at 14:28
  • 3
    check out this link - https://stackblitz.com/edit/github-djhzqb?file=src%2Fstyles.scss. I modified your code and imported styles.scss file in your component.ts and everything is working now. – koolhuman Mar 16 '18 at 15:49
  • I thought changing the font-size would change the size of the header text. Do you know which variables affect the header text? **Nevermind** found it! – Andrew Lobban Mar 16 '18 at 16:03
  • Does this solve your problem? – koolhuman Mar 16 '18 at 16:16
  • **It works!** But the setup isn't conventional nor was there this amount detail available anywhere. Thanks @koolhuman – Andrew Lobban Mar 16 '18 at 16:19
  • I will post this as an answer here and you can accept it, so this might help someone having the same question later? – koolhuman Mar 16 '18 at 16:20
  • Yes, there is an amount of tweaking that I need to do to make it work with my Angular app. I have to add the scripts to angular-cli.json file first. – Andrew Lobban Mar 16 '18 at 16:22
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/166980/discussion-between-andrew-lobban-and-koolhuman). – Andrew Lobban Mar 16 '18 at 16:27
  • Agree wholly with their very poor documentation around theme customisation. We use the Enterprise version and expect Enterprise-grade documentation. We have multiple themes using CSS Custom Properties and a few AG Grid parameters cause the build to fail when set the CSS Custom Properties because of the SASS blends they use all over the place. Very frustrating. – Matt W Jul 16 '20 at 12:50

2 Answers2

10

Add ag-grid-overrides.scss file and put the saas variable you want to modify for the ag-grid theme. Full list of sass variables available can be found in this link - https://github.com/ag-grid/ag-grid/tree/master/src/styles. Import ag-grid-overrides.scss in your component.ts file. You can still have your own .css file for each component as shown below in app.component.css file.

app.component.ts

import '../ag-grid-overrides.scss';

app.component.html

<ag-grid-angular class="data-grid ag-theme-fresh" [gridOptions]="gridOptions">
</ag-grid-angular>

ag-grid-overrides.scss

// Customize the look and feel of the grid with Sass variables
// Up-to-date list of variables is available in the source code: https://github.com/ag-grid/ag-grid/blob/latest/src/styles/theme-fresh.scss 
$icons-path: "~ag-grid/src/styles/icons/";

// changes the border color
$border-color: #FF0000;

// Changes the font size
$font-size: 14px;

// Changes the font family
//$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

// Reverts the cell horizontal padding change between ag-fresh and ag-theme-fresh
//$cell-horizontal-padding: 2px;

// changes the icon color
// $icon-color: red;
//$primary-color: green;

@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-fresh.scss';

app.component.css (not required as this is a custom class on ag-grid-angular)

.data-grid {
  width: 500px; height: 300px; margin-bottom: 1rem;
}

angular-cli.json

"styles": [
        "../node_modules/ag-grid/dist/styles/ag-grid.css",
        "../node_modules/ag-grid/dist/styles/ag-theme-fresh.css",
        "styles.scss",
        "ag-grid-overrides.scss"
      ]
Andrew Lobban
  • 2,065
  • 2
  • 24
  • 38
koolhuman
  • 1,581
  • 15
  • 25
  • 2
    Please make sure that you don't waste a ton of time by @importing from the dist directory instead of the src directory like I just did :) – Stubbs Jun 14 '19 at 16:13
  • 1
    This is fine if you want to use pixels. Currently going though a world of pain making my custom vars file use rem. – cfranklin Oct 01 '19 at 13:11
  • How could I do that for a Vanilla JS application? I'm trying to customize a theme, but how can I attach that class on HTML id later? – Bernardo Marques Jun 11 '20 at 22:18
4

In my case, it is used "ag-grid-enterprise": "^23.1.0" and "ag-grid-community": "^23.1.0" and for creating a custom theme for angular2+ application you should import to global style file(scss is in use for my case) several mixins file from ag-grid-community package and it will look like this:

@import '~ag-grid-community/src/styles/ag-grid';
@import '~ag-grid-community/src/styles/ag-theme-base/sass/ag-theme-base';

then you should include base theme with parameters set that you can override for this default theme: 

.ag-theme-base {//should have specific name, since sizes doesn't work with custom name
  @include ag-theme-base(
    (
      foreground-color: black,
      background-color: yellow,
    )// this is parameters set object where you can ovveride ag-grid properties 
  );
}

List of the ag-grid parameters you can find link

Also, you can extract this parameter and apply for other elements(not sure that it is a useful option but ag-grid allows this)

.ag-header-cell {
  background-color: ag-param(foreground-color);
  color: ag-param(background-color);
}

Link to documentation about ag-param function link. Link to documentation regarding theme customization link.

Example of usage in angular:

<ag-grid-angular
  style="width: 100%; height: 400px;"
  class="ag-theme-base"
  ...
>
</ag-grid-angular>
Anton Anikeev
  • 163
  • 1
  • 2
  • 9