Skip to content

TypeScript code snippet – How to use getRowStyle to change backgroud color in ag grid?

// set background colour on every row
// this is probably bad, should be using CSS classes
gridOptions.rowStyle = { background: 'black' };

// set background colour on even rows
// again, this looks bad, should be using CSS classes
gridOptions.getRowStyle = function(params) {
    if (params.node.rowIndex % 2 === 0) {
        return { background: 'red' };
    }
}

// set row background colour depending on the debug level
getRowStyle: (params: any) => {
  if (params.node.data !== undefined) { // this check is very important!!!
    const debugLevel = params.node.data.Level; // columnDef - field: 'Level'
    switch (debugLevel) {
      case "INFO":
        return { background: '#85C1E9' };
      case "WARN":
        return { background: '#EB984E' };
      case "ERROR":
        return { background: '#E74C3C' };
      default:
        break;
    }
  }
}
See also  CSS code snippet - How to center a div?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.