{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/angular-data-grid/row-spanning/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, each cell will take up the height of one row. You can change this behaviour\nto allow cells to span multiple rows. This feature is similar to 'cell merging' in Excel\nor 'row spanning' in HTML tables."}]},{"type":"element","tagName":"h2","properties":{"id":"configuring-row-spanning","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#configuring-row-spanning","ariaLabel":"configuring row spanning 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":"Configuring Row Spanning"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To allow row spanning, the grid must have property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressRowTransform=true"}]},{"type":"text","value":".\nRow spanning is then configured at the column definition level. To have a cell\nspan more than one row, return how many rows to span in the callback\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.rowSpan"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"spanning","names":"[\"rowSpan\"]"},"children":[]}]},{"type":"element","tagName":"snippet","properties":{"spacebetweenproperties":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    // turn off row translation\n    suppressRowTransform: true,\n    columnDefs: [\n        {\n            field: 'country',\n            // row span is 2 for rows with Russia, but 1 for everything else\n            rowSpan: params => params.data.country === 'Russia' ? 2 : 1,\n        },\n        // other column definitions ...\n    ]\n}\n"}]},{"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":"The property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"suppressRowTransform=true"}]},{"type":"text","value":" is used to stop the grid positioning rows using CSS\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":" and instead the grid will use CSS "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"top"}]},{"type":"text","value":".\nFor an explanation of the difference between these two methods see the article\n"},{"type":"element","tagName":"a","properties":{"href":"https://medium.com/ag-grid/javascript-gpu-animation-with-transform-and-translate-bf09c7000aa6"},"children":[{"type":"text","value":"JavaScript GPU Animation with Transform and Translate"}]},{"type":"text","value":".\nThe reason row span will not work with CSS "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":" is that CSS "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":" creates a\n"},{"type":"element","tagName":"a","properties":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context"},"children":[{"type":"text","value":"stacking context"}]},{"type":"text","value":"\nwhich constrains CSS "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"z-index"}]},{"type":"text","value":" from placing cells on top of other cells in another row.\nHaving cells extend into other rows is necessary for row span which means it will not work\nwhen using CSS "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":". The downside to not using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"transform"}]},{"type":"text","value":" is performance; row animation\n(after sort or filter) will be slower."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"row-spanning-simple-example","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#row-spanning-simple-example","ariaLabel":"row spanning simple example 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 Spanning Simple Example"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows a simple example using row spanning. The example doesn't make much sense,\nit just arbitrarily sets row span on some cells for demonstration purposes."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column is configured to span 2 rows for 'Aleksey Nemov' and 4 rows for 'Ryan Lochte'."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" column is configured to apply a CSS class to give a background to the cell. This is important because if a background was not set, the cell background would be transparent and the underlying cell would still be visible."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Spanning Simple","name":"row-spanning-simple","type":"generated","options":" { \"exampleHeight\":  580 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"row-spanning-complex-example","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#row-spanning-complex-example","ariaLabel":"row spanning complex example 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 Spanning Complex Example"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row spanning will typically be used for creating reports with AG Grid. Below\nis something that would be more typical of the row spanning feature. The following\ncan be noted from the example:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Show"}]},{"type":"text","value":" row spans by 4 rows when it has content."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Show"}]},{"type":"text","value":" uses CSS class rules to specify background and border."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Show"}]},{"type":"text","value":" has a custom cell renderer to make use of the extra space."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Spanning Complex","name":"row-spanning-complex","type":"generated","options":" { \"exampleHeight\": 580 } "},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"constraints-with-row-spanning","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#constraints-with-row-spanning","ariaLabel":"constraints with row spanning 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":"Constraints with Row Spanning"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Row Spanning breaks out of the row / cell calculations that a lot of features in the grid are based on.\nIf using Row Spanning, be aware of the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Responsibility is with the developer to not span past the last row. This is especially true if sorting and filtering (e.g. a cell may span outside the grid after the data is sorted and the cell's row ends up at the bottom of the grid)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Responsibility is with the developer to apply a background style to spanning cells so that overwritten cells cannot be seen."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Overwritten cells will still exist, but will not be visible. This means cell navigation will go to the other cells - e.g. if a row spanned cell has focus, and the user hits the 'arrow down' key, the focus will go to a hidden cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Row span does not work with dynamic row height or auto-height. The row span assumes default row height is used when calculating how high the cell should be."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Sorting and filtering will provide strange results when row spanning. For example a cell may span 4 rows, however applying a filter or a sort will probably change the requirements of what rows should be spanned."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/range-selection/"},"children":[{"type":"text","value":"Range Selection"}]},{"type":"text","value":" will not work correctly when spanning cells. This is because it is not possible to cover all scenarios, as a range is no longer a perfect rectangle."}]},{"type":"text","value":"\n"}]}]},"frontmatter":{"title":"Row Spanning","version":null,"enterprise":null,"description":null},"headings":[{"id":"configuring-row-spanning","depth":2,"value":"Configuring Row Spanning"},{"id":"row-spanning-simple-example","depth":2,"value":"Row Spanning Simple Example"},{"id":"row-spanning-complex-example","depth":2,"value":"Row Spanning Complex Example"},{"id":"constraints-with-row-spanning","depth":2,"value":"Constraints with Row Spanning"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"angular","srcPath":"/row-spanning","pageName":"row-spanning"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}