{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/row-height/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, the grid will display rows with a height of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"25px"}]},{"type":"text","value":". You can change this for each row\nindividually to give each row a different height."}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You cannot use variable row height when using "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/viewport/"},"children":[{"type":"text","value":"Viewport Row Model"}]},{"type":"text","value":".\nThis is because this row model needs to work out the position of rows that are not loaded and hence needs to assume the row height is fixed."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"rowheight-property","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#rowheight-property","ariaLabel":"rowheight property 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":"rowHeight Property"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To change the row height for the whole grid, set the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowHeight"}]},{"type":"text","value":" to a positive number.\nFor example, to set the height to 50px, do the following:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    rowHeight: 50,\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Changing the property will set a new row height for all rows, including pinned rows top and bottom."}]},{"type":"element","tagName":"h2","properties":{"id":"getrowheight-callback","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#getrowheight-callback","ariaLabel":"getrowheight callback 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":"getRowHeight Callback"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"styling","names":"[\"getRowHeight\"]"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To change the row height so that each row can have a different height,\nimplement the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowHeight(params)"}]},{"type":"text","value":" callback. For example, to set the height\nto 50px for all group rows and 25px for all other rows, do the following:"}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    getRowHeight: params => params.node.group ? 50 : 20,\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows dynamic row height, specifying a different row height for each row. It uses the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowHeight(params)"}]},{"type":"text","value":" callback to achieve this."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Height Simple","name":"row-height-simple","type":"generated"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"changing-row-height","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#changing-row-height","ariaLabel":"changing row height 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":"Changing Row Height"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Setting the row height is done once for each row. Once set, the grid will not ask you\nfor the row height again. You can change the row height after it is initially set\nusing a combination of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.resetRowHeights()"}]},{"type":"text","value":", "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setRowHeight(height)"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.onRowHeightChanged()"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"h3","properties":{"id":"apiresetrowheights","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#apiresetrowheights","ariaLabel":"apiresetrowheights 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":"api.resetRowHeights()"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Call this API to have the grid clear all the row\nheights and work them all out again from scratch - if you provide a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowHeight(params)"}]},{"type":"text","value":"\ncallback, it will be called again for each row. The grid will then resize and\nreposition all rows again. This is the shotgun approach."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"rendering","names":"[\"resetRowHeights\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"rownodesetrowheightheight-and-apionrowheightchanged","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#rownodesetrowheightheight-and-apionrowheightchanged","ariaLabel":"rownodesetrowheightheight and apionrowheightchanged 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":"rowNode.setRowHeight(height) and api.onRowHeightChanged()"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setRowHeight(height)"}]},{"type":"text","value":" directly\non the rowNode to set its height. The grid will resize the row but will NOT\nreposition the rows (i.e. if you make a row shorter, a space will appear between\nit and the next row - the next row will not be moved up). When you have set the\nrow height (potentially on many rows) you need to call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.onRowHeightChanged()"}]},{"type":"text","value":"\nto tell the grid to reposition the rows. It is intended that you can call\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setRowHeight(height)"}]},{"type":"text","value":" many times and then call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.onRowHeightChanged()"}]},{"type":"text","value":"\nonce at the end."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode.setRowHeight(height)"}]},{"type":"text","value":", you can either pass in a new height\nor "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":". If you pass a height, that height will be used for the row.\nIf you pass in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"null"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"undefined"}]},{"type":"text","value":", the grid will then calculate the row height in the\nusual way, either using the provided "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowHeight"}]},{"type":"text","value":" property or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"getRowHeight(params)"}]},{"type":"text","value":"\ncallback."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"row-object/resources/methods.json","section":"rowNodeMethods","names":"[\"setRowHeight\"]","config":"{\"overrideBottomMargin\":\"0rem\"}"},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"rendering","names":"[\"onRowHeightChanged\"]"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"example-changing-row-height","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-changing-row-height","ariaLabel":"example changing row height 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 Changing Row Height"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below changes the row height in the different ways described above."}]},{"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":"Top Level Groups:"}]},{"type":"text","value":" The row height for the groups is changed by calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.resetRowHeights()"}]},{"type":"text","value":". This gets the grid to call "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridOptions.getRowHeight(params)"}]},{"type":"text","value":" again for each row."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Swimming Leaf Rows:"}]},{"type":"text","value":" Same technique is used here as above. You will need to expand a group with swimming (e.g. United States) and the grid works out all row heights again."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Russia Leaf Rows:"}]},{"type":"text","value":" The row height is set directly on the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowNode"}]},{"type":"text","value":", and then the grid is told to reposition all rows again by calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.onRowHeightChanged()"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that this example uses AG Grid Enterprise as it uses grouping. Setting the row\nheight is an AG Grid Community feature, we just demonstrate it against groups and normal\nrows below."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Changing Row Height","name":"row-height-change","type":"generated","options":" { \"enterprise\": true, \"exampleHeight\": 590, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"text-wrapping","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#text-wrapping","ariaLabel":"text wrapping 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":"Text Wrapping"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want text to wrap inside cells rather than truncating, add the flag "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"wrapText=true"}]},{"type":"text","value":" to the Column Definition."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"wrapText=true"}]},{"type":"text","value":" set on the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Latin Text"}]},{"type":"text","value":" column.\nBehind the scenes, this results in the CSS property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"white-space: normal"}]},{"type":"text","value":"\nbeing applied to the cell, which causes the text to wrap."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Height Complex","name":"row-height-complex","type":"generated"},"children":[]}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are providing a custom "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/component-cell-renderer/"},"children":[{"type":"text","value":"Cell Renderer Component"}]},{"type":"text","value":",\nyou can implement text wrapping in the custom component in your own way. The property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"wrapText"}]},{"type":"text","value":"\nis intended to be used when you are not using a custom Cell Renderer."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"auto-row-height","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#auto-row-height","ariaLabel":"auto row height 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":"Auto Row Height"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to set the row height based on the contents of the cells.\nTo do this, set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoHeight=true"}]},{"type":"text","value":" on each column where\nheight should be calculated from. For example, if one column is showing\ndescription text over multiple lines, then you may choose to select only\nthat column to determine the line height."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoHeight"}]},{"type":"text","value":" is typically used with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"wrapText"}]},{"type":"text","value":".\nIf "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"wrapText"}]},{"type":"text","value":" is not set, and no custom\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/component-cell-renderer/"},"children":[{"type":"text","value":"Cell Renderer Component"}]},{"type":"text","value":"\nis used, then the cell will display all it's contents on one line. This is probably not\nthe intention if using Auto Row Height."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If multiple columns are marked with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoHeight=true"}]},{"type":"text","value":" then the\nheight of the largest column is used."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows auto height. Column A has Auto Height enabled by setting both "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"wrapText=true"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoHeight=true"}]},{"type":"text","value":". Column B only has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"wrapText=true"}]},{"type":"text","value":" set so it's contents are clipped if content doesn't fit."}]},{"type":"comment","value":" this example uses a timeout to set data - the runner doesn't currently support this sort of thing "},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Auto Row Height","name":"auto-row-height","type":"generated","options":" { \"enterprise\": true, \"modules\": [\"clientside\", \"rowgrouping\", \"menu\", \"columnpanel\"] }"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"lazy-height-calculation","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#lazy-height-calculation","ariaLabel":"lazy height calculation 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":"Lazy Height Calculation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Auto height works by the grid listening for height changes for all Cells configured\nfor Auto Height.\nAs such it is only looking at rows that are currently rendered into the DOM.\nAs the grid scrolls vertically and more rows are displayed, the height of those rows will be\ncalculated on the fly."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This means the row heights and row positions are changing as the grid is scrolling vertically. This leads to the following behaviours:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The vertical scroll range (how much you can scroll over) will change dynamically to fit the rows. If scrolling by dragging the scroll thumb with the mouse, the scroll thumb will not follow the mouse. It will either lag behind or jump ahead, depending on whether the row height calculations are increasing or decreasing the vertical scroll range."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"If scrolling up and showing rows for the first time (e.g. the user jumps to the bottom scroll position and then starts slowly scrolling up), then the row positions will jump as the rows coming into view at the top will get resized and the new height will impact the position of all rows beneath it. For example if the row gets resized to be 10 pixels taller, rows below it will get pushed down by 10 rows. If scrolling down this isn't observed as rows below are not in view."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The above are results of Lazy Height Calculation. It is not possible to avoid these effects."}]},{"type":"element","tagName":"h3","properties":{"id":"auto-height-and-column-virtualisation","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#auto-height-and-column-virtualisation","ariaLabel":"auto height and column virtualisation 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":"Auto Height and Column Virtualisation"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Columns with Auto Height will always be rendered. The grid needs to have all Auto Height Columns rendered in order to correctly set the height of the row."}]},{"type":"element","tagName":"h3","properties":{"id":"auto-height-performance-consideration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#auto-height-performance-consideration","ariaLabel":"auto height performance consideration 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":"Auto Height Performance Consideration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Because auto-height adds size listeners to cells and stops Column Virtualisation, consideration should be given for when and how to use it. Only apply auto-height to columns where it makes sense. For example, if you have many columns that do not require a variable height, then do not set them to auto-height."}]},{"type":"element","tagName":"h2","properties":{"id":"height-for-pinned-rows","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#height-for-pinned-rows","ariaLabel":"height for pinned rows 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":"Height for Pinned Rows"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row height for pinned rows works exactly as for normal rows with one difference: it\nis not possible to dynamically change the height once set. However this is easily solved\nby just setting the pinned row data again which resets the row heights. Setting the\ndata again is not a problem for pinned rows as it doesn't impact scroll position, filtering,\nsorting or group open / closed positions as it would with normal rows if the data was reset."}]}]},"frontmatter":{"title":"Row Height","version":null,"enterprise":null,"description":null},"headings":[{"id":"rowheight-property","depth":2,"value":"rowHeight Property"},{"id":"getrowheight-callback","depth":2,"value":"getRowHeight Callback"},{"id":"changing-row-height","depth":2,"value":"Changing Row Height"},{"id":"apiresetrowheights","depth":3,"value":"api.resetRowHeights()"},{"id":"rownodesetrowheightheight-and-apionrowheightchanged","depth":3,"value":"rowNode.setRowHeight(height) and api.onRowHeightChanged()"},{"id":"example-changing-row-height","depth":3,"value":"Example Changing Row Height"},{"id":"text-wrapping","depth":2,"value":"Text Wrapping"},{"id":"auto-row-height","depth":2,"value":"Auto Row Height"},{"id":"lazy-height-calculation","depth":3,"value":"Lazy Height Calculation"},{"id":"auto-height-and-column-virtualisation","depth":3,"value":"Auto Height and Column Virtualisation"},{"id":"auto-height-performance-consideration","depth":3,"value":"Auto Height Performance Consideration"},{"id":"height-for-pinned-rows","depth":2,"value":"Height for Pinned Rows"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"angular","srcPath":"/row-height","pageName":"row-height"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}