{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/javascript-data-grid/packages/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"AG Grid "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" are the easiest way to get started with AG Grid, but the trade-off will be a larger overall bundle size if you don't need all of the features within a given package."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"introduction","style":"position:relative;"},"children":[{"type":"text","value":"Introduction"},{"type":"element","tagName":"a","properties":{"href":"#introduction","ariaLabel":"introduction permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"The following artifacts are \""},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":"\" and are designed to work together:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","javascript-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"text","value":"\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":"Package Name"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Contents"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"All Community Features"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"All Enterprise Features"}]}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","angular-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Package Name"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Contents"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"All Community Features"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"All Enterprise Features"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-angular"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Angular Support"}]}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","react-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Package Name"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Contents"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"All Community Features"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"All Enterprise Features"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-react"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"React Support"}]}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","vue-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Package Name"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Contents"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"All Community Features"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"All Enterprise Features"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-vue"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Vue Support"}]}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"When using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" you get all of the code within that package and cannot pick and choose which features you require. Unlike "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/modules/"},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" there is no need to register feature modules with the grid as the packages take care of this for you."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"As a result it is easier to use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" but the trade-off will be that you end up with a larger bundle size if you don't require all the features within a given package."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you do decide to use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" you'll need to specify "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community"}]},{"type":"text","value":" as a minimum dependency:"}]},{"type":"text","value":"\n"},{"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","string"]},"children":[{"type":"text","value":"\"dependencies\""}]},{"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","string"]},"children":[{"type":"text","value":"\"ag-grid-community\""}]},{"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":"\"~29.3.5\""}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//...other dependencies..."}]},{"type":"text","value":"\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":"You can then (optionally) specify "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise"}]},{"type":"text","value":" if you require Enterprise features:"}]},{"type":"text","value":"\n"},{"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":"text","value":"\"dependencies\": {\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":"   \"ag-grid-community\": \"~29.3.5\"\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":"   \"ag-grid-enterprise\": \"~29.3.5\"\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":"   //...other dependencies...\n"}]},{"type":"text","value":"}"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you do require Enterprise features you'll additionally need to import the "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise"}]},{"type":"text","value":" package for it to be included in your application:"}]},{"type":"text","value":"\n"},{"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":"import"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ag-grid-enterprise'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","angular-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, if you're using Angular you'll need to specify "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-angular"}]},{"type":"text","value":" packages:"}]},{"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":"text","value":"\"dependencies\": {\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":"  \"ag-grid-community\": \"~29.3.5\"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"  \"ag-grid-enterprise\": \"~29.3.5\"\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":"   \"ag-grid-angular\": \"~29.3.5\"\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":"  //...other dependencies...\n"}]},{"type":"text","value":"}"}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","react-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, if you're using Reaxt you'll need to specify "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-react"}]},{"type":"text","value":" packages:"}]},{"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":"text","value":"\"dependencies\": {\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":"  \"ag-grid-community\": \"~29.3.5\"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"  \"ag-grid-enterprise\": \"~29.3.5\"\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":"   \"ag-grid-react\": \"~29.3.5\"\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":"  //...other dependencies...\n"}]},{"type":"text","value":"}"}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","vue-only-section"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Finally, if you're using Vue you'll need to specify "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-vue"}]},{"type":"text","value":" packages:"}]},{"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":"text","value":"\"dependencies\": {\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":"  \"ag-grid-community\": \"~29.3.5\"\n"},{"type":"element","tagName":"span","properties":{"className":["token","prefix","unchanged"]},"children":[{"type":"text","value":" "}]},{"type":"text","value":"  \"ag-grid-enterprise\": \"~29.3.5\"\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":"   \"ag-grid-vue\": \"~29.3.5\"\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":"  //...other dependencies...\n"}]},{"type":"text","value":"}"}]}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"example-packages","style":"position:relative;"},"children":[{"type":"text","value":"Example: Packages"},{"type":"element","tagName":"a","properties":{"href":"#example-packages","ariaLabel":"example packages permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you are using packages then check that you select the 'Packages' option from the example runner dropdown as this means the code that you see will be using "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":". This is important as it means any imports will be from "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" enabling correct copy and pasting."}]},{"type":"text","value":"\n"},{"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: 800px; "},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/archive/29.3.5/static/c318c1278fc25794f1fa49bbe3e6a337/5d9a4/package-example-runner.png","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 21.999999999999996%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAYAAACOXx+WAAAACXBIWXMAABYlAAAWJQFJUiTwAAABFUlEQVQY0x2LS0sCUQBG/V21ipaRuxZF/ZAWQctAskWLnlBCQQRFLnxEbiqz1DSkKFqMlKOOY5mPmXHu3BnnBPeDAx8HTmSv4jBzbBA9aTGX0JlPNJg9/GJ6R2Nqt050u8bi1iMr8QfFUrzA8uY9C7FbVtdP2Vjb56hskqyZFOoDIgfJO2KXJbIffTLvPcXFS4fzSoezZ4OrcoPrqk62qHFT1Eg/aeRKdVKVBrn8Gw/5Gp/GEK3do/VnE8mkU7xWSyAdQmEBEwhcQCrn2X3UAgGhJPTHSNdSKpxIhBirRowdfE8Q0b51mkYX8+cXw+ziBxMcVyA8n+HIRm+2cYXHyLKxbIf+YIjebCH9AMuyMYyO+lL6in8BuBbSRefSRAAAAABJRU5ErkJggg=='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"alt":"Example Runner using Packages","title":"Example Runner using Packages","src":"/archive/29.3.5/static/c318c1278fc25794f1fa49bbe3e6a337/78d47/package-example-runner.png","srcSet":["/archive/29.3.5/static/c318c1278fc25794f1fa49bbe3e6a337/56d15/package-example-runner.png 200w","/archive/29.3.5/static/c318c1278fc25794f1fa49bbe3e6a337/d9f49/package-example-runner.png 400w","/archive/29.3.5/static/c318c1278fc25794f1fa49bbe3e6a337/78d47/package-example-runner.png 800w","/archive/29.3.5/static/c318c1278fc25794f1fa49bbe3e6a337/64756/package-example-runner.png 1200w","/archive/29.3.5/static/c318c1278fc25794f1fa49bbe3e6a337/42cbc/package-example-runner.png 1600w","/archive/29.3.5/static/c318c1278fc25794f1fa49bbe3e6a337/5d9a4/package-example-runner.png 1626w"],"sizes":["(max-width:","800px)","100vw,","800px"],"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":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"mixing-packages-and-modules","style":"position:relative;"},"children":[{"type":"text","value":"Mixing "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"modules"}]},{"type":"element","tagName":"a","properties":{"href":"#mixing-packages-and-modules","ariaLabel":"mixing packages and modules permalink","className":["docs-header-icon","after"]},"children":[{"type":"element","tagName":"svg","properties":{"id":"icon","xmlns":"http://www.w3.org/2000/svg","viewBox":"0 0 32 32"},"children":[{"type":"element","tagName":"path","properties":{"d":"M29.25,6.76a6,6,0,0,0-8.5,0l1.42,1.42a4,4,0,1,1,5.67,5.67l-8,8a4,4,0,1,1-5.67-5.66l1.41-1.42-1.41-1.42-1.42,1.42a6,6,0,0,0,0,8.5A6,6,0,0,0,17,25a6,6,0,0,0,4.27-1.76l8-8A6,6,0,0,0,29.25,6.76Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M4.19,24.82a4,4,0,0,1,0-5.67l8-8a4,4,0,0,1,5.67,0A3.94,3.94,0,0,1,19,14a4,4,0,0,1-1.17,2.85L15.71,19l1.42,1.42,2.12-2.12a6,6,0,0,0-8.51-8.51l-8,8a6,6,0,0,0,0,8.51A6,6,0,0,0,7,28a6.07,6.07,0,0,0,4.28-1.76L9.86,24.82A4,4,0,0,1,4.19,24.82Z"},"children":[]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["custom-block","note","warning"]},"children":[{"type":"element","tagName":"div","properties":{"className":["custom-block-body"]},"children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Do "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"not"}]},{"type":"text","value":" mix "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":"! This will result in a large bundle size!"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"It is vitally important that you do not mix packages and modules in the same application as you will end up including AG Grid twice and doubling your bundle size! All modules are scoped by either "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@ag-grid-community/*"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@ag-grid-enterprise/*"}]},{"type":"text","value":" and should not be mixed with the standalone packages of "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community"}]},{"type":"text","value":" and "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise"}]},{"type":"text","value":"."}]},{"type":"text","value":"\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":"Packages"}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"text","value":"Modules"}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-community"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@ag-grid-community/xxxxx"}]}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"ag-grid-enterprise"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"@ag-grid-enterprise/xxxxx"}]}]}]}]}]},{"type":"text","value":"\n"},{"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","string"]},"children":[{"type":"text","value":"\"dependencies\""}]},{"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","string"]},"children":[{"type":"text","value":"\"ag-grid-community\""}]},{"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":"\"~29.3.5\""}]},{"type":"text","value":" "},{"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":" a "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"package"}]},{"type":"text","value":" dependency\n    "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"@ag-grid-enterprise/row-grouping\""}]},{"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":"\"~29.3.5\""}]},{"type":"text","value":"  "},{"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":" a module dependency\n    "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//...other dependencies..."}]},{"type":"text","value":"\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":"Please refer to the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/modules/"},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" documentation if you are concerned with bundle size."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please refer to the "},{"type":"element","tagName":"a","properties":{"href":"/archive/29.3.5/getting-started/"},"children":[{"type":"text","value":"Getting Started"}]},{"type":"text","value":" guides for a walk through on how to install and use these packages from the ground up."}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"AG Grid Packages","version":null,"enterprise":null,"sideMenu":null,"description":null},"headings":[{"id":"introduction","depth":2,"value":"Introduction"},{"id":"example-packages","depth":2,"value":"Example: Packages"},{"id":"mixing-packages-and-modules","depth":2,"value":"Mixing packages and modules"}]}},"pageContext":{"frameworks":["javascript","react","angular","vue"],"framework":"javascript","srcPath":"/packages","pageName":"packages"}},
    "staticQueryHashes": ["1766026005","699667431","940729948"]}