{"componentChunkName":"component---src-templates-doc-page-jsx","path":"/javascript-data-grid/provided-cell-editors/","result":{"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The grid comes with some cell editors provided out of the box. These cell editors are listed here."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The provided cell editors are as follows:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agTextCellEditor"}]},{"type":"text","value":": Simple text editor that uses a standard HTML "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"input"}]},{"type":"text","value":". This is the default."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agPopupTextCellEditor"}]},{"type":"text","value":": Same as 'text' but as popup."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agLargeTextCellEditor"}]},{"type":"text","value":": A text popup for inputting larger, multi-line text."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agSelectCellEditor"}]},{"type":"text","value":": Simple editor that uses a standard HTML "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agPopupSelectCellEditor"}]},{"type":"text","value":": Same as 'select' but as popup."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agRichSelectCellEditor (AG Grid Enterprise only)"}]},{"type":"text","value":": A rich select popup that uses row virtualisation."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h3","properties":{"id":"agtextcelleditor--agpopuptextcelleditor","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#agtextcelleditor--agpopuptextcelleditor","ariaLabel":"agtextcelleditor  agpopuptextcelleditor 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":"agTextCellEditor / agPopupTextCellEditor"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Simple text editors that use the standard HTML "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"input"}]},{"type":"text","value":" tag. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agTextCellEditor"}]},{"type":"text","value":" is the default used if you do not explicitly set a cell editor."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The only parameter for text cell editors is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"useFormatter"}]},{"type":"text","value":". If set to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", the grid will use the provided "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"colDef.cellFormatter"}]},{"type":"text","value":" (if one is present)."}]},{"type":"element","tagName":"h3","properties":{"id":"aglargetextcelleditor","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#aglargetextcelleditor","ariaLabel":"aglargetextcelleditor 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":"agLargeTextCellEditor"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Simple editor that uses the standard HTML "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"textarea"}]},{"type":"text","value":" tag."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agLargeTextCellEditor"}]},{"type":"text","value":" takes the following parameters:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"maxLength"}]},{"type":"text","value":": Max number of characters to allow. Default is 200."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rows"}]},{"type":"text","value":": Number of character rows to display. Default is 10."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cols"}]},{"type":"text","value":": Number of character columns to display. Default is 60."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"h3","properties":{"id":"agselectcelleditor--agpopupselectcelleditor","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#agselectcelleditor--agpopupselectcelleditor","ariaLabel":"agselectcelleditor  agpopupselectcelleditor 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":"agSelectCellEditor / agPopupSelectCellEditor"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Simple editors that use the standard HTML "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" tag."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The only parameter for text cell editors is "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"values"}]},{"type":"text","value":". Use this to provide a list of values to the cell editor."}]},{"type":"element","tagName":"snippet","properties":{},"children":[{"type":"text","value":"\nconst gridOptions = {\n    columnDefs: [\n        {\n            field: 'language',\n            cellEditor: 'agSelectCellEditor',\n            cellEditorParams: {\n                values: ['English', 'Spanish', 'French', 'Portuguese', '(other)'],\n            },\n        }\n    ]\n}\n"}]},{"type":"element","tagName":"div","properties":{"className":["custom-block","note"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We have found the standard HTML Select doesn't have an API that's rich enough to play\nproperly with the grid. When a cell is double clicked to start editing, it is desired that\nthe Select is a) shown and b) opened ready for selection. There is no API to open a browsers\nSelect. For this reason to edit there are two interactions needed 1) double click to start\nediting and 2) single click to open the Select.\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nWe also observed different results while using keyboard navigation to control editing, e.g.\nwhile using "},{"type":"element","tagName":"kbd","properties":{},"children":[{"type":"text","value":"Enter"}]},{"type":"text","value":" to start editing. Some browsers would open the Select, others would not.\nThis is down to the browser implementation and given there is no API for opening the\nSelect, there is nothing the grid can do.\n"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nIf you are unhappy with the additional click required, we advise you don't depend on the\nbrowsers standard Select (ie avoid "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agSelectCellEditor"}]},{"type":"text","value":" and\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agPopupSelectCellEditor"}]},{"type":"text","value":") and instead use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agRichSelectCellEditor"}]},{"type":"text","value":" or\ncreate your own using a "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/component-cell-editor/"},"children":[{"type":"text","value":"Cell Editor Component"}]},{"type":"text","value":"."}]}]}]},{"type":"element","tagName":"h3","properties":{"id":"agrichselectcelleditor","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#agrichselectcelleditor","ariaLabel":"agrichselectcelleditor 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":"agRichSelectCellEditor"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Available in AG Grid Enterprise only. An alternative to using the browser's "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" popup for dropdowns inside the grid."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agRichSelectCellEditor"}]},{"type":"text","value":" has the following benefits over the browser's "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" popup:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Uses DOM row visualisation so very large lists can be displayed."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Integrates with the grid perfectly, avoiding glitches seen with the standard select."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Uses HTML to render the values: you can provide cell renderers to customise what each value looks like."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"FuzzySearch of values: You can type within the RichSelectCellEditor to select a specific record."}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"agRichSelectCellEditor"}]},{"type":"text","value":" takes the following parameters:"}]},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"values"}]},{"type":"text","value":": List of values to be selected from."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellHeight"}]},{"type":"text","value":": The row height, in pixels, of each value."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"formatValue"}]},{"type":"text","value":": A callback function that allows you to change the displayed value for simple data."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"cellRenderer"}]},{"type":"text","value":": The cell renderer to use to render each value. Cell renderers are useful for rendering rich HTML values, or when processing complex data. See "},{"type":"element","tagName":"a","properties":{"href":"/archive/26.0.0/component-cell-renderer/"},"children":[{"type":"text","value":"Cell Rendering Components"}]},{"type":"text","value":"\nfor creating custom cell renderers."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"searchDebounceDelay (Default: 300)"}]},{"type":"text","value":": The value in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ms"}]},{"type":"text","value":" for the fuzzy search debounce delay."}]},{"type":"text","value":"\n"}]}]},"frontmatter":{"title":"Provided Cell Editors","version":null,"enterprise":null,"description":null,"rootPage":null},"headings":[{"id":"agtextcelleditor--agpopuptextcelleditor","depth":3,"value":"agTextCellEditor / agPopupTextCellEditor"},{"id":"aglargetextcelleditor","depth":3,"value":"agLargeTextCellEditor"},{"id":"agselectcelleditor--agpopupselectcelleditor","depth":3,"value":"agSelectCellEditor / agPopupSelectCellEditor"},{"id":"agrichselectcelleditor","depth":3,"value":"agRichSelectCellEditor"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"javascript","srcPath":"/provided-cell-editors","pageName":"provided-cell-editors"}},"staticQueryHashes":["1766026005","3577950178","3666212512"]}