{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/column-pinning/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can pin columns by setting the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"pinned"}]},{"type":"text","value":" attribute on the column definition to either "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'left'"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"'right'"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"snippet","properties":{"suppressframeworkcontext":"true"},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        { field: 'athlete', pinned: 'left' }\n    ],\n}\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows an example with two pinned columns on the left and one pinned column on the right. The example also demonstrates changing the pinning via the API at runtime."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid will reorder the columns so that 'left pinned' columns come first and 'right pinned' columns come last. In the example below the state of pinned columns impacts the order of the columns such that when 'Country' is pinned, it jumps to the first position."}]},{"type":"element","tagName":"h2","properties":{"id":"jump-to--pinning","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#jump-to--pinning","ariaLabel":"jump to  pinning 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":"Jump To & Pinning"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below shows jumping to rows and columns via the API. Jumping to a pinned column makes no sense, as the pinned columns, by definition, are always visible. So below, if you try to jump to a pinned column no action will be taken."}]},{"type":"element","tagName":"h2","properties":{"id":"example-pinning","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#example-pinning","ariaLabel":"example pinning 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 Pinning"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Column Pinning","name":"column-pinning","type":"generated","options":"{ \"exampleHeight\": 570 }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"pinning-via-column-dragging","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#pinning-via-column-dragging","ariaLabel":"pinning via column dragging 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":"Pinning via Column Dragging"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to pin a column by moving the column in the following ways:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When other columns are pinned, drag the column to the existing pinned area."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"When no columns are pinned, drag the column to the edge of the grid and wait for approximately one second. The grid will then assume you want to pin and create a pinned area and place the column into it."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"column-pinning/resources/pinning-by-moving.gif","alt":"Pinning via Column Dragging","maxwidth":"30.5rem","centered":"true","constrained":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"lock-pinned","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#lock-pinned","ariaLabel":"lock pinned 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":"Lock Pinned"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you do not want the user to be able to pin using the UI, set the property "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lockPinned=true"}]},{"type":"text","value":". This will block the UI in the following way:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Dragging a column to the pinned section will not pin the column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"For AG Grid Enterprise, the column menu will not have a pin option."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates columns with pinning locked. The following can be noted:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete"}]},{"type":"text","value":" is pinned via the configuration and has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lockPinned=true"}]},{"type":"text","value":". This means the column will be pinned always, it is not possible to drag the column out of the pinned section."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The column "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Age"}]},{"type":"text","value":" is not pinned and has "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"lockPinned=true"}]},{"type":"text","value":". This means the column cannot be pinned by dragging the column."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All other columns act as normal. They can be added and removed from the pinned section by dragging."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"Lock Pinned","name":"lock-pinned","type":"generated"},"children":[]}]}]},"frontmatter":{"title":"Column Pinning","version":null,"enterprise":null,"description":null},"headings":[{"id":"jump-to--pinning","depth":2,"value":"Jump To & Pinning"},{"id":"example-pinning","depth":2,"value":"Example Pinning"},{"id":"pinning-via-column-dragging","depth":2,"value":"Pinning via Column Dragging"},{"id":"lock-pinned","depth":2,"value":"Lock Pinned"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/column-pinning","pageName":"column-pinning"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}