Search code examples
reactjsag-gridag-grid-react

Conditional styling on row for dynamic cell value


Conditional row styling on ag grid where I want to do rowstyle on user choice of cell value

gridoptions.getRowStyle = function(params) {
  if (params.node.data === 'cell value typed by user in external/custom component i.e outside grid') {
    return { 'background': value selected by user in cutom componet outside grid };
  }
}

Solution

  • @sandeep's answer works perfectly. I just want to chime in another way to solve the problem which is to use context. context is just another javascript object which contains any information that you want to share within AgGrid. The data will be accessible in most AgGrid callbacks for example cell renderers, editors's render callback and in your case getRowStyle callback

    const sickDays = // data from external component
    const color = // data from external component
    
    <AgGridReact
      getRowStyle={(params) => {
        const { styles, data } = params.context;
    
        if (params.node.data["sickDays"] === data.sickDays) {
          return { backgroundColor: styles.color };
        }
        return null;
      }}
      context={{
        data: { sickDays },
        styles: { color }
      }}
    />
    

    Live Demo

    Edit AgGrid Context