Grid Styling - Overwrite Style of Ag-Grid

Grid Styling - Overwrite style of ag-grid

You should use ViewEncapsulation

Just add to your component encapsulation: ViewEncapsulation.None:

import { Component, ViewEncapsulation } from "@angular/core";

@Component({
    selector: '....',
    templateUrl: '....',
    styles: [`
        .ag-theme-fresh .ag-row-selected {
            background-color: #1428df !important;
        }
    `],
    encapsulation: ViewEncapsulation.None
})

Override React AgGrid styling settings using createStyles and withStyles

I ran into this same situation, and came up with the following solution. Although not necessarily ideal, it allows you to continue with the desired convention.

styles.js
---------
const styles = (theme: Theme) =>
  createStyles({
    root: {
      position: 'relative',
      height: 'calc(100vh - 128px)',
    },

    //Apply changes to agGrid material HeaderRoot
    myClassAppliedToGrid: {
      '& .ag-header[ref="headerRoot"]':{
        writingMode: 'vertical-lr',
        marginTop: '100px',
      }
    }

   //OR        

   //Apply Changes to agGrid material header row
    myClassAppliedToGrid: {
      '& .ag-header-row':{
        writingMode: 'vertical-lr',
        marginTop: '100px',
      }
    }
  })

export default styles

The key idea is using the & SASS syntax to "reach into" agGrid and make more specific CSS classes so you can override them. (see https://css-tricks.com/the-sass-ampersand/ for more info)

The key pieces of info are:

.parent {
  & .child {}
}

turns into

.parent .child {}

and

.some-class {
  &.another-class {}
}

turns into

.some-class.another-class { }

Using this sytanx, you should be able to create CSS classes that you can apply to your grid, columns, rows, etc that will properly override the material ag-grid theme.

Here is another example, but this class gets applied to a cell using agGrid cellStyleRules when a row is dragged over it, rather than applying the class to the grid as a whole. This way it only effects cells that have a row drag occuring over them:

    rowDraggedOverCellsTopEdge: {
        '&.ag-cell': {
            borderTopColor: theme.palette.gray[50],
            borderTopWidth: 8,
            backgroundColor: fade(theme.palette.gray[50], 0.3)
        }
   },

Finally, one thing I did not do but would reccommend investigating is looking into agGrid's theme overriding, especially if you are on version 23+

https://www.ag-grid.com/javascript-grid-themes-provided/#customising-themes

It might be a good idea to get your base overrides to the theme done this way if you expect a consistent look and feel of your grids throughout the application.

Cheers!

How can I change the styling of a column based on whether the column is pinned to the left?

You can achieve the same by just with the CSS.

Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.

.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
    background-color: yellow;
}

Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.

So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.

How to change the styles Dynamically in aggrid with an external button click?

On click of the button, you could set a variable in your component class to true. Something like :

xyz.component.html
<button (click) = "onButtonClick()"> My button </button>

xyz.component.ts

public buttonClicked = false;

onButtonClick()
{
   this.buttonClicked = true;
}

Then in your column defs, you can do something like :

cellClassRules: {'makeRed':this.buttonClicked}

where makeRed is a CSS class that defines your custom properties.

Note: If you wish to do this for a button toggled behavior, then you'd need to do something like :

onButtonClick()
{
   this.buttonClicked = this.buttonClicked ? !this.buttonClicked : this.buttonClicked
}


cellClassRules: {
'makeRed':this.buttonClicked,
'makeGreen': !this.buttonClicked,
}

How to change Ag Grid border color?

Use css !important to override theme default styles.

See bellow:

.ag-root-wrapper {
    border: solid 1px;
    border-color: var(--ag-border-color, #babfc7) !important;
}

import './Statistics.css'
import { AgGridColumn, AgGridReact } from 'ag-grid-react';

const Statistics = () => {
    return (
+   <div className='root-statistics'>
    <div className='content'>
     <div className='content-left'>
      <div className="ag-theme-alpine">
        <AgGridReact
           rowData={data}
            style={{borderColor: 'red'}}
            rowSelection="single"
            filter={false}
        >
         <AgGridColumn
          headerName="Date"
          field="date"
          resizable={true}
          filter={false}
          width={130}
          flex={1}
          sort={'asc'}
          cellStyle={{fontSize: '1vw'}}
         />
       </AgGridReact>
      </div>
     </div> 
    </div>
+   </div>
     )}

export default Content;

.root-statistics .ag-root-wrapper {
    border: solid 0px !important;
    border-color: var(--ag-border-color, white) !important;
}

import justpy as jp
import pandas as pd

#list with dict for the data of two rows
gridAnalysisRowContent = [
  {'C': 0.0206, 'Si': 0.003, 'Mn': 0.079, 'P': 0.007, 'S': 0.005, 'Al': 0.0, 'N2': 0.0}, 
  {'C': 0.053, 'Si': 0.011, 'Mn': 0.851, 'P': 0.009, 'S': 0.0025, 'Al': 0.032, 'N2': 0.0}
]

#turn list into pandas dataframe
gridAnalysisRowContentDF = pd.json_normalize(gridAnalysisRowContent)

def grid_test():
  wp = jp.WebPage() #create wp
  gridAnalysis = jp.AgGrid(a=wp)  #create grid

  #turn list into pandas dataframe
  gridAnalysisRowContentDF = pd.json_normalize(gridAnalysisRowContent)
              
  #load dataframe data into the grid
  gridAnalysis.load_pandas_frame(gridAnalysisRowContentDF)

  #iterate through all columnDefs
  for column_defs in gridAnalysis.options['columnDefs']: 
    maxValue = 0.05 #set max value
    minValue = 0.02 #set min value
    #define the cellClass Rules (only works with background color as tailwindcss class)
    column_defs['cellClassRules'] = {
      'bg-red-300': 'x > {max}'.format(max = maxValue), #set background color to red if cell value is greater than maxValue
      'bg-blue-300': 'x < {min}'.format(min = minValue) #set background color to blue if cell value is smaller than minValue
    }
  return wp

jp.justpy(grid_test)