{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/row-pinning/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pinned rows appear either above or below the normal rows of a table.\nThis feature in other grids is also known as "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Frozen Rows"}]},{"type":"text","value":" or "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Floating Rows"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To put pinned rows into your grid, set "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pinnedTopRowData"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pinnedBottomRowData"}]},{"type":"text","value":"\nin the same way as you would set normal data into "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowData"}]},{"type":"text","value":".\nAfter the grid is created, you can update the pinned rows by calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"api.setPinnedTopRowData(rows)"}]},{"type":"text","value":"\nand "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"setPinnedBottomRowData(rows)"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-options/properties.json","section":"rowPinning","names":"[\"pinnedTopRowData\", \"pinnedBottomRowData\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-api/api.json","section":"pinned","names":"[\"setPinnedTopRowData\", \"setPinnedBottomRowData\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"cell-editing","style":"position:relative;"},"children":[{"type":"text","value":"Cell Editing"},{"type":"element","tagName":"a","properties":{"href":"#cell-editing","ariaLabel":"cell editing 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cell editing can take place as normal on pinned rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"cell-rendering","style":"position:relative;"},"children":[{"type":"text","value":"Cell Rendering"},{"type":"element","tagName":"a","properties":{"href":"#cell-rendering","ariaLabel":"cell rendering 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cell rendering can take place as normal on pinned rows. If you want to use a different\nCell Renderer for pinned rows vs normal rows, use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.cellRendererSelector"}]},{"type":"text","value":" to specify\ndifferent Cell Renderers for different rows."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"column-properties/properties.json","section":"styling","names":"[\"cellRendererSelector\"]"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"example","style":"position:relative;"},"children":[{"type":"text","value":"Example"},{"type":"element","tagName":"a","properties":{"href":"#example","ariaLabel":"example 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows pinned rows. Select the number of rows you want to pin at the top and the bottom using the selection above the grid."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this example we're using Components to render custom pinned row values for Athlete and Age (colour blue and italics respectively)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Row Pinning","name":"row-pinning","type":"generated","options":"{ \"exampleHeight\": 580 }"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"non-supported-items","style":"position:relative;"},"children":[{"type":"text","value":"Non Supported Items"},{"type":"element","tagName":"a","properties":{"href":"#non-supported-items","ariaLabel":"non supported items 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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pinned rows are not part of the main row model. For this reason, the following is not possible:"}]},{"type":"text","value":"\n"},{"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":"Sorting"}]},{"type":"text","value":": Pinned rows cannot be sorted."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Filtering"}]},{"type":"text","value":": Pinned rows are not filtered."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Row Grouping"}]},{"type":"text","value":": Pinned rows cannot be grouped."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Row Selection"}]},{"type":"text","value":": Pinned rows cannot be selected."}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"Row Pinning","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"cell-editing","depth":2,"value":"Cell Editing"},{"id":"cell-rendering","depth":2,"value":"Cell Rendering"},{"id":"example","depth":2,"value":"Example"},{"id":"non-supported-items","depth":2,"value":"Non Supported Items"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"vue","srcPath":"/row-pinning","pageName":"row-pinning"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}