Search code examples
ag-gridag-grid-vue

How to add dynamic row class in ag-Grid table


I am using ag-grid.com, does anyone know how to add dynamic row class name in the same table? So that I can set different background color base on it.

Thanks in advance!

enter image description here


Solution

  • As found in documentation https://www.ag-grid.com/javascript-grid-row-styles/:

    var gridOptions = {
        rowData: rowData,
        columnDefs: columnDefs,
        rowClassRules: {
            'your-class': function(params) {
                return your_condition;
            }
        }
    };
    

    and in vuejs it might look like:

    this.rowClassRules: {
        'your-class': params => {
              return your_condition;
        }
    }