{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/row-styles/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row customisation can be achieved in the following ways:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Row Style:"}]},{"type":"text","value":" Providing a CSS style for the rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Row Class:"}]},{"type":"text","value":" Providing a CSS class for the rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Row Class Rules:"}]},{"type":"text","value":" Providing rules for applying CSS classes."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Each of these approaches are presented in the following sections."}]},{"type":"element","tagName":"h2","properties":{"id":"row-style","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#row-style","ariaLabel":"row style permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Row Style"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can add CSS styles to each row in the following ways:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"styling","names":"[\"rowStyle\", \"getRowStyle\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // set background colour on every row, this is probably bad, should be using CSS classes\n    rowStyle: { background: 'black' },\n    // set background colour on even rows again, this looks bad, should be using CSS classes\n    getRowStyle: params => {\n        if (params.node.rowIndex % 2 === 0) {\n            return { background: 'red' };\n        }\n    }\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"row-class","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#row-class","ariaLabel":"row class permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Row Class"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can add CSS classes to each row in the following ways:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"styling","names":"[\"rowClass\", \"getRowClass\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // all rows assigned CSS class 'my-green-class'\n    rowClass: 'my-green-class',\n    // all even rows assigned 'my-shaded-effect'\n    getRowClass: params => {\n        if (params.node.rowIndex % 2 === 0) {\n            return 'my-shaded-effect';\n        }\n    },\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"row-class-rules","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#row-class-rules","ariaLabel":"row class rules permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Row Class Rules"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can define rules which can be applied to include certain CSS classes via the grid option "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowClassRules"}]},{"type":"text","value":". These rules are provided as a JavaScript map where the keys are class names and the values are expressions that if evaluated to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", the class gets used. The expression can either be a JavaScript function, or a string which is treated as a shorthand for a function by the grid."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"styling","names":"[\"rowClassRules\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following snippet shows "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowClassRules"}]},{"type":"text","value":" that use functions and the value from the year column:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\n|const gridOptions = {\n|    rowClassRules: {\n|        // apply green to 2008\n|        'rag-green-outer': function(params) { return params.data.year === 2008; },\n|\n|        // apply amber 2004\n|        'rag-amber-outer': function(params) { return params.data.year === 2004; },\n|\n|        // apply red to 2000\n|        'rag-red-outer': function(params) { return params.data.year === 2000; }\n|    }\n|}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"All rowStyle, rowClass and rowClassRules functions take a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"RowClassParams"}]},{"type":"text","value":" params object."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"interface-documentation","properties":{"interfacename":"RowClassParams"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As an alternative, you can also provide shorthands of the functions using an expression.\nAn expression is evaluated by the grid by executing the string as if it were a Javascript expression. The expression has the following attributes available to it (mapping the the attributes of the equivalent\nparams object):"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ctx"}]},{"type":"text","value":": maps context"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"node"}]},{"type":"text","value":": maps node"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"data"}]},{"type":"text","value":": maps data"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowIndex"}]},{"type":"text","value":": maps rowIndex"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api"}]},{"type":"text","value":": maps the grid api"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following snippet shows "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowClassRules"}]},{"type":"text","value":" applying classes to rows using expressions on an age column value:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    rowClassRules: {\n        'rag-green': 'data.age < 20',\n        'rag-amber': 'data.age >= 20 && data.age < 25',\n        'rag-red': 'data.age >= 25',\n    }\n}\n"}]},{"type":"element","tagName":"h2","properties":{"id":"refresh-of-styles","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#refresh-of-styles","ariaLabel":"refresh of styles permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Refresh of Styles"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you refresh a row, or a cell is updated due to editing, the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowStyle"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowClass"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowClassRules"}]},{"type":"text","value":" are all applied again. This has the following effect:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"rowStyle"}]},{"type":"text","value":": All new styles are applied. If a new style is the same as an old style, the new style overwrites the old style."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"rowClass"}]},{"type":"text","value":": All new classes are applied. Old classes are not removed so be aware that classes will accumulate. If you want to remove old classes, then use rowClassRules."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"rowClassRules"}]},{"type":"text","value":": Rules that return true will have the class applied the second time. Rules that return false will have the class removed second time."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"example-row-class-rules","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-row-class-rules","ariaLabel":"example row class rules permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Example Row Class Rules"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowClassRules"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowClassRules"}]},{"type":"text","value":" are used to apply the class "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sick-days-warning"}]},{"type":"text","value":" when the number of sick days > 5 and <= 7, and the class "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sick-days-breach"}]},{"type":"text","value":" is applied when the number of sick days >= 8."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The grid re-evaluates the rowClassRules when the data is changed. The example\nshows changing the data in the three different ways: "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setDataValue"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setData"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.applyTransaction"}]},{"type":"text","value":". See "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/data-update/"},"children":[{"type":"text","value":"Updating Data"}]},{"type":"text","value":" for details on these update functions."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Class Rules","name":"row-class-rules","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"highlighting-rows-and-columns","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#highlighting-rows-and-columns","ariaLabel":"highlighting rows and columns permalink","className":["anchor","before"]},"children":[{"type":"element","tagName":"svg","properties":{"ariaHidden":"true","focusable":"false","dataPrefix":"fas","dataIcon":"link","className":["svg-inline--fa","fa-link"],"role":"img","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 512 512"},"children":[{"type":"element","tagName":"path","properties":{"fill":"currentColor","d":"M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"},"children":[]}]}]},{"type":"text","value":"Highlighting Rows and Columns"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid can highlight both Rows and Columns as the mouse hovers over them. "}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Highlighting Rows is on by default. To turn it off, set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressRowHoverHighlight=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Highlighting Columns is off by default. To turn it on, set the grid property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnHoverHighlight=true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // turns OFF row hover, it's on by default\n    suppressRowHoverHighlight: true,\n    // turns ON column hover, it's off by default\n    columnHoverHighlight: true\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this example Rows and Columns are highlighted."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note if you hover over a header group, all columns in the group will be highlighted."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Highlight Rows And Columns","name":"highlight-rows-and-columns","type":"generated"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this example both Rows and Columns are not highlighted by setting."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"No Highlighting Rows And Columns","name":"highlight-nothing","type":"generated"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Rows highlight by default as this is a common requirement. Column highlighting is less common and as such needs to be opted it."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row Highlighting works by the grid adding the CSS class "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-row-hover"}]},{"type":"text","value":" to the row's getting hovered. The grid cannot depend on using CSS "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":":hover"}]},{"type":"text","value":" selector as this will not highlight the entire row if Columns are pinned."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Column Highlighting works by the grid adding the CSS class "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-column-hover"}]},{"type":"text","value":"\nto all Cells to be highlighted."}]}]},"frontmatter":{"title":"Row Styles","version":null,"enterprise":null,"description":null},"headings":[{"id":"row-style","depth":2,"value":"Row Style"},{"id":"row-class","depth":2,"value":"Row Class"},{"id":"row-class-rules","depth":2,"value":"Row Class Rules"},{"id":"refresh-of-styles","depth":2,"value":"Refresh of Styles"},{"id":"example-row-class-rules","depth":2,"value":"Example Row Class Rules"},{"id":"highlighting-rows-and-columns","depth":2,"value":"Highlighting Rows and Columns"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"javascript","srcPath":"/row-styles","pageName":"row-styles"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}