Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to provide a background color for an entire row in ag grid based on a certain value in a column?

Tags:

ag-grid

I need to provide a background color for an entire row in ag grid based on a condition in a column. I found no such examples where entire row is colored based on a certain value in a column..

like image 1000
Akshay Avatar asked Dec 10 '15 11:12

Akshay


People also ask

How do you put a background color in a row on Ag grid?

const gridOptions = { // set background colour on every row, this is probably bad, should be using CSS classes rowStyle: { background: 'black' }, // set background colour on even rows again, this looks bad, should be using CSS classes getRowStyle: params => { if (params.

How do you make a row bold on Ag grid?

I believe that you use cellStyle callback of the columnDefs to make the font bold. If you need to do it for the whole row, create a common callback function and use it in cellStyle of all columnDefs . There is no single command to change the style of a row.

How do you get gridOptions on Ag grid?

Access the Grid & Column API You can access the APIs in the following ways: Store them from the gridReady event - they'll be available via the params argument passed into the event. Provide a gridOptions object to the grid pre-creation time. Post-creation the APIs will be available on the gridOptions object.

What is cell rendering?

Cells are numbered in order of rendering, and rendering function takes 10ms to execute, allowing you to see the process of incremental rendering more clearly. Note the cell values do not correspond to row or cell indexes. Notice the following in the example below: The grid remains interactive while cells are rendering.


Video Answer


2 Answers

The previous answer is somewhat outdated (although still correct and working) and now we have some more control over the styling of the grid. You could use getRowStyle(params) for this job, just like this:

gridOptions.getRowStyle(params) {
    if (params.data.myColumnToCheck === myValueToCheck) {
        return {'background-color': 'yellow'}
    }
    return null;
}

Obviously, myColumnToCheck would be the column you're checking your value against (the same name you input in the id/field property of the colDef object), and myValueToCheck would be the value you want said column to have to make the row all yellow.

like image 147
tfrascaroli Avatar answered Oct 31 '22 02:10

tfrascaroli


I hope this helps others. A very common use case in any table or grid including AG Grid is going to be to set the even/odd background color of the whole row of the entire table in a performant way. ALSO, this needs to still work when SORTING.

ALL OF THESE WAYS OF DOING THIS IN AG-GRID ARE WRONG. Even though they WILL work without sort, they will not update properly when you go to use sorting. This is due to something the ag-grid team refers to in this issue https://github.com/ag-grid/ag-grid-react/issues/77 as initialization time properties.

// Initialization problem
getRowClass = (params) => {
    if (params.node.rowIndex % 2 === 0) {
        return this.props.classes.rowEven;
    }
};
<AgGridReact
    getRowClass={this.getRowClass}
>

// Initialization problem
getRowStyle = (params) => {
    if (params.node.rowIndex % 2 === 0) {
        return this.props.classes.rowEven;
    }
};
<AgGridReact
    getRowStyle={this.getRowStyle}
>

// Initialization problem
rowClassRules = {
    rowEven: 'node.rowIndex % 2 === 0',
}
rowClassRules = {
    rowEven: (params) => params.node.rowIndex % 2 === 0,
}
<AgGridReact
    rowClassRules={this.rowClassRules}
>

// Trying to change the key so a rerender happens
// Grid also listens to this so an infinite loop is likely
sortChanged = (data) => {
    this.setState({ sort: Math.random()})
}
<AgGridReact
    key={this.state.sort}
    onSortChanged={this.sortChanged}
>

Basically, most stuff in grid is just read once and not again, probably for performance reasons to save rerenders.

You end up with this problem when sorting when doing any of the above: bunched up evens and odds

THE FOLLOWIUNG IS THE RIGHT WAY TO ACHIEVE EVEN ODD COLORING: The correct way to add even/odd functionality in ag-grid is to apply custom css styles as follows:

You will need to overwrite/use ag variables as mentioned in the docs here:https://www.ag-grid.com/javascript-grid-styling/#customizing-sass-variables

The names of the variables in our case are .ag-grid-even class name, or the .ag-grid-odd class name. You of course only need one if you just want an alternating color to help with visibility. For our purposes we only needed one.

Here is how this process looked in our repo: 1. Make a custom css file that overwrites/uses some of these ag- class variable names. We call it ag-theme-custom.css (I believe it needs to be a css file).

custom theme file example one

custom theme file example 2

Note: We also have sass variables so this file just has a comment that this color I am adding in css is the value for our variable $GREY_100 so you don't need that part

import the file

Example of passing this stuff into the parent wrapper around the component

You now will get the same result but it will still work when sorting. result

like image 34
kmwarter Avatar answered Oct 31 '22 01:10

kmwarter