{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/react-data-grid/reactui/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"video-section","properties":{"id":"oAQ5vavDupU","title":"React Rendering","header":"true"},"children":[{"type":"text","value":"\nWhen using AG Grid React, all of the grid's core rendering (headers, rows, cells etc) is rendered using React.\nAG Grid React shares the same 'business logic layer' as the other AG Grid versions (Angular, Vue, or just JavaScript) frameworks. This means the features of AG Grid React are identical to the features in AG Grid's other framework flavours. However because the rendering is done 100% in React, the grid works as a native React Component.\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The remainder of this page takes a deeper look at the grid's React rendering, including React Render Cycles and also React Developer Tools."}]},{"type":"element","tagName":"h2","properties":{"id":"show-me","style":"position:relative;"},"children":[{"type":"text","value":"Show Me"},{"type":"element","tagName":"a","properties":{"href":"#show-me","ariaLabel":"show me 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 renders cells using React, and all parent components of the cells are also written in React, all the way back to the client application. This means all the UI from your application down to the cells, including any provided React Cell Renderers, is all 100% React."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below demonstrates AG Grid rendered 100% in React. Note the example has the Age column customised using a React Component."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"React UI","name":"react-ui","type":"react","options":" { \"enterprise\": true, \"showImportsDropdown\": false }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/component-cell-renderer/"},"children":[{"type":"text","value":"Cell Renderers"}]},{"type":"text","value":" for full details on creating Cell Renderers."}]},{"type":"element","tagName":"h2","properties":{"id":"react-profile","style":"position:relative;"},"children":[{"type":"text","value":"React Profile"},{"type":"element","tagName":"a","properties":{"href":"#react-profile","ariaLabel":"react profile 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 profile the example above using the React Developer Tools and see the internals of AG Grid written in React."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to profile (using React Developer Tools) the example above, do the following:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open the example in Plunker."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"From inside Plunker, open in a new tab."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Open React Developer Tools"}]},{"type":"text","value":"\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":"We do not advise using the React Developer Tools on the AG Grid website, or inside Plunker, as both the AG Grid website and Plunker are also written in React, which complicates the React Developer Tools."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As the grid is written in React, we welcome trashing it using React profiling tools for how well it plays alongside your application with regards component refresh and wasted render cycles."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{"src":"reactui/resources/react-dev-tools.png","alt":"React Developer Tools","maxwidth":"90%","constrained":"true","centered":"true"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"using-cell-editors","style":"position:relative;"},"children":[{"type":"text","value":"Using Cell Editors"},{"type":"element","tagName":"a","properties":{"href":"#using-cell-editors","ariaLabel":"using cell editors 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":"Below is an example showing different types of React Cell Editors. Note the following:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Edit any cell by double clicking the mouse."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Country"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Athlete Columns"}]},{"type":"text","value":" have default editors (not customised)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Gold Column"}]},{"type":"text","value":" is using a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"React Inline Cell Renderer"}]},{"type":"text","value":". The editing happens inside the cells."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Silver Column"}]},{"type":"text","value":" is using a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"React Popup Cell Renderer"}]},{"type":"text","value":" ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellEditorPopup=true"}]},{"type":"text","value":"). The editing happens in a popup."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"React UI Editors","name":"editors","type":"react","options":" { \"enterprise\": true, \"showImportsDropdown\": false }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/component-cell-editor/"},"children":[{"type":"text","value":"Cell Editors"}]},{"type":"text","value":" for full details on creating Cell Editors."}]},{"type":"element","tagName":"h2","properties":{"id":"customising-headers","style":"position:relative;"},"children":[{"type":"text","value":"Customising Headers"},{"type":"element","tagName":"a","properties":{"href":"#customising-headers","ariaLabel":"customising headers 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":"Below is an example showing a grid configured with a custom React Column Header component."}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Columns Athlete and Age use a Header Comp that displays the Header name and allows sorting (by clicking on the header)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"All other columns do not have their Headers customised and work as normal."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"React UI Headers","name":"headers","type":"react","options":" { \"showImportsDropdown\": false }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"See "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.0/component-header/"},"children":[{"type":"text","value":"Header Components"}]},{"type":"text","value":" for full details on creating Header Components."}]},{"type":"element","tagName":"h2","properties":{"id":"no-wasted-renders","style":"position:relative;"},"children":[{"type":"text","value":"No Wasted Renders"},{"type":"element","tagName":"a","properties":{"href":"#no-wasted-renders","ariaLabel":"no wasted renders 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":"AG Grid does not cause unnecessary render cycles. The following example demonstrates this."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below each Column is configured to use a Cell Renderer that prints into the Cell the number of times the Cell has had it's render method called. This tells us how many times the render method is called. For non wasted renders, the render method should only get called if it's contents change. Note that the number stays at '1' even if you do any of the following:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Move columns by dragging the headers. The Cell Renderer does not re-render despite the cell moving."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Create a Cell Range by dragging the mouse over some cells. The Cell Renderers do not re-render despite the cell UI background and border changing."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Clicking 'Increase Medals' will re-render the Cell Renderer's as the displayed value is updated."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that we memoise the Cell Renderer using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"const RenderCounterCellRenderer = memo( (params) => {"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"React UI Render Cycles","name":"no-wasted-render","type":"react","options":" { \"enterprise\": true, \"showImportsDropdown\": false }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"advanced-grid-features","style":"position:relative;"},"children":[{"type":"text","value":"Advanced Grid Features"},{"type":"element","tagName":"a","properties":{"href":"#advanced-grid-features","ariaLabel":"advanced grid features 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 rendering of AG Grid is 100% React regardless of what grid features are used."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below is an example with Range Selection, Checkbox Click Selection and Row Grouping."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"React UI Advanced Features","name":"advanced-features","type":"react","options":" { \"enterprise\": true, \"showImportsDropdown\": false }"},"children":[]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Below is an example using Master Detail. When the master grid is AG Grid React, then the detail grids also use AG Grid React. In the example both Master and Detail grids are using React Cell Renderers."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"React UI Master Detail","name":"master-detail","type":"react","options":" { \"enterprise\": true, \"showImportsDropdown\": false }"},"children":[]}]},{"type":"element","tagName":"h2","properties":{"id":"all-customisations-supported","style":"position:relative;"},"children":[{"type":"text","value":"All Customisations Supported"},{"type":"element","tagName":"a","properties":{"href":"#all-customisations-supported","ariaLabel":"all customisations supported 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":"Above we saw customising the grid Cells (Renderers and Editors) and Headers using React Components.\nAll of the other customisations allowed by AG Grid are also supported."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The example below shows the following customisations:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Column Filters and Floating Filters."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tool Panels."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Status Bar."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Overlays."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tooltip."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"grid-example","properties":{"title":"React UI All Customisations","name":"all-customisations","type":"react","options":" { \"enterprise\": true, \"showImportsDropdown\": false }"},"children":[]}]}]},"frontmatter":{"title":"Rendering","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"show-me","depth":2,"value":"Show Me"},{"id":"react-profile","depth":2,"value":"React Profile"},{"id":"using-cell-editors","depth":2,"value":"Using Cell Editors"},{"id":"customising-headers","depth":2,"value":"Customising Headers"},{"id":"no-wasted-renders","depth":2,"value":"No Wasted Renders"},{"id":"advanced-grid-features","depth":2,"value":"Advanced Grid Features"},{"id":"all-customisations-supported","depth":2,"value":"All Customisations Supported"}]}},"pageContext":{"frameworks":["react"],"framework":"react","srcPath":"/reactui","pageName":"reactui"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}