Apply different header styling to different ag-grid instances in one app

Question

I am using ag-grid in my application and have two grids on the same page. I would like to make the text label for the header in one grid vertical and the other grid horizontal.

Here's a doc showing how to make header vertical for one grid. https://www.ag-grid.com/javascript-grid-column-header/#textOrientation

.ag-cell-label-container {
  /*Necessary to allow for text to grow vertically*/
  height: 100%;
}

.ag-header-cell-label {
  /*Necessary to allow for text to grow vertically*/
  height: 100%;
  padding: 0 !important;
}

.ag-header-cell-label .ag-header-cell-text {
  /*Force the width corresponding at how much width
    we need once the text is laid out vertically*/
  width: 55px;
  writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  line-height: 2em;
  margin-top: 60px;
}

.ag-header-cell-label {
  font-size: 10px;
  height: 90px;
  padding-top: 36px;
  margin-left: 0px;
  color: #1b6d85;
  font-weight: bold;
}

.ag-header-cell-label .ag-header-cell-text {
  /*There is empty space left at the top from the menu and sort
    icons not used*/
  margin-top: 25px;
}

It added specific styles into styles.scss file. But this will apply globally.

On the other hand, it will not make any changes to text orientation if I add those css into app.component.scss file.

Is there a way to apply css to only one ag grid instance?

AdamKniec AdamKniec · Accepted Answer · 2020-05-08T07:07:17

I had a similar case. I wrapped each of the grids into different divs with different class attribute. Once you style the grid by the class of the wrapping div, Your styles should be encapsulated. Have you tried that ? :)

Apply different header styling to different ag-grid instances in one app

1 Answers