{
    "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":"p","properties":{},"children":[{"type":"text","value":"Some row styles may also be overridden with CSS variables. See the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/global-style-customisation-variables/"},"children":[{"type":"text","value":"full variable reference"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h2","properties":{"id":"row-style","style":"position:relative;"},"children":[{"type":"text","value":"Row Style"},{"type":"element","tagName":"a","properties":{"href":"#row-style","ariaLabel":"row style permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Row Class"},{"type":"element","tagName":"a","properties":{"href":"#row-class","ariaLabel":"row class permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Row Class Rules"},{"type":"element","tagName":"a","properties":{"href":"#row-class-rules","ariaLabel":"row class rules permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Refresh of Styles"},{"type":"element","tagName":"a","properties":{"href":"#refresh-of-styles","ariaLabel":"refresh of styles permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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":"text","value":"Example Row Class Rules"},{"type":"element","tagName":"a","properties":{"href":"#example-row-class-rules","ariaLabel":"example row class rules permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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/29.3.0/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":"text","value":"Highlighting Rows and Columns"},{"type":"element","tagName":"a","properties":{"href":"#highlighting-rows-and-columns","ariaLabel":"highlighting rows and columns permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"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,"sideMenu":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","react","angular","vue"],"framework":"javascript","srcPath":"/row-styles","pageName":"row-styles"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}