{"componentChunkName":"component---src-templates-doc-page-jsx","path":"/react/components/","result":{"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can create your own custom components to customise the behaviour of the grid. For example you can customise how cells are rendered, how values are edited and also create your own filters."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The full list of component types you can provide in ag-Grid are as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-cell-renderer/"},"children":[{"type":"text","value":"Cell Renderer"}]},{"type":"text","value":": To customises the contents of a cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-cell-editor/"},"children":[{"type":"text","value":"Cell Editor"}]},{"type":"text","value":": To customises editing of a cell."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-date/"},"children":[{"type":"text","value":"Date Component"}]},{"type":"text","value":": To customise the date selection component in the date filter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-filter/"},"children":[{"type":"text","value":"Filter Component"}]},{"type":"text","value":": For custom column filter that appears inside the column menu."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-floating-filter/"},"children":[{"type":"text","value":"Floating Filter"}]},{"type":"text","value":": For custom column filter that appears inside the column menu."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-header/"},"children":[{"type":"text","value":"Header Component"}]},{"type":"text","value":": To customise the header of a column and column groups."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-loading-cell-renderer/"},"children":[{"type":"text","value":"Loading Cell Renderer"}]},{"type":"text","value":": To customise the loading cell row when using Server Side row model."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-overlay/"},"children":[{"type":"text","value":"Overlay Component"}]},{"type":"text","value":": To customise loading and no rows overlay components."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-status-bar/"},"children":[{"type":"text","value":"Status Bar Component"}]},{"type":"text","value":": For custom status bar components."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-tool-panel/"},"children":[{"type":"text","value":"Tool Panel Component"}]},{"type":"text","value":": For custom tool panel components."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"../component-tooltip/"},"children":[{"type":"text","value":"Tooltip Component"}]},{"type":"text","value":": For custom cell tooltip components."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The remainder of this page gives information that is common across all the component types."}]},{"type":"element","tagName":"h2","properties":{"id":"registering-custom-components","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#registering-custom-components","ariaLabel":"registering custom components 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":"Registering Custom Components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The pages for each component type (cell renderer, cell editor etc) contain examples on how to register and use each component type. However it is useful here to step back and focus on the component registration process which is common across all component types and all frameworks (React, Angular etc)."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are two ways to register custom components:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"By name."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Direct reference."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Both options are fully supported by the grid, however the preferred options is by name as it's more flexible. All of the examples in the documentation use this approach. The direct reference approach is kept for backwards compatibility reasons as this was the original way to do it in ag-Grid."}]},{"type":"element","tagName":"h3","properties":{"id":"1-by-name","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#1-by-name","ariaLabel":"1 by name 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":"1. By Name"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A component is registered with the grid by providing it through the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" grid property. The "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" grid property contains a map of 'component names' to 'component classes'. Components of all types (editors, renderers, filters etc) are all stored together and must have unique names."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"gridOptions "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// register the components using 'components' grid property"}]},{"type":"text","value":"\n components"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// 'countryCellRenderer' is mapped to class CountryCellRenderer"}]},{"type":"text","value":"\n countryCellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CountryCellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// 'countryFilter' is mapped to class CountryFilter"}]},{"type":"text","value":"\n countryFilter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CountryFilter\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// then refer to the component by name"}]},{"type":"text","value":"\n columnDefs"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n field"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'country'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n cellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'countryCellRenderer'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'countryFilter'"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"2-direct-reference","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#2-direct-reference","ariaLabel":"2 direct reference 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":"2. Direct Reference"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A shorter approach is to refer to the component class directly."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"gridOptions "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n columnDefs"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n field"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'country'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n cellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CountryCellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CountryFilter\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"advantages-of-by-name","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#advantages-of-by-name","ariaLabel":"advantages of by name 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":"Advantages of By Name"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Registering components by name has the following advantages:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Implementations can change without having to change all the column definitions. For example, you may have 20 columns using a currency cell renderer. If you want to update the cell renderer to another currency cell renderer, you only need to do it in only place (where the cell renderer is registered) and all columns will pick up the new implementation."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"The part of the grid specifying column definitions is plain JSON. This is helpful for applications that read column definitions from static data. If you referred to the class name directly inside the column definition, it would not be possible to convert the column definition to JSON."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h2","properties":{"id":"registering-framework-components","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#registering-framework-components","ariaLabel":"registering framework components 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":"Registering Framework Components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Most of the frameworks ag-Grid works with use components. It is possible to use the framework components inside of ag-Grid. Configuring the components is same and explained in this section. The frameworks that follow this conventions are:"}]},{"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":"Angular"}]},{"type":"text","value":" (version 2 and later)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"React"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"VueJS"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Polymer"}]}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","angular-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following frameworks are not configured in this way:"}]},{"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":"AngularJS 1"}]},{"type":"text","value":": This framework does not follow the same pattern as other frameworks. See "},{"type":"element","tagName":"a","properties":{"href":"../angularjs/#angular-compiling"},"children":[{"type":"text","value":"AngularJS"}]},{"type":"text","value":"\non how you can turn on AngularJS 1 compiling to use AngularJS bindings inside ag-Grid."}]},{"type":"text","value":"\n"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using one of the supported frameworks registration is done using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"frameworkComponents"}]},{"type":"text","value":" property rather than the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"components"}]},{"type":"text","value":" property. Then the component is registered by name as normal."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"gridOptions "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// use frameworkComponents instead of components. most frameworks will allow you"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// to specify this as a bound property."}]},{"type":"text","value":"\n frameworkComponents"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n countryCellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" AngularCountryCellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n countryFilter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" AngularCountryFilter\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// then refer to the component by name as before"}]},{"type":"text","value":"\n columnDefs"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n field"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'country'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n cellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'countryCellRenderer'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'countryFilter'"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You can also refer to the component classes directly using the "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"framework"}]},{"type":"text","value":" variant of the property. For example instead of using "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cellRenderer"}]},{"type":"text","value":" you use "},{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"cellRendererFramework"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"gridOptions "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\n columnDefs"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n field"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'country'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n cellRendererFramework"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CountryCellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n filterFramework"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CountryFilter\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"summary-of-component-registration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#summary-of-component-registration","ariaLabel":"summary of component registration 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":"Summary of Component Registration"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Here we give an overview, as there is a lot of similar sounding information above."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid options has the following properties for registering components:"}]},{"type":"element","tagName":"h3","properties":{"id":"component-registration","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#component-registration","ariaLabel":"component registration 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":"Component Registration"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"api-documentation","properties":{"source":"grid-properties/properties.json","section":"components"},"children":[]}]},{"type":"element","tagName":"h3","properties":{"id":"component-usage","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#component-usage","ariaLabel":"component usage 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":"Component Usage"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The below table gives an overview of where components can be used. The table shows both options for usage:"}]},{"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":"Name / Direct JavaScript:"}]},{"type":"text","value":" This can be: 1) A component name referring to a registered component (either plain JavaScript or framework component); 2) A direct reference to a JavaScript component."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Direct Framework:"}]},{"type":"text","value":" A direct reference to a framework (React, Angular etc) component."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Component"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Where"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Name / Direct JavaScript"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Direct Framework"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Detail Cell Renderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"detailCellRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"detailCellRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Full Width Cell Renderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"fullWidthCellRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"fullWidthCellRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Group Row Cell Renderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"groupRowRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"groupRowRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Group Row Inner Cell Renderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"groupRowInnerRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"groupRowInnerRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Loading Cell Renderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"loadingCellRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"loadingCellRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Loading Overlay"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"loadingOverlayRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"loadingOverlayRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"No Rows Overlay"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"noRowsOverlayRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"noRowsOverlayRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Date Component"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"dateComponent"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"dateComponent"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Status Bar Component"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Grid Option -> Status Bar"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"statusPanel"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"statusPanel"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Cell Renderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Column Definition"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"cellRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"cellRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Pinned Row Cell Renderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Column Definition"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"pinnedRowCellRenderer"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"pinnedRowCellRenderer"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Cell Editor"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Column Definition"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"cellEditor"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"cellEditor"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Filter"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Column Definition"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"filter"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"filter"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Floating Filter"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Column Definition"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"floatingFilterComponent"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"floatingFilterComponent"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Header Component"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Column Definition"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"headerComponent"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"headerComponent"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Header Group Component"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Column Definition"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"headerGroupComponent"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"headerGroupComponent"},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Framework"}]}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"javascript-or-framework","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#javascript-or-framework","ariaLabel":"javascript or framework 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":"JavaScript or Framework"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using a framework, then you have a choice of the following:"}]},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Provide an ag-Grid component in JavaScript."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Provide an ag-Grid component as a framework component (eg React or Angular)."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For example if you want to build a cell renderer and you are using React, you have the choice to build the cell renderer using React or using plain JavaScript."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If using a framework, you should first read how to build the component using plain JavaScript. This is because the framework specific component builds on what you learn from the JavaScript component."}]},{"type":"element","tagName":"h2","properties":{"id":"mixing-javascript-and-framework","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#mixing-javascript-and-framework","ariaLabel":"mixing javascript and framework 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":"Mixing JavaScript and Framework"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is possible to mix JavaScript and framework components in the same application. The following code snippet shows how such can be configured:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"js"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-js"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-js"]},"children":[{"type":"text","value":"gridOptions "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// JavaScript components registered here"}]},{"type":"text","value":"\n components"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n countryFilter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CustomCountryFilter\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Framework components registered here"}]},{"type":"text","value":"\n frameworkComponents"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n countryCellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" CountryCellRenderer\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n columnDefs"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n field"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'country'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// filter is a registered plain JavaScript component"}]},{"type":"text","value":"\n filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'countryFilter'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n\n "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// cell renderer is a registered framework (React, Angular etc) component"}]},{"type":"text","value":"\n cellRenderer"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'countryCellRenderer'"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"grid-provided-components","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grid-provided-components","ariaLabel":"grid provided components 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":"Grid Provided Components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid comes with pre-registered components that can be used. Each component provided by the grid starts with the namespaces 'ag' to minimise naming conflicts with user provided components. The full list of grid provided components are in the table below."}]},{"type":"element","tagName":"table","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"thead","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"th","properties":{"colSpan":"2"},"children":[{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Date Inputs"}]},{"type":"text","value":"\n "}]}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agDateInput"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Default date input used by filters."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{"colSpan":"2"},"children":[{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Column Headers"}]}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agColumnHeader"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Default column header."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agColumnHeaderGroup"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Default column group header."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{"colSpan":"2"},"children":[{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Column Filters"}]}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agSetColumnFilter"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Set filter (default when using ag-Grid Enterprise)."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agTextColumnFilter"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Simple text filter (default when using ag-Grid Free)."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agNumberColumnFilter"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Number filter."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agDateColumnFilter"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Date filter."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{"colSpan":"2"},"children":[{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Floating Filters"}]}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agSetColumnFloatingFilter"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Floating set filter."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agTextColumnFloatingFilter"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Floating text filter."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agNumberColumnFloatingFilter"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Floating number filter."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agDateColumnFloatingFilter"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Floating date filter."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{"colSpan":"2"},"children":[{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Cell Renderers"}]}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agAnimateShowChangeCellRenderer"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Cell renderer that animates value changes."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agAnimateSlideCellRenderer"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Cell renderer that animates value changes."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agGroupCellRenderer"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Cell renderer for displaying group information."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agLoadingCellRenderer"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Cell editor for loading row when using Enterprise row model."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{"colSpan":"2"},"children":[{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Overlays"}]}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agLoadingOverlay"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Loading overlay."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agNoRowsOverlay"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"No rows overlay."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{"colSpan":"2"},"children":[{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Cell Editors"}]}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agTextCellEditor"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Text cell editor."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agSelectCellEditor"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Select cell editor."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agRichSelectCellEditor"},{"type":"element","tagName":"enterprise-icon","properties":{},"children":[]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Rich select editor."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agPopupTextCellEditor"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Popup text cell editor."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agPopupSelectCellEditor"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Popup select cell editor."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agLargeTextCellEditor"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Large text cell editor."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{"colSpan":"2"},"children":[{"type":"element","tagName":"h3","properties":{},"children":[{"type":"text","value":"Master Detail"}]}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"agDetailCellRenderer"},{"type":"element","tagName":"enterprise-icon","properties":{},"children":[]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Detail panel for master / detail grid."}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n "}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h3","properties":{"id":"overriding-grid-components","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#overriding-grid-components","ariaLabel":"overriding grid components 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":"Overriding Grid Components"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is also possible to override components. Where the grid uses a default value, this means the override component will be used instead. The default components, where overriding makes sense, are as follows:"}]},{"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":"agDateInput"}]},{"type":"text","value":": To change the default date selection across all filters."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"agColumnHeader"}]},{"type":"text","value":": To change the default column header across all columns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"agColumnGroupHeader"}]},{"type":"text","value":": To change the default column group header across all columns."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"agLoadingCellRenderer"}]},{"type":"text","value":": To change the default loading cell renderer for Enterprise Row Model."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"agLoadingOverlay"}]},{"type":"text","value":": To change the default 'loading' overlay."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"agNoRowsOverlay"}]},{"type":"text","value":": To change the default loading 'no rows' overlay."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"agTextCellEditor"}]},{"type":"text","value":": To change the default text cell editor."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"agDetailCellRenderer"}]},{"type":"text","value":": To change the default detail panel for master / detail grids."}]},{"type":"text","value":"\n"}]}]},"frontmatter":{"title":"Components","enterprise":null},"headings":[{"id":"registering-custom-components","depth":2,"value":"Registering Custom Components"},{"id":"1-by-name","depth":3,"value":"1. By Name"},{"id":"2-direct-reference","depth":3,"value":"2. Direct Reference"},{"id":"advantages-of-by-name","depth":3,"value":"Advantages of By Name"},{"id":"registering-framework-components","depth":2,"value":"Registering Framework Components"},{"id":"summary-of-component-registration","depth":2,"value":"Summary of Component Registration"},{"id":"component-registration","depth":3,"value":"Component Registration"},{"id":"component-usage","depth":3,"value":"Component Usage"},{"id":"javascript-or-framework","depth":2,"value":"JavaScript or Framework"},{"id":"mixing-javascript-and-framework","depth":2,"value":"Mixing JavaScript and Framework"},{"id":"grid-provided-components","depth":2,"value":"Grid Provided Components"},{"id":"overriding-grid-components","depth":3,"value":"Overriding Grid Components"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"react","srcPath":"/components"}},"staticQueryHashes":["1669547773","2635156907","4171589011"]}