How to customize Cells Style in Ag Grid

Posted By : Gaurav Arora | 31-Dec-2017

Hi Guys, as you all are aware of the AG Grid, one of the most popular Javascript's data grid, because of its ease of access and also for its compatibility with the most of the JS Frameworks.

In this blog, we will customize the styles in ag grid cells.

Cells customisation can be done in three different types via column definitions.

Cell Style
Cell Class
Cell Class Rules
Cell Style: This option simply applies css in the cells as we normally do. It can be an object of css style or in the form of the function returning an object of css style.

            <script>
            let columnDefs = {
                headerName: 'Col 1',
                field: 'date',
                cellStyle: { color: 'blue', 'font-size': '16px' }
            }
            <script>

This will apply the same style to that cell in each row.

Now we will use it in the form of function.

            <script>
            let columnDefs = {
                headerName: 'Col 1',
                field: 'date',
                cellStyle: function (params) {
                    if (params.value == 'Date') {
                        return { color: 'blue', 'font-size': '16px' };
                    } else {
                        return { color: 'red', 'font-size': '15px' };;
                    }
                }
            }            
            <script>

The above function will make the color of cell blue which contains the text 'Date' and else style will apply to the rest of the columns.

Cell Class : This option helps up in adding a class to the particular cell.

            <script>
            let columnDefs = {
                headerName: 'Col 1',
                field: 'date',
                cellClass : 'col-1',
            //cell Class: ['col-1', 'col-2'] apply multiple classes.
            }
            <script>

Cell Class Rules : In this option rules are provided as js map where key are class names and value are expression and if that value is true, then the class applies to that cell.

            <script>
            let columnDefs = {
                headerName: 'Col 1',
                field: 'date',
                cellClassRules: {
                    'class-1': 'condition',
                    'class-2': 'condition',
                }
            }            
            <script>

In this way we can customize cells is ag grid.