{
    "componentChunkName": "component---src-templates-doc-page-jsx",
    "path": "/vue-data-grid/packages-modules/",
    "result": {"data":{"markdownRemark":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"There are two main ways to add AG Grid to your application depending on your requirements and priorities with respect to bundle size / developer effort. You can install AG Grid by either using our feature complete "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":", or by cherry picking the feature "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" specific to your application's grid requirements. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"which-to-use","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#which-to-use","ariaLabel":"which to use 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":"Which to use?"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/packages/"},"children":[{"type":"text","value":"Packages"}]},{"type":"text","value":" are the easiest way to use AG Grid as every feature is implicitly available. However, this will mean that your application bundle includes every grid feature, some of which are not required by your application and so bloat your bundle size."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"/archive/28.0.0/modules"},"children":[{"type":"text","value":"Modules"}]},{"type":"text","value":" are suitable if bundle size is critical to your application. They enable you to only include the functionality you need resulting in a minimal bundle size at the cost of additional config required to register modules in your application."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you're unsure whether to use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" or "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" then we'd recommend starting with "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"packages"}]},{"type":"text","value":" as every grid feature is available and you do not have to worry about registering modules."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"minimize-bundle-size","style":"position:relative;"},"children":[{"type":"element","tagName":"a","properties":{"href":"#minimize-bundle-size","ariaLabel":"minimize bundle size 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":"Minimize Bundle Size"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"If you want to minimize your bundle size then you should definitely use "},{"type":"element","tagName":"code","properties":{},"children":[{"type":"text","value":"modules"}]},{"type":"text","value":" to only include features that your application requires. "}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["d-flex","justify-content-around"],"style":"height: 20rem;"},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{"className":["d-flex","flex-column"],"style":"max-width: 20rem; min-width: 10rem; height: 20rem; border: 1px solid lightgray; border-radius: 5px; overflow: hidden;"},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"div","properties":{"className":["flex-grow-1","d-flex","justify-content-center","p-4"],"style":"background-color: #fffaf0;"},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"a","properties":{"className":["d-flex","align-items-center"],"href":"../packages/"},"children":[{"type":"element","tagName":"img","properties":{"src":"/archive/28.0.0/4a7a3d79adc4c83617cb397baf487fff/packages.svg","style":"width: 100%; max-width: 6rem;","alt":"Grid Packages Overview"},"children":[]}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"div","properties":{"className":["p-2"],"style":"border-top: 1px solid lightgray; background-color: #f8f9fa; text-align: center;"},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"p","properties":{"className":["mb-0","btn","btn-primary"]},"children":[{"type":"element","tagName":"a","properties":{"href":"../packages/","style":"color: white"},"children":[{"type":"text","value":"Packages Overview"}]}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"div","properties":{"className":["d-flex","flex-column"],"style":"max-width: 20rem; min-width: 10rem; height: 20rem; border: 1px solid lightgray; border-radius: 5px; overflow: hidden;"},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"div","properties":{"className":["flex-grow-1","d-flex","justify-content-center","p-4"],"style":"background-color: #fffaf0;"},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"a","properties":{"className":["d-flex","align-items-center"],"href":"../modules/"},"children":[{"type":"element","tagName":"img","properties":{"src":"/archive/28.0.0/65e7defcf01d73d3ebfa26d80c2b4e50/modules.svg","style":"width: 100%; max-width: 6rem;","alt":"Grid Modules Overview"},"children":[]}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"div","properties":{"className":["p-2"],"style":"border-top: 1px solid lightgray; background-color: #f8f9fa; text-align: center;"},"children":[{"type":"text","value":"\n            "},{"type":"element","tagName":"p","properties":{"className":["mb-0","btn","btn-primary"]},"children":[{"type":"element","tagName":"a","properties":{"href":"../modules/","style":"color: white"},"children":[{"type":"text","value":"Modules Overview"}]}]},{"type":"text","value":"\n        "}]},{"type":"text","value":"\n    "}]},{"type":"text","value":"\n"}]}],"data":{"quirksMode":false}},"frontmatter":{"title":"AG Grid Packages vs Modules","version":null,"enterprise":null,"description":null},"headings":[{"id":"which-to-use","depth":2,"value":"Which to use?"},{"id":"minimize-bundle-size","depth":3,"value":"Minimize Bundle Size"}]}},"pageContext":{"frameworks":["javascript","angular","react","vue"],"framework":"vue","srcPath":"/packages-modules","pageName":"packages-modules"}},
    "staticQueryHashes": ["1766026005","3577950178","699667431"]}