{
"componentChunkName": "component---src-templates-doc-page-jsx",
"path": "/vue-data-grid/vue2/",
"result": {"data":{"markdownRemark":{"htmlAst":{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"style","properties":{},"children":[{"type":"text","value":"\n .gatsby-resp-image-wrapper {\n margin-left: 0 !important;\n margin-right: 0 !important;\n margin-bottom: 1rem;\n }\n .gatsby-resp-image-image {\n box-shadow: none !important;\n }\n\n .code-tab pre {\n margin-top: 0;\n }\n\n .code-tab .nav-item {\n margin-bottom: 0 !important;\n }\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"AG Grid is the industry standard for Vue Enterprise Applications. Developers using AG Grid\nare building applications that would not be possible if AG Grid did not exist."}]},{"type":"element","tagName":"section","properties":{"className":["code-tab","mb-3"]},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["card"]},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["card-header"]},"children":[{"type":"text","value":"Quick Look Code Example"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["card-body"]},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{"className":["nav","nav-tabs"]},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{"className":["nav-item"]},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"a","properties":{"className":["nav-link","active"],"id":"component-tab","dataToggle":"tab","href":"#component","role":"tab","ariaControls":["component"],"ariaSelected":"true"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"App.vue"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{"className":["nav-item"]},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"a","properties":{"className":["nav-link"],"id":"template-tab","dataToggle":"tab","href":"#template","role":"tab","ariaControls":["template"],"ariaSelected":"false"},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"index.js"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["tab-content"]},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["tab-pane","show","active"],"id":"component","role":"tabpanel","ariaLabelledBy":["component-tab"]},"children":[{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"template"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","plain-text"]},"children":[{"type":"text","value":"\n "}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"ag-grid-vue"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","style-attr"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"style"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"element","tagName":"span","properties":{"className":["token","style","language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 500px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 200px"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"ag-theme-alpine"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":":columnDefs"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"columnDefs"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":":rowData"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"rowData"},{"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","plain-text"]},"children":[{"type":"text","value":"\n "}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"element","tagName":"span","properties":{"className":["token","plain-text"]},"children":[{"type":"text","value":"\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"script"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","plain-text"]},"children":[{"type":"text","value":"\nimport \"ag-grid-community/styles/ag-grid.css\";\nimport \"ag-grid-community/styles/ag-theme-alpine.css\";\nimport { AgGridVue } from \"ag-grid-vue\";\n\nexport default {\n name: \"App\",\n data() {\n return {\n columnDefs: null,\n rowData: null,\n };\n },\n components: {\n AgGridVue,\n },\n beforeMount() {\n this.columnDefs = [\n { field: \"make\" },\n { field: \"model\" },\n { field: \"price\" },\n ];\n\n this.rowData = [\n { make: \"Toyota\", model: \"Celica\", price: 35000 },\n { make: \"Ford\", model: \"Mondeo\", price: 32000 },\n { make: \"Porsche\", model: \"Boxster\", price: 72000 },\n ];\n },\n};\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["tab-pane"],"id":"template","role":"tabpanel","ariaLabelledBy":["template-tab"]},"children":[{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"jsx"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-jsx"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" Vue "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'vue'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" App "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'./app'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"new"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","class-name"]},"children":[{"type":"text","value":"Vue"}]},{"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 el"},{"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":"'#root'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"render"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"h"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"h"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"App"},{"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":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["text-right"],"style":"margin-top: -1.5rem;"},"children":[{"type":"element","tagName":"a","properties":{"className":["btn","btn-dark","mb-2","mr-3"],"href":"https://codesandbox.io/s/ag-grid-vue-example-xu6c4?file=/src/App.vue","target":"_blank"},"children":[{"type":"text","value":"\n Open in CodeSandbox\n"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"video-section","properties":{"id":"eW3qCti1lsA","title":"Getting Started Video Tutorial"},"children":[{"type":"text","value":"\n In this article, we will walk you through the necessary steps to add AG Grid\n (both "},{"type":"element","tagName":"a","properties":{"href":"../licensing/"},"children":[{"type":"text","value":"Community and Enterprise"}]},{"type":"text","value":" are covered)\n to an existing Vue project, configure some of the essential features of it.\n We will show you some of the fundamentals of the grid (passing properties, using the API, etc).\n As a bonus, we will also tweak the grid's visual appearance using Sass variables.\n"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]}]},{"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 offer two versions of Vue support - one for Vue 2 and one for Vue 3. The only difference\nin use is how you import the dependency:"}]},{"type":"text","value":"\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":"Version"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Package Imports"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Module Imports"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Vue 2"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"ag-grid-vue"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"@ag-grid-community/vue"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Vue 3"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"ag-grid-vue3"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"@ag-grid-community/vue3"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you unsure what import type to use you should use the package import type\n(i.e. "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-vue"}]},{"type":"text","value":"/ "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-vue3"}]},{"type":"text","value":")."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For more information on import types please refer to the documentation "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/modules/"},"children":[{"type":"text","value":"here."}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This tutorial, as well as ll of our examples, use Vue 2 by default."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For the Vue 3 version of this tutorial please see the documentation "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/getting-started/"},"children":[{"type":"text","value":"here."}]}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"add-ag-grid-to-your-project","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#add-ag-grid-to-your-project","ariaLabel":"add ag grid to your project 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":"Add AG Grid to Your Project"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"For the purposes of this tutorial, we are going to scaffold a Vue app with\n"},{"type":"element","tagName":"a","properties":{"href":"https://cli.vuejs.org/"},"children":[{"type":"text","value":"Vue CLI"}]},{"type":"text","value":". Don't worry if your project has a different configuration.\nAg-Grid and its Vue wrapper are distributed as NPM packages, which should work with any common\nVue project module bundler setup. Let's follow the "},{"type":"element","tagName":"a","properties":{"href":"https://cli.vuejs.org/"},"children":[{"type":"text","value":"Vue CLI instructions"}]},{"type":"text","value":" -\nrun the following in your terminal:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"text","value":"npx -p @vue/cli vue create my-project"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When prompted choose \"Manually select features\":"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"Vue CLI v5.0.4\n? Please pick a preset:\n Default "},{"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":"Vue "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" babel, eslint"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n Default "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"Vue "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"3"}]},{"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":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"Vue "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"3"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":" babel, eslint"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n❯ Manually "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" features"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next, select "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Babel"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"CSS Pre-processors"}]},{"type":"text","value":" (we've also deselected "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Linter"}]},{"type":"text","value":" here, but\nthis is optional):"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"Vue CLI v5.0.4\n? Please pick a preset: Manually "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" features\n? Check the features needed "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" your project:\n ◉ Babel\n ◯ TypeScript\n ◯ Progressive Web App "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"PWA"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" Support\n ◯ Router\n ◯ Vuex\n❯ ◉ CSS Pre-processors\n ◯ Linter / Formatter\n ◯ Unit Testing\n ◯ E2E Testing"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Select version "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"2.x"}]},{"type":"text","value":" when prompted:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"Vue CLI v5.0.4\n? Please pick a preset: Manually "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" features\n? Check the features needed "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" your project: Choose Vue version, Babel, CSS Pre-processors\n? Choose a version of Vue.js that you want to start the project with "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"Use arrow keys"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n❯ "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"text","value":".x\n "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"3"}]},{"type":"text","value":".x"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next select "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"Sass/SCSS (with dart-sass)"}]},{"type":"text","value":" as the CSS Pre-processor:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"Vue CLI v5.0.4\n? Please pick a preset: Manually "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" features\n? Check the features needed "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" your project: Choose Vue version, Babel, CSS Pre-processors\n? Choose a version of Vue.js that you want to start the project with "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"text","value":".x\n? Pick a CSS pre-processor "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"PostCSS, Autoprefixer and CSS Modules are supported by default"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":":\n❯ Sass/SCSS "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"with dart-sass"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n Less\n Stylus"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now choose where to store the configuration data - we've opted for "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"dedicated config files"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"Vue CLI v5.0.4\n? Please pick a preset: Manually "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" features\n? Check the features needed "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" your project: Choose Vue version, Babel, CSS Pre-processors\n? Choose a version of Vue.js that you want to start the project with "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"text","value":".x\n? Pick a CSS pre-processor "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"PostCSS, Autoprefixer and CSS Modules are supported by default"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":": Sass/SCSS "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"with dart-sass"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n? Where "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"do"}]},{"type":"text","value":" you prefer placing config "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" Babel, ESLint, etc.? "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"Use arrow keys"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n❯ In dedicated config files\n In package.json"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally you can choose to save this configuration for all future projects - what you choose here will depend on your development setup & standards, so\nfor the purposes of this tutorial we'll select "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"No"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"Vue CLI v5.0.4\n? Please pick a preset: Manually "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"select"}]},{"type":"text","value":" features\n? Check the features needed "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" your project: Choose Vue version, Babel, CSS Pre-processors\n? Choose a version of Vue.js that you want to start the project with "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"text","value":".x\n? Pick a CSS pre-processor "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"PostCSS, Autoprefixer and CSS Modules are supported by default"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":": Sass/SCSS "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"with dart-sass"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n? Where "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"do"}]},{"type":"text","value":" you prefer placing config "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" Babel, ESLint, etc.? In dedicated config files\n? Save this as a preset "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"type":"text","value":" future projects? "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"y/N"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" N"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After a few seconds the newly created "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"my-project"}]},{"type":"text","value":" will be ready - let's start our application:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","builtin","class-name"]},"children":[{"type":"text","value":"cd"}]},{"type":"text","value":" my-project\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" run serve"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If everything goes well, "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"npm run serve"}]},{"type":"text","value":" has started the web server. You can open the\ndefault app at "},{"type":"element","tagName":"a","properties":{"href":"http://localhost:8080","target":"_blank"},"children":[{"type":"text","value":"localhost:8080"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Next let's add the AG Grid NPM packages. Run the following command in\n"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"my-project"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"install"}]},{"type":"text","value":" --save ag-grid-community ag-grid-vue vue-property-decorator@^8.0.0"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After a few seconds of waiting, you should be good to go. Let's get to the actual coding!\nAs a first step, let's add the AG Grid styles - replace the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"style"}]},{"type":"text","value":" block in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/App.vue"}]},{"type":"text","value":" with the follow:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"text","value":""}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The code above imports the grid \"structure\" stylesheet ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid.css"}]},{"type":"text","value":"), and one of the\navailable grid themes: ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-theme-alpine.css"}]},{"type":"text","value":"). AG Grid ships several different themes - pick one that\nmatches your project design."}]},{"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":"In a later section we documentation on how you can "},{"type":"element","tagName":"a","properties":{"href":"#customise-the-theme-look-2"},"children":[{"type":"text","value":"Customise the Theme Look"}]},{"type":"text","value":"\nusing SCSS, which is our recommended approach."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As this will be a simple example we can delete the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/components"}]},{"type":"text","value":" directory - our example\napplication will live in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/App.vue"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's add the component definition to our template. Edit "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"app/App.vue"}]},{"type":"text","value":" and replace the scaffold code:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"html"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-html"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"template"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":">"}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"ag-grid-vue"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","style-attr"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":"style"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"element","tagName":"span","properties":{"className":["token","style","language-css"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"width"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 500px"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","property"]},"children":[{"type":"text","value":"height"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 500px"},{"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","attr-name"]},"children":[{"type":"text","value":"class"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"ag-theme-alpine"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":":columnDefs"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"columnDefs"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","attr-name"]},"children":[{"type":"text","value":":rowData"}]},{"type":"element","tagName":"span","properties":{"className":["token","attr-value"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation","attr-equals"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"\""}]},{"type":"text","value":"rowData"},{"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","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","tag"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":""}]}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"This is the ag-grid component definition, with two property bindings - "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowData"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnDefs"}]},{"type":"text","value":".\nThe component also accepts the standard DOM "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"style"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"class"}]},{"type":"text","value":". We have set the class to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-theme-alpine"}]},{"type":"text","value":",\nwhich defines the grid theme. As you may have already noticed, the CSS class matches the name of CSS file\nwe imported earlier."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now let's replace the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"script"}]},{"type":"text","value":" section of"},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/App.vue"}]},{"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":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"script"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" AgGridVue "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"from"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"ag-grid-vue\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"default"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n name"},{"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":"\"App\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"data"}]},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"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","keyword"]},"children":[{"type":"text","value":"null"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n rowData"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"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 "},{"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 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 AgGridVue"},{"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 "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"beforeMount"}]},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"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":" 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":"\"make\""}]},{"type":"text","value":" "},{"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":"text","value":" 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":"\"model\""}]},{"type":"text","value":" "},{"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":"text","value":" 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":"\"price\""}]},{"type":"text","value":" "},{"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","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"rowData "},{"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":" make"},{"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":"\"Toyota\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" model"},{"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":"\"Celica\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" price"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"35000"}]},{"type":"text","value":" "},{"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":"text","value":" make"},{"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":"\"Ford\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" model"},{"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":"\"Mondeo\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" price"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"32000"}]},{"type":"text","value":" "},{"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":"text","value":" make"},{"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":"\"Porsche\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" model"},{"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":"\"Boxster\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" price"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"72000"}]},{"type":"text","value":" "},{"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 "},{"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"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"script"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"style lang"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"scss\""}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~ag-grid-community/styles/ag-grid.css\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n @"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"~ag-grid-community/styles/ag-theme-alpine.css\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"/"}]},{"type":"text","value":"style"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The code above presents two essential configuration properties of the grid -\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/column-definitions/"},"children":[{"type":"text","value":"the column definitions"}]},{"type":"text","value":" ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnDefs"}]},{"type":"text","value":") and the data ("},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowData"}]},{"type":"text","value":").\nIn our case, the column definitions contain three columns; column entry specifies the header\nlabel and the data field to be displayed in the body of the table."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, note that we've imported the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-vue"}]},{"type":"text","value":" component - this is actual component that will\nprovide the AG Grid functionality."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If everything works as expected, you should see a simple grid like the one on the screenshot:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 504px; "},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 36.50000000000001%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABA0lEQVQoz21QCW6EMAzk/48s13K0bCAh9yZhKlsFLdpGGlnjccZHtUmJYRixaw3vPZxzF4grpdD3D0ipPvUQQP+naWJurUO1bRvatoPWBiEE/nQixAipFL7qGlJKxBhvOnEyfAzD1awKIeJnWbDvGuU4kHNGzoVjKQe8D1iWJ0fi7/pxHGwyjhO0MUg5o4rxBSFWGGu5oJRygThNIYRgw/90GugpBG+XUka17zumaeaOKaUbKEenaJoGwzh+6GRKk9V1A/J5vRIq6kxJ5zwX5BO58Ip0R601x/KXv+khYl033oQnNNbxUef5m1c4QcX0jDFo2o5PQo/y7zqt2vU9rHPc6BfPtR9ULv44rwAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"AG Grid hello world","title":"AG Grid hello world","src":"/archive/28.2.1/static/04ecf56bc88e2f411f4988cb558ad0be/7f322/step1.png","srcSet":["/archive/28.2.1/static/04ecf56bc88e2f411f4988cb558ad0be/56d15/step1.png 200w","/archive/28.2.1/static/04ecf56bc88e2f411f4988cb558ad0be/d9f49/step1.png 400w","/archive/28.2.1/static/04ecf56bc88e2f411f4988cb558ad0be/7f322/step1.png 504w"],"sizes":["(max-width:","504px)","100vw,","504px"],"style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy","decoding":"async"},"children":[]},{"type":"text","value":"\n "}]}]},{"type":"element","tagName":"h2","properties":{"id":"enable-sorting-and-filtering","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enable-sorting-and-filtering","ariaLabel":"enable sorting and filtering 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":"Enable Sorting And Filtering"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"So far, so good. But wouldn't it be nice to be able to sort the data to help us see which car\nis the least/most expensive? Well, enabling sorting in AG Grid is actually quite simple -\nall you need to do is set the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortable"}]},{"type":"text","value":" property to the column definitions."}]},{"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":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"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":" 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":"'make'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"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":"text","value":" 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":"'model'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"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":"text","value":" 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":"'price'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"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":"p","properties":{},"children":[{"type":"text","value":"After adding the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"sortable"}]},{"type":"text","value":" property you should be able to sort the grid by clicking on the column headers.\nClicking on a header toggles through ascending, descending and no-sort."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Our application doesn't have too many rows, so it's fairly easy to find data. But it's easy to\nimagine how a real-world application may have hundreds (or even hundreds of thousands!) of rows,\nwith many columns. In a data set like this "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/filtering/"},"children":[{"type":"text","value":"filtering"}]},{"type":"text","value":"\nis your friend."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As with sorting, enabling filtering is as easy as setting the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"filter"}]},{"type":"text","value":" property:"}]},{"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":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"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":" 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":"'make'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"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":"text","value":" 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":"'model'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"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":"text","value":" 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":"'price'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"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":"p","properties":{},"children":[{"type":"text","value":"With this property set, the grid will display a small column menu icon when you hover the header.\nPressing it will display a popup with a filtering UI which lets you choose the kind of filter and\nthe text that you want to filter by."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 502px; "},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 36%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABK0lEQVQozzWRiW6EMBBD+f9/LKuyUFblzD2QEFceKFIUJY48z6aZlxVd98Y0zQghIsZ7hRAQYsS6bmjbF5ZlVd17f2shIqWk+rvvn7uAZjcGfT9g2zaICJKI7j4EOOfV6KttVU9J4H2AdU6HHscBay3Gz0fNY0po+GCeF9RacV3XsypEDpC+H0b4EHFV4MwFMQmMsci5oFaoEQmdcyjlQkMiHnLOasbLelWEdOA1Lph2D5MybMpwUmClYPWC8zwVgpTbvkOOQ4c0nPbddeiHAaUUNeZOkmHa8bt5mJjVZHWCxQk2d8clAHtjx4x+5oyG0YwxGpFRyxObptyZYFlX7Y/DSPafhoQkU13kJqQR6Yy14EdT7ZMFAfrwZxwRY9IztbvvR9cOB/1ZHPIHCisddFuhCUkAAAAASUVORK5CYII='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"AG Grid sorting and filtering","title":"AG Grid sorting and filtering","src":"/archive/28.2.1/static/2d7d5db4f1273eba0d5d53acc4d4576e/c1d3e/step2.png","srcSet":["/archive/28.2.1/static/2d7d5db4f1273eba0d5d53acc4d4576e/56d15/step2.png 200w","/archive/28.2.1/static/2d7d5db4f1273eba0d5d53acc4d4576e/d9f49/step2.png 400w","/archive/28.2.1/static/2d7d5db4f1273eba0d5d53acc4d4576e/c1d3e/step2.png 502w"],"sizes":["(max-width:","502px)","100vw,","502px"],"style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy","decoding":"async"},"children":[]},{"type":"text","value":"\n "}]}]},{"type":"element","tagName":"h2","properties":{"id":"fetch-remote-data","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#fetch-remote-data","ariaLabel":"fetch remote data 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":"Fetch Remote Data"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Displaying hard-coded data in JavaScript is not going to get us very far. In the real world, most of\nthe time, we are dealing with data that resides on a remote server. Thanks to Vue, implementing this\nis actually quite simple. Notice that the actual data fetching is performed outside of the grid\ncomponent - We are using the HTML5 "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"fetch"}]},{"type":"text","value":" API."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, let's remove the hard-coded data and fetch it from a remote server. Edit the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/App.vue"}]},{"type":"text","value":" and\nadd the following fetch statement:"}]},{"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":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"beforeMount"}]},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"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":" 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":"'make'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"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":"text","value":" 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":"'model'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":" "},{"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":"text","value":" 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":"'price'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sortable"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" filter"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"true"}]},{"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","function"]},"children":[{"type":"text","value":"fetch"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'https://www.ag-grid.com/example-assets/small-row-data.json'"}]},{"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","function"]},"children":[{"type":"text","value":"then"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"result"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" result"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"json"}]},{"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":"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","function"]},"children":[{"type":"text","value":"then"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"rowData"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"this"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"rowData "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" rowData"},{"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"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The remote data is the same as the one we initially had, so you should not notice any actual\nchanges to the grid. However, you will see an additional HTTP request performed if you open\nyour developer tools."}]},{"type":"element","tagName":"h2","properties":{"id":"enable-selection","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#enable-selection","ariaLabel":"enable selection 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":"Enable Selection"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Being a programmer is a hectic job - just when we thought that we are done with our assignment, the\nmanager shows up with a fresh set of requirements! It turned out that we need to allow the user to\nselect certain rows from the grid and to mark them as flagged in the system. We will leave the flag\ntoggle state and persistence to the backend team. On our side, we should enable the selection and,\nafterwards, to obtain the selected records and pass them with an API call to a remote service endpoint."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Fortunately the above task is quite simple with AG Grid. As you may have already guessed, it is\njust a matter of adding and changing couple of properties."}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"template>\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/template>\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"script>\n"}]},{"type":"text","value":"import { AgGridVue } from \"ag-grid-vue\";\n\nexport default {\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"name: \"App\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"data() {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" return {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" columnDefs: null,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" rowData: null,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" };\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"},\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"components: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" AgGridVue,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"},\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"beforeMount() {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" this.columnDefs = [\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" { field: 'make', sortable: true, filter: true, checkboxSelection: true },\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" { field: 'model', sortable: true, filter: true },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" { field: 'price', sortable: true, filter: true }\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" ];\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" fetch('https://www.ag-grid.com/example-assets/small-row-data.json')\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" .then(result => result.json())\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" .then(rowData => this.rowData = rowData);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"},\n"}]},{"type":"text","value":"};\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/script>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"style lang=\"scss\">\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"@import \"~ag-grid-community/styles/ag-grid.css\";\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"@import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/style>"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We've enabled "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/row-selection/#example-multiple-row-selection"},"children":[{"type":"text","value":"multiple row selection"}]},{"type":"text","value":" by adding "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowSelection=\"multiple\""}]},{"type":"text","value":", and we've\nalso added a checkbox to the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"make"}]},{"type":"text","value":" column with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"checkboxSelection: true"}]},{"type":"text","value":"."}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 522px; "},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 37%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAYAAAAIy204AAAACXBIWXMAAAsTAAALEwEAmpwYAAABYElEQVQoz1WMW0/bQBBG/f//By99pi0UpYGk0DeoooDkCmKX2K3v69gbey+2D8oSWrrS0cx+Z2Y8KSVRtEW2DUYrtOpd3cvW9bWonO/28q9/wyhFliYIUTlnjMHLRYu/eSapWoTUlE1P1SqSsqHYdWzTCj+IyIR0+cG/ZxOlRGlF2Sg6ZfDmT4qT9cDZXczHHynL0LDYaJaB4VtomfkNp7e/uXpSLALDItCvHGfOVjmntzHzR0XaWLxloPiwVsweKma+ZBlaN/h28OtPyedVzuVj959zhJYvD4LzdcnlRr8evAo0JyvN/D7jOjR8f7Zc/zLHfmDu7/h0F3NxX3BzdDcH76rlYp1zvkpYBpqstXiN7BHNnjiriNOSvR7ozESnR5SFopZs/+S0vaU/5GZ8x0RS1Me9EWMHPKM11hhqIRBVxTSOwATTxOH1XUdR5AzWur/Lp39eypbdrmaaRoZh5AUTegqsa3fz1gAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Vue AG Grid Selection","title":"Vue AG Grid Selection","src":"/archive/28.2.1/static/655da51a8e083519ed74d21acf3b6dd5/d15a3/vue-grid-1.png","srcSet":["/archive/28.2.1/static/655da51a8e083519ed74d21acf3b6dd5/56d15/vue-grid-1.png 200w","/archive/28.2.1/static/655da51a8e083519ed74d21acf3b6dd5/d9f49/vue-grid-1.png 400w","/archive/28.2.1/static/655da51a8e083519ed74d21acf3b6dd5/d15a3/vue-grid-1.png 522w"],"sizes":["(max-width:","522px)","100vw,","522px"],"style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy","decoding":"async"},"children":[]},{"type":"text","value":"\n "}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Great! Now the first column contains a checkbox that, when clicked, selects the row. The only thing\nwe have to add is a button that gets the selected data and sends it to the server. To do this, we are\ngoing to use the "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/grid-api/"},"children":[{"type":"text","value":"AG Grid API"}]},{"type":"text","value":" - we will store a reference to both the grid and\ncolumn API's in the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"gridReady"}]},{"type":"text","value":" event"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"To test this we'll add a button that gets the selected data and sends it to the server.\nLet's go ahead and make these changes:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"template>\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"
\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/template>\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"script>\n"}]},{"type":"text","value":"import { AgGridVue } from \"ag-grid-vue\";\n\nexport default {\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"name: \"App\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"data() {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" return {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" columnDefs: null,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" rowData: null,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" gridApi: null,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" columnApi: null\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" };\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"},\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"components: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" AgGridVue,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"},\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"beforeMount() {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" this.columnDefs = [\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" { field: 'make', sortable: true, filter: true, checkboxSelection: true },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" { field: 'model', sortable: true, filter: true },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" { field: 'price', sortable: true, filter: true }\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" ];\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" fetch('https://www.ag-grid.com/example-assets/small-row-data.json')\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" .then(result => result.json())\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" .then(rowData => this.rowData = rowData);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"},\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" methods: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" onGridReady(params) {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" this.gridApi = params.api;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" this.columnApi = params.columnApi;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" getSelectedRows() {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const selectedNodes = this.gridApi.getSelectedNodes();\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const selectedData = selectedNodes.map( node => node.data );\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" const selectedDataStringPresentation = selectedData.map( node => `${node.make} ${node.model}`).join(', ');\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" alert(`Selected nodes: ${selectedDataStringPresentation}`);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" }\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" },\n"}]},{"type":"text","value":"};\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/script>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"style lang=\"scss\">\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"@import \"~ag-grid-community/styles/ag-grid.css\";\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"@import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/style>"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Well, we cheated a bit. Calling "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"alert"}]},{"type":"text","value":" is not exactly a call to our backend. Hopefully\nyou will forgive us this shortcut for the sake of keeping the article short and simple.\nOf course, you can substitute that bit with a real-world application logic after you are\ndone with the tutorial."}]},{"type":"element","tagName":"h2","properties":{"id":"grouping-enterprise","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#grouping-enterprise","ariaLabel":"grouping enterprise 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":"Grouping (enterprise)"}]},{"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":"Grouping is a feature exclusive to AG Grid Enterprise. You are free to trial AG Grid Enterprise\nto see what you think. You only need to get in touch if you want to start using AG Grid Enterprise\nin a project intended for production."}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In addition to filtering and sorting, "},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/grouping/"},"children":[{"type":"text","value":"grouping"}]},{"type":"text","value":" is another effective way for the user\nto make sense out of large amounts of data."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Our current data set is pretty small so let's switch to a larger one:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-sign","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" fetch('https://www.ag-grid.com/example-assets/small-row-data.json')\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" fetch('https://www.ag-grid.com/example-assets/row-data.json')"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Let's enable the enterprise features of ag-grid. Install the additional package:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"bash"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-bash"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"npm"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"install"}]},{"type":"text","value":" --save ag-grid-enterprise"}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Then, add the import to "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/main.js"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" import Vue from 'vue'\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" import 'ag-grid-enterprise';\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" import App from './App'"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"After restarting the application you should see a message in the console that tells you there is no\nenterprise license key. You can ignore the message as we are trialing. In addition to that,\nthe grid got a few UI improvements - a custom context menu and fancier column menu popup -\nfeel free to look around:"}]},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 506px; "},"children":[{"type":"text","value":"\n "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 104%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAYAAABG1c6oAAAACXBIWXMAAAsTAAALEwEAmpwYAAADV0lEQVQ4y2VUy44bNxCc/z/7CwLk4lsQxBcffAgQR2sDMbALw4/VrqQZzfs9Qw7JeVRQTWnlxAM0KLLIVld1kcH9/QN2uzu8f/83drudxDiOWNcN8zxjWVbwW9cV87z8FMQ3AMvi50FVVXh6fkbbtlBKSbJpmiSMMei6TvCmaWCtfcEYnPPcKQyhtZa1oOsHROcYSmu4ecZkDKbJQPOQMegHj3ddD2OsX/8fnma5zIdhQODMBDdpZGmCLI2xLQ4gic1TtcSSGEaP8N/qQ/ANi7NI4ghaDVJt8FQafMsNHnOF75nCoV1wbFcc2lXGfeXw+dxjX1ocu1XwU7ci7BZE/Ypj4/A16fFcGbTKIvj1weLVhwmv7yL88VXhw0nj7qRwd1T4GE34a9/i7T8HvHs4y/rHUOPt3uD37w5vHmf89nnEL3/u8fpTjUNtERS9QdpOOOYt0s7gYR/hyzHFtzBHNszIeodCrdjHNe4fQ4TliLy3aKYVzbShGBz2cYW40Rgni8CaCUYrDH2HeXZ4PkWIswJhnOKcZDiEZxzDMwY1QRuHbtTSXdGZdpkdyiKHmTSccwhGpTCMI+IklW7RRow8z8UyTV2jaWooNWIchos9jDhiXhYopXE6hWi7TlwQEKR/6rpB03Zo206sMIgfvYXox74f0DQtxlHJGg1NsxPL80I8LAm1nmSS5TnKskLf9yjLEnGSXDYZocLNpMo/pv+uH/EoOmMYRk+ZhubBpm1RVhXqppFgctKhoZM0FZx0OfcVLhL8E0pE7KVCXrc0zeSgsVboXA+QPq9W1/cyF+0uwTnlCqNImPFswCvD7EVZymH/EGxYN99F52bkRSFV8du2TYJ7rpQpD7W11vkKGewSE1JoX6EX3TonErASJrliL7i94UL5+sKQVlEUl2fqRonVH45HofQjxuCcZ/dPT5KUegbsGA/REqySb9q1SlIjXtW1VMD5svrK/LgJAzaT0nkNL7ahHQiwKq+Rf22YMOPzpKeXh3a9aEiZaRXxodZeQ1qD71iWZRJWurzcKCmF6HyWPTfKy3+6TFy6bH7oMjXwr7KTzezufNGQRucfi22c189dEnJ/VdU3H7LcJEnl7vK28DdtkCSJjGmaCiWO13XB4liu6bUAjkz4L4a0SkG/BLo/AAAAAElFTkSuQmCC'); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"AG Grid final","title":"AG Grid final","src":"/archive/28.2.1/static/29b52361357533fc05848db5e65b875a/61db1/step3.png","srcSet":["/archive/28.2.1/static/29b52361357533fc05848db5e65b875a/56d15/step3.png 200w","/archive/28.2.1/static/29b52361357533fc05848db5e65b875a/d9f49/step3.png 400w","/archive/28.2.1/static/29b52361357533fc05848db5e65b875a/61db1/step3.png 506w"],"sizes":["(max-width:","506px)","100vw,","506px"],"style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;","loading":"lazy","decoding":"async"},"children":[]},{"type":"text","value":"\n "}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Now, let's enable grouping! Add an "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" property, bind to it, and update\nthe "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"columnDefs"}]},{"type":"text","value":" with a "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"rowGroup"}]},{"type":"text","value":":"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"diff"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-diff"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"template>\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"
\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/template>\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"script>\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" import {AgGridVue} from \"ag-grid-vue\";\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" export default {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" name: \"App\",\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" data() {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" return {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" columnDefs: null,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" rowData: null,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" gridApi: null,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" columnApi: null,\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" autoGroupColumnDef: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" headerName: 'Model',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" field: 'model',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" cellRenderer: 'agGroupCellRenderer',\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" cellRendererParams: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" checkbox: true\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" }\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" }\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" };\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" components: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" AgGridVue,\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" beforeMount() {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" this.columnDefs = [\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","inserted-sign","inserted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","inserted"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" {field: 'make', sortable: true, filter: true, checkboxSelection: true, rowGroup: true },\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" {field: 'model', sortable: true, filter: true},\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" {field: 'price', sortable: true, filter: true}\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" ];\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" fetch('https://www.ag-grid.com/example-assets/small-row-data.json')\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" .then(result => result.json())\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" .then(rowData => this.rowData = rowData);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" methods: {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" onGridReady(params) {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" this.gridApi = params.api;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" this.columnApi = params.columnApi;\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" getSelectedRows() {\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const selectedNodes = this.gridApi.getSelectedNodes();\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const selectedData = selectedNodes.map(node => node.data);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" const selectedDataStringPresentation = selectedData.map(node => `${node.make} ${node.model}`).join(', ');\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" alert(`Selected nodes: ${selectedDataStringPresentation}`);\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" }\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" },\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" };\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/script>\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"style lang=\"scss\">\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","unchanged"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" @import \"~ag-grid-community/styles/ag-grid.css\";\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":" @import \"~ag-grid-community/styles/ag-theme-alpine.css\";\n"}]},{"type":"element","tagName":"span","properties":{"className":["token","deleted-arrow","deleted"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","prefix","deleted"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":"/style>"}]}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There we go! The grid now groups the data by "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"make"}]},{"type":"text","value":", while listing the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"model"}]},{"type":"text","value":" field value when expanded.\nNotice that grouping works with checkboxes as well - the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"groupSelectsChildren"}]},{"type":"text","value":" property adds a group-level\ncheckbox that selects/deselects all items in the group."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Note that we also removed "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"checkboxSelection: true"}]},{"type":"text","value":" from the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"make"}]},{"type":"text","value":" column definition as the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"autoGroupColumnDef"}]},{"type":"text","value":" definition allows for checkbox selection\nat both the group and leaf level."}]},{"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":"Don't worry if this step feels a bit overwhelming - the grouping feature is very powerful and\nsupports complex interaction scenarios which you might not need initially. The grouping documentation\nsection contains plenty of real-world runnable examples that can get you started for your particular case."}]}]}]},{"type":"element","tagName":"h2","properties":{"id":"customise-the-theme-look","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#customise-the-theme-look","ariaLabel":"customise the theme look 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":"Customise the Theme Look"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The last thing which we are going to do is to change the grid look and feel by modifying some\nof the theme's Sass variables."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By default, AG Grid ships a set of\n"},{"type":"element","tagName":"a","properties":{"href":"/archive/28.2.1/themes/"},"children":[{"type":"text","value":"pre-built theme stylesheets"}]},{"type":"text","value":". If we want to tweak the colors and the fonts of\ntheme, we should add a Sass preprocessor to our project, override the theme variable values,\nand refer the ag-grid Sass files instead of the pre-built stylesheets so that the variable\noverrides are applied."}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"vue cli"}]},{"type":"text","value":" did a lot of for us including providing support for Sass. Let's switch to using\nthe provided AG Grid SCSS files - replace the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"style"}]},{"type":"text","value":" block in "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"src/App.vue"}]},{"type":"text","value":" with:"}]},{"type":"element","tagName":"div","properties":{"className":["gatsby-highlight"],"dataLanguage":"scss"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-scss"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-scss"]},"children":[{"type":"text","value":""}]}]}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If everything is configured correctly, the second row of the grid will be blue. Congratulations!\nYou now know now bend the grid look to your will - there are a few dozens more Sass variables that\nlet you control the font family and size, border color, header background color and even the amount\nof spacing in the cells and columns. "}]},{"type":"element","tagName":"h2","properties":{"id":"summary","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#summary","ariaLabel":"summary 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"}]},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With this tutorial, we managed to accomplish a lot. Starting from the humble beginnings of a\nthree row / column setup, we now have a grid that supports sorting, filtering, binding to remote\ndata, selection and even grouping! While doing so, we learned how to configure the grid, how to\naccess its API object, and how to change the styling of the component."}]}]},"frontmatter":{"title":"Get Started with AG Grid","version":2,"enterprise":null,"description":null},"headings":[{"id":"add-ag-grid-to-your-project","depth":2,"value":"Add AG Grid to Your Project"},{"id":"enable-sorting-and-filtering","depth":2,"value":"Enable Sorting And Filtering"},{"id":"fetch-remote-data","depth":2,"value":"Fetch Remote Data"},{"id":"enable-selection","depth":2,"value":"Enable Selection"},{"id":"grouping-enterprise","depth":2,"value":"Grouping (enterprise)"},{"id":"customise-the-theme-look","depth":2,"value":"Customise the Theme Look"},{"id":"summary","depth":2,"value":"Summary"}]}},"pageContext":{"frameworks":["vue"],"framework":"vue","srcPath":"/vue2","pageName":"vue2"}},
"staticQueryHashes": ["1766026005","699667431","940729948"]}