ag-grid-community 32.0.2 → 32.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/README.md +499 -85
  2. package/dist/ag-grid-community.js +5808 -5372
  3. package/dist/ag-grid-community.min.js +1 -1
  4. package/dist/ag-grid-community.min.noStyle.js +1 -1
  5. package/dist/ag-grid-community.noStyle.js +5801 -5365
  6. package/dist/package/main.cjs.js +5790 -5355
  7. package/dist/package/main.cjs.min.js +47 -46
  8. package/dist/package/main.esm.min.mjs +70 -69
  9. package/dist/package/main.esm.mjs +5789 -5354
  10. package/dist/package/package.json +13 -7
  11. package/dist/types/client-side-row-model/clientSideRowModelModule.d.ts +3 -4
  12. package/dist/types/client-side-row-model/version.d.ts +1 -1
  13. package/dist/types/core/alignedGridsModule.d.ts +1 -2
  14. package/dist/types/core/alignedGridsService.d.ts +1 -0
  15. package/dist/types/core/api/apiFunctionService.d.ts +6 -5
  16. package/dist/types/core/api/apiModule.d.ts +10 -11
  17. package/dist/types/core/api/apiUtils.d.ts +1 -1
  18. package/dist/types/core/api/gridApi.d.ts +589 -515
  19. package/dist/types/core/api/gridApiFunctions.d.ts +253 -0
  20. package/dist/types/core/api/sharedApiModule.d.ts +2 -3
  21. package/dist/types/core/columns/columnEventDispatcher.d.ts +4 -3
  22. package/dist/types/core/columns/columnModel.d.ts +5 -2
  23. package/dist/types/core/columns/columnModule.d.ts +2 -3
  24. package/dist/types/core/columns/columnViewportService.d.ts +1 -0
  25. package/dist/types/core/ctrlsService.d.ts +1 -1
  26. package/dist/types/core/dragAndDrop/dragModule.d.ts +1 -2
  27. package/dist/types/core/edit/editModule.d.ts +9 -10
  28. package/dist/types/core/entities/agColumnGroup.d.ts +5 -0
  29. package/dist/types/core/entities/colDef.d.ts +9 -9
  30. package/dist/types/core/entities/gridOptions.d.ts +7 -6
  31. package/dist/types/core/entities/rowNode.d.ts +1 -1
  32. package/dist/types/core/eventService.d.ts +3 -3
  33. package/dist/types/core/eventTypes.d.ts +2 -2
  34. package/dist/types/core/events.d.ts +17 -3
  35. package/dist/types/core/filter/columnFilterService.d.ts +1 -1
  36. package/dist/types/core/filter/filterModule.d.ts +13 -14
  37. package/dist/types/core/filter/provided/providedFilter.d.ts +1 -1
  38. package/dist/types/core/focusService.d.ts +12 -1
  39. package/dist/types/core/gridBodyComp/abstractFakeScrollComp.d.ts +3 -2
  40. package/dist/types/core/gridBodyComp/gridBodyCtrl.d.ts +6 -1
  41. package/dist/types/core/gridBodyComp/gridBodyScrollFeature.d.ts +10 -5
  42. package/dist/types/core/gridBodyComp/rowContainer/rowContainerCtrl.d.ts +5 -3
  43. package/dist/types/core/gridComp/gridCtrl.d.ts +2 -0
  44. package/dist/types/core/gridCoreModule.d.ts +2 -8
  45. package/dist/types/core/gridOptionsService.d.ts +1 -0
  46. package/dist/types/core/headerRendering/cells/abstractCell/abstractHeaderCellCtrl.d.ts +5 -3
  47. package/dist/types/core/headerRendering/cells/column/headerCellCtrl.d.ts +2 -1
  48. package/dist/types/core/headerRendering/cells/columnGroup/headerGroupCellComp.d.ts +1 -0
  49. package/dist/types/core/headerRendering/cells/columnGroup/headerGroupCellCtrl.d.ts +2 -1
  50. package/dist/types/core/headerRendering/gridHeaderCtrl.d.ts +1 -0
  51. package/dist/types/core/headerRendering/rowContainer/headerRowContainerCtrl.d.ts +6 -2
  52. package/dist/types/core/interfaces/IServerSideStore.d.ts +1 -1
  53. package/dist/types/core/interfaces/iAdvancedFilterCtrl.d.ts +5 -1
  54. package/dist/types/core/interfaces/iCallbackParams.d.ts +5 -2
  55. package/dist/types/core/interfaces/iExcelCreator.d.ts +69 -36
  56. package/dist/types/core/interfaces/iModule.d.ts +10 -1
  57. package/dist/types/core/main.d.ts +4 -4
  58. package/dist/types/core/misc/state/stateModule.d.ts +3 -4
  59. package/dist/types/core/pagination/paginationComp.d.ts +5 -4
  60. package/dist/types/core/pagination/paginationModule.d.ts +3 -4
  61. package/dist/types/core/pinnedRowModel/pinnedRowModel.d.ts +11 -9
  62. package/dist/types/core/pinnedRowModel/pinnedRowModule.d.ts +1 -2
  63. package/dist/types/core/rendering/ariaAnnouncementService.d.ts +6 -1
  64. package/dist/types/core/rendering/cell/cellCtrl.d.ts +2 -2
  65. package/dist/types/core/rendering/columnAnimationService.d.ts +1 -0
  66. package/dist/types/core/rendering/columnHoverService.d.ts +1 -0
  67. package/dist/types/core/rendering/overlays/loadingOverlayComponent.d.ts +1 -1
  68. package/dist/types/core/rendering/overlays/noRowsOverlayComponent.d.ts +1 -1
  69. package/dist/types/core/rendering/overlays/overlayModule.d.ts +1 -2
  70. package/dist/types/core/rendering/overlays/overlayService.d.ts +13 -0
  71. package/dist/types/core/rendering/overlays/overlayWrapperComponent.d.ts +6 -1
  72. package/dist/types/core/rendering/renderModule.d.ts +1 -2
  73. package/dist/types/core/rendering/row/rowCtrl.d.ts +2 -3
  74. package/dist/types/core/rendering/rowRenderer.d.ts +1 -0
  75. package/dist/types/core/rowNodeCache/rowNodeBlockModule.d.ts +1 -2
  76. package/dist/types/core/utils/dom.d.ts +1 -1
  77. package/dist/types/core/utils/function.d.ts +1 -1
  78. package/dist/types/core/utils/icon.d.ts +76 -1
  79. package/dist/types/core/validation/apiFunctionValidator.d.ts +0 -1
  80. package/dist/types/core/validation/validationService.d.ts +0 -1
  81. package/dist/types/core/version.d.ts +1 -1
  82. package/dist/types/core/widgets/popupService.d.ts +1 -1
  83. package/dist/types/core/widgets/tooltipStateManager.d.ts +1 -0
  84. package/dist/types/csv-export/csvExportModule.d.ts +3 -4
  85. package/dist/types/csv-export/version.d.ts +1 -1
  86. package/dist/types/infinite-row-model/infiniteRowModel/infiniteRowModel.d.ts +1 -1
  87. package/dist/types/infinite-row-model/infiniteRowModelModule.d.ts +3 -4
  88. package/dist/types/infinite-row-model/version.d.ts +1 -1
  89. package/package.json +13 -7
  90. package/styles/_css-content.scss +122 -74
  91. package/styles/ag-grid-no-native-widgets.css +38 -21
  92. package/styles/ag-grid-no-native-widgets.min.css +3 -3
  93. package/styles/ag-grid.css +38 -21
  94. package/styles/ag-grid.min.css +3 -3
  95. package/styles/ag-theme-alpine-no-font.css +0 -5
  96. package/styles/ag-theme-alpine-no-font.min.css +1 -1
  97. package/styles/ag-theme-alpine.css +0 -5
  98. package/styles/ag-theme-alpine.min.css +1 -1
  99. package/styles/ag-theme-material-no-font.css +23 -6
  100. package/styles/ag-theme-material-no-font.min.css +1 -1
  101. package/styles/ag-theme-material.css +23 -6
  102. package/styles/ag-theme-material.min.css +1 -1
  103. package/styles/ag-theme-quartz-no-font.css +0 -5
  104. package/styles/ag-theme-quartz-no-font.min.css +1 -1
  105. package/styles/ag-theme-quartz.css +0 -5
  106. package/styles/ag-theme-quartz.min.css +1 -1
  107. package/gulpfile.js +0 -34
  108. package/webpackBuild.sh +0 -17
package/README.md CHANGED
@@ -1,125 +1,539 @@
1
- ![AG Grid HTML5 Grid trusted by the community, built for enterprise](./github-banner.png 'AG Grid')
1
+ # JavaScript Data Grid | JavaScript Table
2
+
3
+ <div align="center">
4
+ <picture>
5
+ <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Grid-Logo_Dark-Theme.svg?raw=true"/>
6
+ <source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Grid-Logo_Light-Theme.svg?raw=true"/>
7
+ <img width="100%" alt="AG Grid Logo" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-Grid-Logo_Dark-Theme.svg?raw=true"/>
8
+ </picture>
9
+ <div align="center">
10
+ <h4><a href="https://www.ag-grid.com?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">🌐 Website</a> • <a href="https://www.ag-grid.com/javascript-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">📖 Documentation</a> • <a href="https://www.ag-grid.com/community?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">🏘️ Community</a></h4>
11
+ </div>
12
+ <br>
13
+ <a href="https://github.com/ag-grid/ag-grid/releases">
14
+ <img src="https://img.shields.io/github/v/release/ag-grid/ag-grid?style=for-the-badge" alt="GitHub Release">
15
+ </a>
16
+ <a href="https://www.npmjs.com/package/ag-grid-community">
17
+ <img src="https://img.shields.io/npm/dm/ag-grid-community?style=for-the-badge" alt="NPM Downloads">
18
+ </a>
19
+ <a href="https://github.com/ag-grid/ag-grid">
20
+ <img src="https://img.shields.io/github/stars/ag-grid/ag-grid?style=for-the-badge" alt="GitHub Repo stars">
21
+ </a>
22
+ <a href="https://github.com/ag-grid/ag-grid">
23
+ <img alt="GitHub forks" src="https://img.shields.io/github/forks/ag-grid/ag-grid?style=for-the-badge">
24
+ </a>
25
+ <br><br>
26
+ <a href="https://sonarcloud.io/dashboard?id=ag-grid-community">
27
+ <img src="https://sonarcloud.io/api/project_badges/measure?project=ag-grid-community&metric=alert_status" alt="Quality Gate Status">
28
+ </a>
29
+ <a href="https://npm.io/package/ag-grid-community">
30
+ <img src="https://img.shields.io/npms-io/maintenance-score/ag-grid-community" alt="npms.io Maintenance Score">
31
+ </a>
32
+ <a href="https://github.com/ag-grid/ag-grid/graphs/commit-activity">
33
+ <img src="https://img.shields.io/github/commit-activity/m/ag-grid/ag-grid" alt="GitHub commit activity">
34
+ </a>
35
+ <a href="https://github.com/ag-grid/ag-grid/network/dependents">
36
+ <img src="https://img.shields.io/librariesio/dependents/npm/ag-grid-community" alt="Dependents">
37
+ </a>
38
+ <br><br>
39
+ <!-- START MAIN DESCRIPTION -->
40
+ <p>AG Grid is a <strong>fully-featured</strong> and <strong>highly customizable</strong> JavaScript Data Grid. It delivers <strong>outstanding performance</strong>, has <strong>no third-party dependencies</strong> and comes with support for <strong><a href="https://github.com/ag-grid/ag-grid/tree/latest/packages/ag-grid-react"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/react.svg?raw=true" height="16" width="16" alt="React Logo"> React</a></strong>, <strong><a href="https://github.com/ag-grid/ag-grid/tree/latest/packages/ag-grid-angular"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/angular.svg?raw=true" height="16" width="16" alt="Angular Logo"> Angular</a></strong> and <strong><a href="https://github.com/ag-grid/ag-grid/tree/latest/packages/ag-grid-vue3"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/vue.svg?raw=true" height="16" width="16" alt="Vue Logo"> Vue</a></strong>.</p>
41
+ <!-- END MAIN DESCRIPTION -->
42
+ <br>
43
+ </div>
44
+
45
+ <picture>
46
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/kitchen-sink-demo-light.gif?raw=true" media="(prefers-color-scheme: light)">
47
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/kitchen-sink-demo-dark.gif?raw=true" media="(prefers-color-scheme: dark)">
48
+ <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/kitchen-sink-demo-dark.gif?raw=true" alt="High Performance Demo">
49
+ </picture>
50
+ <div align="right">
51
+ <a href="https://ag-grid.com/example/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github"><br><img alt="Static Badge" src="https://img.shields.io/badge/ag%E2%80%93grid.com-Live%20Demo-blue?style=for-the-badge&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8%2BCg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE4IDIwLjc1SDZDNS4yNzA2NSAyMC43NSA0LjU3MTE4IDIwLjQ2MDMgNC4wNTU0NiAxOS45NDQ1QzMuNTM5NzMgMTkuNDI4OCAzLjI1IDE4LjcyOTMgMy4yNSAxOFY2QzMuMjUgNS4yNzA2NSAzLjUzOTczIDQuNTcxMTggNC4wNTU0NiA0LjA1NTQ2QzQuNTcxMTggMy41Mzk3MyA1LjI3MDY1IDMuMjUgNiAzLjI1SDEyQzEyLjE5ODkgMy4yNSAxMi4zODk3IDMuMzI5MDIgMTIuNTMwMyAzLjQ2OTY3QzEyLjY3MSAzLjYxMDMyIDEyLjc1IDMuODAxMDkgMTIuNzUgNEMxMi43NSA0LjE5ODkxIDEyLjY3MSA0LjM4OTY4IDEyLjUzMDMgNC41MzAzM0MxMi4zODk3IDQuNjcwOTggMTIuMTk4OSA0Ljc1IDEyIDQuNzVINkM1LjY2ODQ4IDQuNzUgNS4zNTA1NCA0Ljg4MTcgNS4xMTYxMiA1LjExNjEyQzQuODgxNyA1LjM1MDU0IDQuNzUgNS42Njg0OCA0Ljc1IDZWMThDNC43NSAxOC4zMzE1IDQuODgxNyAxOC42NDk1IDUuMTE2MTIgMTguODgzOUM1LjM1MDU0IDE5LjExODMgNS42Njg0OCAxOS4yNSA2IDE5LjI1SDE4QzE4LjMzMTUgMTkuMjUgMTguNjQ5NSAxOS4xMTgzIDE4Ljg4MzkgMTguODgzOUMxOS4xMTgzIDE4LjY0OTUgMTkuMjUgMTguMzMxNSAxOS4yNSAxOFYxMkMxOS4yNSAxMS44MDExIDE5LjMyOSAxMS42MTAzIDE5LjQ2OTcgMTEuNDY5N0MxOS42MTAzIDExLjMyOSAxOS44MDExIDExLjI1IDIwIDExLjI1QzIwLjE5ODkgMTEuMjUgMjAuMzg5NyAxMS4zMjkgMjAuNTMwMyAxMS40Njk3QzIwLjY3MSAxMS42MTAzIDIwLjc1IDExLjgwMTEgMjAuNzUgMTJWMThDMjAuNzUgMTguNzI5MyAyMC40NjAzIDE5LjQyODggMTkuOTQ0NSAxOS45NDQ1QzE5LjQyODggMjAuNDYwMyAxOC43MjkzIDIwLjc1IDE4IDIwLjc1WiIgZmlsbD0iI2ZmZmZmZiIvPiA8cGF0aCBkPSJNMjAgOC43NUMxOS44MDE5IDguNzQ3NDEgMTkuNjEyNiA4LjY2NzU2IDE5LjQ3MjUgOC41Mjc0N0MxOS4zMzI0IDguMzg3MzcgMTkuMjUyNiA4LjE5ODExIDE5LjI1IDhWNC43NUgxNkMxNS44MDExIDQuNzUgMTUuNjEwMyA0LjY3MDk4IDE1LjQ2OTcgNC41MzAzM0MxNS4zMjkgNC4zODk2OCAxNS4yNSA0LjE5ODkxIDE1LjI1IDRDMTUuMjUgMy44MDEwOSAxNS4zMjkgMy42MTAzMiAxNS40Njk3IDMuNDY5NjdDMTUuNjEwMyAzLjMyOTAyIDE1LjgwMTEgMy4yNSAxNiAzLjI1SDIwQzIwLjE5ODEgMy4yNTI1OSAyMC4zODc0IDMuMzMyNDQgMjAuNTI3NSAzLjQ3MjUzQzIwLjY2NzYgMy42MTI2MyAyMC43NDc0IDMuODAxODkgMjAuNzUgNFY4QzIwLjc0NzQgOC4xOTgxMSAyMC42Njc2IDguMzg3MzcgMjAuNTI3NSA4LjUyNzQ3QzIwLjM4NzQgOC42Njc1NiAyMC4xOTgxIDguNzQ3NDEgMjAgOC43NVoiIGZpbGw9IiNmZmZmZmYiLz4gPHBhdGggZD0iTTEzLjUgMTEuMjVDMTMuMzA3MSAxMS4yMzUyIDEzLjEyNzYgMTEuMTQ1NSAxMyAxMUMxMi44NzcgMTAuODYyNSAxMi44MDkgMTAuNjg0NSAxMi44MDkgMTAuNUMxMi44MDkgMTAuMzE1NSAxMi44NzcgMTAuMTM3NSAxMyAxMEwxOS41IDMuNUMxOS41Njg3IDMuNDI2MzEgMTkuNjUxNSAzLjM2NzIxIDE5Ljc0MzUgMy4zMjYyMkMxOS44MzU1IDMuMjg1MjMgMTkuOTM0OCAzLjI2MzE5IDIwLjAzNTUgMy4yNjE0MUMyMC4xMzYyIDMuMjU5NjMgMjAuMjM2MiAzLjI3ODE2IDIwLjMyOTYgMy4zMTU4OEMyMC40MjMgMy4zNTM2IDIwLjUwNzggMy40MDk3NCAyMC41NzkgMy40ODA5NkMyMC42NTAzIDMuNTUyMTggMjAuNzA2NCAzLjYzNzAxIDIwLjc0NDEgMy43MzA0QzIwLjc4MTggMy44MjM3OSAyMC44MDA0IDMuOTIzODIgMjAuNzk4NiA0LjAyNDUyQzIwLjc5NjggNC4xMjUyMyAyMC43NzQ4IDQuMjI0NTQgMjAuNzMzOCA0LjMxNjU0QzIwLjY5MjggNC40MDg1NCAyMC42MzM3IDQuNDkxMzQgMjAuNTYgNC41NkwxNCAxMUMxMy44NzI0IDExLjE0NTUgMTMuNjkyOSAxMS4yMzUyIDEzLjUgMTEuMjVaIiBmaWxsPSIjZmZmZmZmIi8%2BIDwvZz4KDTwvc3ZnPg%3D%3D">
52
+ </a>
53
+ </div>
54
+
55
+ ## 📖 Overview
56
+
57
+ <details>
58
+ <summary><strong>Table of Contents</strong></summary>
59
+
60
+ - [📖 Overview](#-overview)
61
+ - [Features](#features)
62
+ - [Examples](#examples)
63
+ - [⚡️ Quick Start](#️-quick-start)
64
+ - [Installation](#installation)
65
+ - [Setup](#setup)
66
+ - [Seed Projects](#seed-projects)
67
+ - [🛠️ Customisations](#️-customisations)
68
+ - [Custom Components](#custom-components)
69
+ - [Themes](#themes)
70
+ - [Custom Themes](#custom-themes)
71
+ - [🌍 Community](#-community)
72
+ - [Tools \& Extensions](#tools--extensions)
73
+ - [Showcase](#showcase)
74
+ - [Stargazers](#stargazers)
75
+ - [🤝 Support](#-support)
76
+ - [Enterprise Support](#enterprise-support)
77
+ - [Bug Reports](#bug-reports)
78
+ - [Questions](#questions)
79
+ - [Contributing](#contributing)
80
+ - [⚠️ License](#️-license)
81
+
82
+ </details>
83
+
84
+ AG Grid is available in two versions: Community & Enterprise.
85
+
86
+ - `ag-grid-community` is free, available under the MIT license, and comes with all of the core features expected from a JavaScript Data Grid, including [Sorting](https://www.ag-grid.com/javascript-data-grid/row-sorting/#sorting?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Filtering](https://www.ag-grid.com/javascript-data-grid/filtering/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Pagination](https://www.ag-grid.com/javascript-data-grid/row-pagination/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Editing](https://www.ag-grid.com/javascript-data-grid/cell-editing/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Custom Components](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Theming](https://www.ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) and more.
87
+ - `ag-grid-enterprise` is available under a commercial license and comes with advanced features, like [Integrated Charting](https://www.ag-grid.com/javascript-data-grid/integrated-charts/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Row Grouping](https://www.ag-grid.com/javascript-data-grid/grouping/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Aggregation](https://www.ag-grid.com/javascript-data-grid/grouping/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Pivoting](https://www.ag-grid.com/javascript-data-grid/pivoting/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Master/Detail](https://www.ag-grid.com/javascript-data-grid/master-detail/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), [Server-side Row Model](https://www.ag-grid.com/javascript-data-grid/server-side-model/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), and [Exporting](https://www.ag-grid.com/javascript-data-grid/excel-export/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) in addition to dedicated support from our Engineering team.
88
+
89
+ ### Features
90
+
91
+ | Feature | AG Grid Community | AG Grid Enterprise |
92
+ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ------------------ |
93
+ | [Filtering](https://www.ag-grid.com/javascript-data-grid/filtering/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ (Advanced) |
94
+ | [Sorting](https://www.ag-grid.com/javascript-data-grid/row-sorting/#sorting?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
95
+ | [Cell Editing](https://www.ag-grid.com/javascript-data-grid/cell-editing/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
96
+ | [CSV Export](https://www.ag-grid.com/javascript-data-grid/csv-export/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
97
+ | [Drag & Drop](https://www.ag-grid.com/javascript-data-grid/drag-and-drop/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
98
+ | [Themes and Styling](https://www.ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
99
+ | [Selection](https://www.ag-grid.com/javascript-data-grid/row-selection/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
100
+ | [Accessibility](https://www.ag-grid.com/javascript-data-grid/accessibility/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
101
+ | [Infinite Scrolling](https://www.ag-grid.com/javascript-data-grid/infinite-scrolling/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
102
+ | [Pagination](https://www.ag-grid.com/javascript-data-grid/row-pagination/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
103
+ | [Server-Side Data](https://www.ag-grid.com/javascript-data-grid/server-side-model/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ (Advanced) |
104
+ | [Custom Components](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ✅ | ✅ |
105
+ | [Integrated Charting](https://www.ag-grid.com/javascript-data-grid/integrated-charts/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
106
+ | [Range Selection](https://www.ag-grid.com/javascript-data-grid/range-selection/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
107
+ | [Row Grouping and Aggregation](https://www.ag-grid.com/javascript-data-grid/grouping/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
108
+ | [Pivoting](https://www.ag-grid.com/javascript-data-grid/pivoting/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
109
+ | [Excel Export](https://www.ag-grid.com/javascript-data-grid/excel-export/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
110
+ | [Clipboard Operations](https://www.ag-grid.com/javascript-data-grid/clipboard/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
111
+ | [Master/Detail](https://www.ag-grid.com/javascript-data-grid/master-detail/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
112
+ | [Tree Data](https://www.ag-grid.com/javascript-data-grid/tree-data/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
113
+ | [Column Menu](https://www.ag-grid.com/javascript-data-grid/column-menu/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
114
+ | [Context Menu](https://www.ag-grid.com/javascript-data-grid/context-menu/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
115
+ | [Tool Panels](https://www.ag-grid.com/javascript-data-grid/tool-panel/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) | ❌ | ✅ |
116
+ | [Support](https://ag-grid.zendesk.com/hc/en-us) | ❌ | ✅ |
117
+
118
+ > [!IMPORTANT]
119
+ > Visit the [Pricing](https://www.ag-grid.com/license-pricing/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) page for a full comparison.
120
+
121
+ ### Examples
122
+
123
+ We've created several demos to showcase AG Grid's rich feature set across different use cases. See them in action below, or interact with them on our [Demo](https://www.ag-grid.com/example/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) page.
124
+
125
+ <details open>
126
+ <summary>🏦 <b>Financial Demo</b></summary>
127
+ <br>
128
+ <p>Financial data example featuring live updates and sparklines:</p>
129
+ <a href="https://ag-grid.com/example-finance/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">
130
+ <picture>
131
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/finance-demo-light.gif?raw=true" media="(prefers-color-scheme: light)">
132
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/finance-demo-dark.gif?raw=true" media="(prefers-color-scheme: dark)">
133
+ <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/finance-demo-dark.gif?raw=true" alt="Finance">
134
+ </picture>
135
+ </a>
136
+ <br>
137
+ <div align="right"><span><a href="https://ag-grid.com/example-finance/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">Live Demo</a></span>&nbsp;•&nbsp;<span><a href="https://github.com/ag-grid/ag-grid-demos/tree/main/finance">Source Code</a></span></div>
138
+ <br>
139
+ </details>
140
+ <details>
141
+ <summary>📦 <b>Inventory Demo</b></summary>
142
+ <br>
143
+ <p>Inventory data example to view and manage products:</p>
144
+ <a href="https://ag-grid.com/example-inventory/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">
145
+ <picture>
146
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/inventory-demo-light.gif?raw=true" media="(prefers-color-scheme: light)">
147
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/inventory-demo-dark.gif?raw=true" media="(prefers-color-scheme: dark)">
148
+ <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/inventory-demo-dark.gif?raw=true" alt="Finance">
149
+ </picture>
150
+ </a>
151
+ <div align="right"><span><a href="https://ag-grid.com/example-inventory/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">Live Demo</a></span>&nbsp;•&nbsp;<span><a href="https://github.com/ag-grid/ag-grid-demos/tree/main/inventory">Source Code</a></span></div>
152
+ <br>
153
+ </details>
154
+ <details>
155
+
156
+ <summary>🧑‍💼 <b>HR Demo</b></summary>
157
+ <br>
158
+ <p>HR data example showing hierarchical employee data:</p>
159
+ <a href="https://ag-grid.com/example-hr/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">
160
+ <picture>
161
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/hr-demo-light.gif?raw=true" media="(prefers-color-scheme: light)">
162
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/hr-demo-dark.gif?raw=true" media="(prefers-color-scheme: dark)">
163
+ <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/hr-demo-dark.gif?raw=true" alt="Finance">
164
+ </picture>
165
+ </a>
166
+ <div align="right"><span><a href="https://ag-grid.com/example-hr/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">Live Demo</a></span>&nbsp;•&nbsp;<span><a href="https://github.com/ag-grid/ag-grid-demos/tree/main/hr">Source Code</a></span></div>
167
+ <br>
168
+ </details>
169
+
170
+ ## ⚡️ Quick Start
171
+
172
+ <!-- START QUICK START DESCRIPTION -->
173
+
174
+ AG Grid is easy to set up - all you need to do is provide your data and define your column structure. Read on for vanilla JavaScript installation instructions, or refer to our framework-specific guides for<strong><a href="https://www.ag-grid.com/react-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/react.svg?raw=true" height="16" width="16" alt="React Logo"> React</a></strong>,<strong><a href="https://www.ag-grid.com/angular-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/angular.svg?raw=true" height="16" width="16" alt="Angular Logo"> Angular</a></strong> and<strong><a href="https://www.ag-grid.com/vue-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github"><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/vue.svg?raw=true" height="16" width="16" alt="Vue Logo"> Vue.</a></strong>
175
+
176
+ <!-- END QUICK START DESCRIPTION -->
177
+
178
+ ### Installation
2
179
 
3
- [![CDNJS](https://img.shields.io/cdnjs/v/ag-grid)](https://cdnjs.com/libraries/ag-grid) [![Github Stars](https://img.shields.io/github/stars/ag-grid/ag-grid?style=social)](https://github.com/ag-grid/ag-grid) [![Twitter](https://img.shields.io/twitter/follow/ag_grid?style=social)](https://twitter.com/ag_grid)
4
-
5
- | Module | Info |
6
- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
7
- | ag-grid-community | [![npm](https://img.shields.io/npm/dm/ag-grid-community)](https://www.npmjs.com/package/ag-grid-community) <br> [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ag-grid-community&metric=alert_status)](https://sonarcloud.io/dashboard?id=ag-grid-community) <br> |
8
- | ag-grid-enterprise | [![npm](https://img.shields.io/npm/dm/ag-grid-enterprise)](https://www.npmjs.com/package/ag-grid-enterprise) <br> [![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=ag-grid-enterprise&metric=alert_status)](https://sonarcloud.io/dashboard?id=ag-grid-enterprise) |
9
-
10
- # AG Grid
11
-
12
- AG Grid is a fully-featured and highly customizable JavaScript data grid.
13
- It delivers [outstanding performance](https://www.ag-grid.com/example?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), has no third-party dependencies and [integrates smoothly with all major JavaScript frameworks](https://www.ag-grid.com/javascript-data-grid/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
14
-
15
- Here's how our grid looks with multiple filters and grouping enabled:
16
-
17
- ![Image of AG Grid showing filtering and grouping enabled.](./github-grid-demo.jpg 'AG Grid demo')
18
-
19
- ## Features
20
-
21
- In addition to the standard set of features you'd expect from any grid:
180
+ ```sh
181
+ $ npm install --save ag-grid-community
182
+ ```
22
183
 
23
- - Column Interactions (resize, reorder, and pin columns)
24
- - Pagination
25
- - Sorting
26
- - Row Selection
184
+ ### Setup
27
185
 
28
- Here are some of the features that make AG Grid stand out:
186
+ <!-- START SETUP -->
29
187
 
30
- - Grouping / Aggregation \*
31
- - Accessibility support
32
- - Custom Filtering
33
- - In-place Cell Editing
34
- - Records Lazy Loading \*
35
- - Server-Side Records Operations \*
36
- - Live Stream Updates
37
- - Hierarchical Data Support & Tree View \*
38
- - Customizable Appearance
39
- - Customizable Cell Contents
40
- - State Persistence
41
- - Keyboard Navigation
42
- - Data Export to CSV
43
- - Data Export to Excel \*
44
- - Excel-like Pivoting \*
45
- - Row Reordering
46
- - Copy / Paste
47
- - Column Spanning
48
- - Pinned Rows
49
- - Full Width Rows
50
- - Integrated Charting
51
- - Sparklines
188
+ **1. Provide a Container**
52
189
 
53
- \* The features marked with an asterisk are available in the [Enterprise version](https://www.ag-grid.com/license-pricing?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) only.
190
+ <!-- Create JavaScript -->
54
191
 
55
- Check out the [developer documentation](https://www.ag-grid.com/documentation/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) for a complete list of features or visit [our official docs](https://www.ag-grid.com/features-overview/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) for tutorials and feature demos.
192
+ Load the AG Grid library and create a blank container div:
56
193
 
57
- ## Looking for a framework specific solution?
194
+ ```html
195
+ <html lang="en">
196
+ <head>
197
+ <!-- Includes all JS & CSS for the JavaScript Data Grid -->
198
+ <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
199
+ </head>
200
+ <body>
201
+ <!-- Your Data Grid container -->
202
+ <div id="myGrid"></div>
203
+ </body>
204
+ </html>
205
+ ```
58
206
 
59
- - [Get Started with Angular](https://www.ag-grid.com/angular-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
60
- - [Get Started with React](https://www.ag-grid.com/react-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
61
- - [Get Started with Vue](https://www.ag-grid.com/vue-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github)
207
+ **2. Instantiating the JavaScript Data Grid**
62
208
 
63
- ## Getting started
209
+ Create the Data Grid inside of your container div using `createGrid`.
64
210
 
65
- ### Install dependencies
211
+ ```js
212
+ // Grid Options: Contains all of the Data Grid configurations
213
+ const gridOptions = {};
66
214
 
67
- ```sh
68
- $ npm install --save ag-grid-community
215
+ // Your Javascript code to create the Data Grid
216
+ const myGridElement = document.querySelector('#myGrid');
217
+ agGrid.createGrid(myGridElement, gridOptions);
69
218
  ```
70
219
 
71
- ### Add a placeholder to HTML
220
+ **3. Define Rows and Columns**
72
221
 
73
- ```html
74
- <div id="myGrid" style="height: 150px; width: 600px" class="ag-theme-quartz"></div>
222
+ ```js
223
+ // Grid Options: Contains all of the Data Grid configurations
224
+ const gridOptions = {
225
+ // Row Data: The data to be displayed.
226
+ rowData: [
227
+ { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
228
+ { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
229
+ { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
230
+ ],
231
+ // Column Definitions: Defines the columns to be displayed.
232
+ columnDefs: [
233
+ { field: 'make' },
234
+ { field: 'model' },
235
+ { field: 'price' },
236
+ { field: 'electric' },
237
+ ],
238
+ };
75
239
  ```
76
240
 
77
- ### Import the grid and styles
241
+ **4. Styling the JavaScript Data Grid**
78
242
 
79
- ```js
80
- import { createGrid } from 'ag-grid-community';
81
- import 'ag-grid-community/styles//ag-grid.css';
82
- import 'ag-grid-community/styles//ag-theme-quartz.css';
243
+ Add the `ag-theme-quartz` CSS class to your Data Grid container div to apply the Data Grid's theme.
244
+
245
+ ```html
246
+ <!-- Your Data Grid container -->
247
+ <div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>
83
248
  ```
84
249
 
85
- ### Set configuration
250
+ <!-- END SETUP -->
251
+
252
+ > [!IMPORTANT]
253
+ > For more information on building Data Grids with AG Grid, refer to our [Documentation](https://www.ag-grid.com/javascript-data-grid/getting-started/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
254
+
255
+ ### Seed Projects
256
+
257
+ We also provide [Seed Projects](https://github.com/ag-grid/ag-grid-seed) to help you get started with common configurations:
258
+
259
+ <table width="100%">
260
+ <thead>
261
+ <tr>
262
+ <th>Environment</th>
263
+ <th>Framework</th>
264
+ <th>Packages</th>
265
+ <th>Modules</th>
266
+ </tr>
267
+ </thead>
268
+ <tbody>
269
+ <tr>
270
+ <td>Create React App (CRA)</td>
271
+ <td align="middle"><img width="22" height="22" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/react.svg?raw=true" alt="React Logo"></td>
272
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/packages/create-react-app">Packages</a></td>
273
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/modules/create-react-app">Modules</a></td>
274
+ </tr>
275
+ <tr>
276
+ <td>Vite</td>
277
+ <td align="middle"><img width="22" height="22" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/react.svg?raw=true" alt="React Logo"></td>
278
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/packages/vite-react">Packages</a></td>
279
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/modules/vite-react">Modules</a></td>
280
+ </tr>
281
+ <tr>
282
+ <td>Vite - TypeScript</td>
283
+ <td align="middle"><img width="22" height="22" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/typescript.svg?raw=true" alt="TypeScript Logo"></td>
284
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/packages/vite-typescript">Packages</a></td>
285
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/modules/vite-typescript">Modules</a></td>
286
+ </tr>
287
+ <tr>
288
+ <td>Webpack 5 - TypeScript</td>
289
+ <td align="middle"><img width="22" height="22" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/typescript.svg?raw=true" alt="TypeScript Logo"></td>
290
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/packages/webpack5-typescript">Packages</a></td>
291
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/modules/webpack5-typescript">Modules</a></td>
292
+ </tr>
293
+ <tr>
294
+ <td>Webpack 5 - JavaScript</td>
295
+ <td align="middle"><img width="22" height="22" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/javascript.svg?raw=true" alt="JavaScript Logo"></td>
296
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/packages/webpack5-javascript">Packages</a></td>
297
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/modules/webpack5-javascript">Modules</a></td>
298
+ </tr>
299
+ <tr>
300
+ <td>Angular CLI</td>
301
+ <td align="middle"><img width="22" height="22" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/angular.svg?raw=true" alt="Angular Logo"></td>
302
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/packages/angular-cli">Packages</a></td>
303
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/modules/angular-cli">Modules</a></td>
304
+ </tr>
305
+ <tr>
306
+ <td>Nuxt</td>
307
+ <td align="middle"><img width="22" height="22" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/vue.svg?raw=true" alt="Vue3 Logo"></td>
308
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/packages/nuxt-vue3">Packages</a></td>
309
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/modules/nuxt-vue3">Modules</a></td>
310
+ </tr>
311
+ <tr>
312
+ <td>Vite</td>
313
+ <td align="middle"><img width="22" height="22" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/fw-logos/vue.svg?raw=true" alt="Vue3 Logo"></td>
314
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/packages/vite-vue3">Packages</a></td>
315
+ <td><a href="https://github.com/ag-grid/ag-grid-seed/tree/main/enterprise/modules/vite-vue3">Modules</a></td>
316
+ </tr>
317
+ </tbody>
318
+ </table>
319
+
320
+ ## 🛠️ Customisations
321
+
322
+ AG Grid is fully customisable, both in terms of appearance and functionality. There are many ways in which the grid can be customised and we provide a selection of tools to help create those customisations.
323
+
324
+ ### Custom Components
325
+
326
+ You can create your own Custom Components to customise the behaviour of the grid. For example, you can customise how cells are rendered, how values are edited and also create your own filters.
327
+
328
+ There are a number of different [Component Types](https://www.ag-grid.com/javascript-data-grid/components/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) that you can provide to the grid, including:
329
+
330
+ - [Cell Component](https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the contents of a cell.
331
+ - [Header Component](https://www.ag-grid.com/javascript-data-grid/column-headers/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the header of a column and column groups.
332
+ - [Edit Component](https://www.ag-grid.com/javascript-data-grid/cell-editors/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the editing of a cell.
333
+ - [Filter Component](https://www.ag-grid.com/javascript-data-grid/component-filter/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom column filter that appears inside the column menu.
334
+ - [Floating Filter](https://www.ag-grid.com/javascript-data-grid/component-floating-filter/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom column floating filter that appears inside the column menu.
335
+ - [Date Component](https://www.ag-grid.com/javascript-data-grid/filter-date/#custom-selection-component?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the date selection component in the date filter.
336
+ - [Loading Component](https://www.ag-grid.com/javascript-data-grid/component-loading-cell-renderer/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the loading cell row when using Server Side Row Model.
337
+ - [Overlay Component](https://www.ag-grid.com/javascript-data-grid/overlays/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise loading and no rows overlay components.
338
+ - [Status Bar Component](https://www.ag-grid.com/javascript-data-grid/status-bar/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom status bar components.
339
+ - [Tool Panel Component](https://www.ag-grid.com/javascript-data-grid/component-tool-panel/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom tool panel components.
340
+ - [Tooltip Component](https://www.ag-grid.com/javascript-data-grid/tooltips/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): For custom cell tooltip components.
341
+ - [Menu Item Component](https://www.ag-grid.com/javascript-data-grid/component-menu-item/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github): To customise the menu items shown in the Column and Context Menus.
342
+
343
+ To supply a custom cell renderer and filter components to the Grid, create a direct reference to your component within the `gridOptions.columnDefs` property:
86
344
 
87
345
  ```js
88
- const gridOptions = {
346
+ gridOptions = {
89
347
  columnDefs: [
90
- { headerName: 'Make', field: 'make' },
91
- { headerName: 'Model', field: 'model' },
92
- { headerName: 'Price', field: 'price' },
93
- ],
94
- rowData: [
95
- { make: 'Toyota', model: 'Celica', price: 35000 },
96
- { make: 'Ford', model: 'Mondeo', price: 32000 },
97
- { make: 'Porsche', model: 'Boxster', price: 72000 },
348
+ {
349
+ field: 'country', // The column to add the component to
350
+ cellRenderer: CountryCellRenderer, // Your custom cell component
351
+ filter: CountryFilter, // Your custom filter component
352
+ },
98
353
  ],
99
354
  };
100
355
  ```
101
356
 
102
- ### Initialise the grid
357
+ ### Themes
358
+
359
+ AG Grid has 4 [themes](https://ag-grid.com/javascript-data-grid/global-style/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), each available in `light` & `dark` modes. We also supply each theme with an `auto` mode that can toggle the theme based on the users' system preferences:
360
+
361
+ <table>
362
+ <tr>
363
+ <th>Quartz</th>
364
+ <th>Material</th>
365
+ </tr>
366
+ <tr>
367
+ <td>
368
+ <a href="https://www.ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">
369
+ <picture>
370
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/quartz-theme-light.png?raw=true" media="(prefers-color-scheme: light)">
371
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/quartz-theme.png?raw=true" media="(prefers-color-scheme: dark)">
372
+ <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/quartz-theme.png?raw=true" alt="Quartz Theme">
373
+ </picture>
374
+ </a>
375
+ </td>
376
+ <td>
377
+ <a href="https://www.ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">
378
+ <picture>
379
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/material-theme-light.png?raw=true" media="(prefers-color-scheme: light)">
380
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/material-theme.png?raw=true" media="(prefers-color-scheme: dark)">
381
+ <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/material-theme.png?raw=true" alt="Material Theme">
382
+ </picture>
383
+ </a>
384
+ </td>
385
+ </tr>
386
+ <tr>
387
+ <th>Alpine</th>
388
+ <th>Balham</th>
389
+ </tr>
390
+ <tr>
391
+ <td>
392
+ <a href="https://www.ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">
393
+ <picture>
394
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/alpine-theme-light.png?raw=true" media="(prefers-color-scheme: light)">
395
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/alpine-theme.png?raw=true" media="(prefers-color-scheme: dark)">
396
+ <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/alpine-theme.png?raw=true" alt="Alpine Theme">
397
+ </picture>
398
+ </a>
399
+ </td>
400
+ <td>
401
+ <a href="https://www.ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github">
402
+ <picture>
403
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/balham-theme-light.png?raw=true" media="(prefers-color-scheme: light)">
404
+ <source srcset="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/balham-theme.png?raw=true" media="(prefers-color-scheme: dark)">
405
+ <img src="https://github.com/ag-grid/ag-grid/blob/latest/readme-assets/balham-theme.png?raw=true" alt="Balham Theme">
406
+ </picture>
407
+ </a>
408
+ </td>
409
+ </tr>
410
+ </table>
411
+
412
+ To apply a theme, add the relevant CSS Class to the Data Grid container. For example, to apply the Quartz theme, use the CSS class `ag-theme-quartz`:
103
413
 
104
414
  ```js
105
- const eGridDiv = document.querySelector('#myGrid');
106
- const api = createGrid(eGridDiv, gridOptions);
415
+ <div
416
+ id="myGrid"
417
+ style="height: 150px; width: 600px"
418
+ class="ag-theme-quartz"
419
+ ></div>
107
420
  ```
108
421
 
109
- For more information on how to integrate the grid into your project see [Building AG Grid Applications](https://www.ag-grid.com/javascript-data-grid/building/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github).
422
+ ### Custom Themes
423
+
424
+ All AG Grid themes can be customised using [CSS variables](https://www.ag-grid.com/javascript-data-grid/global-style-customisation-variables/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), or you can create a new theme from scratch with the help of our [Theme Builder](https://www.ag-grid.com/theme-builder/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) or [Figma Design System](https://www.figma.com/community/file/1360600846643230092/ag-grid-design-system).
425
+
426
+ ## 🌍 Community
427
+
428
+ ### Tools & Extensions
429
+
430
+ AG Grid has a large and active community who have created an [ecosystem of 3rd party tools, extensions and utilities](https://www.ag-grid.com/community/tools-extensions/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) to help you build your next project with AG Grid, no matter which language or framework you use:
431
+
432
+ <div>
433
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
434
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/react.svg?raw=true" align="center" width="16" height="16" alt="React Logo">&nbsp;React</span>
435
+ </a> •
436
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
437
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/angular.svg?raw=true" align="center" width="16" height="16" alt="Angular Logo">&nbsp;Angular</span>
438
+ </a> •
439
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
440
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/typescript.svg?raw=true" align="center" width="16" height="16" alt="TypeScript Logo">&nbsp;TypeScript</span>
441
+ </a> •
442
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
443
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/vue.svg?raw=true" align="center" width="16" height="16" alt="Vue Logo">&nbsp;Vue</span>
444
+ </a> •
445
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
446
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/python.svg?raw=true" align="center" width="16" height="16" alt="Python Logo">&nbsp;Python</span>
447
+ </a> •
448
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
449
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/svelte.svg?raw=true" align="center" width="16" height="16" alt="Svelte Logo">&nbsp;Svelte</span>
450
+ </a> •
451
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
452
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/solidjs.svg?raw=true" align="center" width="16" height="16" alt="SolidJS Logo">&nbsp;SolidJS</span>
453
+ </a> •
454
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
455
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/.net.svg?raw=true" align="center" width="16" height="16" alt=".NET Logo">&nbsp;.NET</span>
456
+ </a> •
457
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
458
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/rust.svg?raw=true" align="center" width="16" height="16" alt="Rust Logo">&nbsp;Rust</span>
459
+ </a> •
460
+ <a href="https://www.ag-grid.com/community/tools-extensions/">
461
+ <span><img src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/community/frameworks/laravel.svg?raw=true" align="center" width="16" height="16" alt="Laravel Logo">&nbsp;Laravel</span>
462
+ </a>
463
+ </div>
464
+
465
+ ### Showcase
466
+
467
+ AG Grid is used by 100,000's of developers across the world, from almost every industry. Whilst most of these projects are private, we've curated a selection of open-source projects from different industries where household names use AG Grid, including **J.P.Morgan**, **MongoDB** and **NASA**. Visit our [Community Showcase](https://www.ag-grid.com/community/showcase/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) page to learn more.
468
+
469
+ ### Stargazers
470
+
471
+ Founded in 2016, AG Grid has seen a steady rise in popularity and is now the market leader for Data Grids:
472
+
473
+ <picture>
474
+ <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=ag-grid/ag-grid&type=Date&theme=dark"/>
475
+ <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=ag-grid/ag-grid&type=Date"/>
476
+ <img width="100%" alt="The AG Grid star history chart" src="https://api.star-history.com/svg?repos=ag-grid/ag-grid&type=Date"/>
477
+ </picture>
478
+
479
+ ## 🤝 Support
480
+
481
+ ### Enterprise Support
482
+
483
+ AG Grid Enterprise customers have access to dedicated support via [ZenDesk](https://ag-grid.zendesk.com/hc/en-us), which is monitored by our engineering teams.
110
484
 
111
- ## Issue Reporting
485
+ ### Bug Reports
112
486
 
113
- If you have found a bug, please report it in this repository's [issues](https://github.com/ag-grid/ag-grid/issues) section. If you're using the Enterprise version, please use the [private ticketing](https://ag-grid.zendesk.com/) system to do that.
487
+ If you have found a bug, please report it in this repository's [issues](https://github.com/ag-grid/ag-grid/issues) section.
114
488
 
115
- ## Asking Questions
489
+ <img src="https://img.shields.io/github/issues-closed/ag-grid/ag-grid?style=for-the-badge&color=%233d8c40" alt="GitHub Issues" height="26">
490
+
491
+ ### Questions
116
492
 
117
493
  Look for similar problems on [StackOverflow](https://stackoverflow.com/questions/tagged/ag-grid) using the `ag-grid` tag. If nothing seems related, post a new message there. Please do not use GitHub issues to ask questions.
118
494
 
119
- ## Contributing
495
+ <img src="https://img.shields.io/stackexchange/stackoverflow.com/t/ag-grid?style=for-the-badge&color=%233d8c40" alt="Stack Exchange questions" height="26">
496
+
497
+ ### Contributing
120
498
 
121
499
  AG Grid is developed by a team of co-located developers in London. If you want to join the team send your application to info@ag-grid.com.
122
500
 
123
- ## License
501
+ ## ⚠️ License
502
+
503
+ `ag-grid-community` is licensed under the **MIT** license.
504
+
505
+ `ag-grid-enterprise` has a **Commercial** license.
506
+
507
+ See the [LICENSE file](./LICENSE.txt) for more info.
508
+
509
+ <div><h2><img vertical-align="middle" width="32" height="32" src="https://github.com/ag-grid/ag-grid/blob/latest/documentation/ag-grid-docs/public/images/ag-logos/svg-logos/AG-BrandMark_Light-Theme.svg?raw=true" alt="AG ChartsLogo">AG Charts</h2></div>
510
+
511
+ If you've made it this far, you may be interested in our latest project: [AG Charts](https://charts.ag-grid.com?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) - The best JavaScript Charting library in the world.
512
+
513
+ Initially built to power [Integrated Charts](https://www.ag-grid.com/javascript-data-grid/integrated-charts/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github) in AG Grid, we open-sourced this project in 2018. Having seen the steady rise in popularity since then, we have decided to invest in AG Charts with a dedicated Enterprise version (`ag-charts-enterprise`) in addition to our continued support of `ag-charts-community`.
514
+
515
+ <a href="https://charts.ag-grid.com/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github">
516
+ <picture>
517
+ <source media="(prefers-color-scheme: dark)" srcset="https://github.com/ag-grid/ag-charts/blob/2ee85f286ccc151cb5e4517f711bafd03366db3c/packages/ag-charts-website/public/images/readme-assets/gallery-dark.gif?raw=true"/>
518
+ <source media="(prefers-color-scheme: light)" srcset="https://github.com/ag-grid/ag-charts/blob/2ee85f286ccc151cb5e4517f711bafd03366db3c/packages/ag-charts-website/public/images/readme-assets/gallery.gif?raw=true"/>
519
+ <img width="100%" alt="Preview of AG Charts JavaScript Charting Examples" src="https://github.com/ag-grid/ag-charts/blob/2ee85f286ccc151cb5e4517f711bafd03366db3c/packages/ag-charts-website/public/images/readme-assets/gallery-dark.gif?raw=true"/>
520
+ </picture>
521
+ </a>
522
+
523
+ <div align="right">
524
+ <a href="https://charts.ag-grid.com/?utm_source=ag-charts-readme&utm_medium=repository&utm_campaign=github"><br><img alt="Static Badge" src="https://img.shields.io/badge/ag%E2%80%93charts.com-Learn%20More%20-blue?style=for-the-badge&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KDTwhLS0gVXBsb2FkZWQgdG86IFNWRyBSZXBvLCB3d3cuc3ZncmVwby5jb20sIFRyYW5zZm9ybWVkIGJ5OiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KDTxnIGlkPSJTVkdSZXBvX2JnQ2FycmllciIgc3Ryb2tlLXdpZHRoPSIwIi8%2BCg08ZyBpZD0iU1ZHUmVwb190cmFjZXJDYXJyaWVyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KDTxnIGlkPSJTVkdSZXBvX2ljb25DYXJyaWVyIj4gPHBhdGggZD0iTTE4IDIwLjc1SDZDNS4yNzA2NSAyMC43NSA0LjU3MTE4IDIwLjQ2MDMgNC4wNTU0NiAxOS45NDQ1QzMuNTM5NzMgMTkuNDI4OCAzLjI1IDE4LjcyOTMgMy4yNSAxOFY2QzMuMjUgNS4yNzA2NSAzLjUzOTczIDQuNTcxMTggNC4wNTU0NiA0LjA1NTQ2QzQuNTcxMTggMy41Mzk3MyA1LjI3MDY1IDMuMjUgNiAzLjI1SDEyQzEyLjE5ODkgMy4yNSAxMi4zODk3IDMuMzI5MDIgMTIuNTMwMyAzLjQ2OTY3QzEyLjY3MSAzLjYxMDMyIDEyLjc1IDMuODAxMDkgMTIuNzUgNEMxMi43NSA0LjE5ODkxIDEyLjY3MSA0LjM4OTY4IDEyLjUzMDMgNC41MzAzM0MxMi4zODk3IDQuNjcwOTggMTIuMTk4OSA0Ljc1IDEyIDQuNzVINkM1LjY2ODQ4IDQuNzUgNS4zNTA1NCA0Ljg4MTcgNS4xMTYxMiA1LjExNjEyQzQuODgxNyA1LjM1MDU0IDQuNzUgNS42Njg0OCA0Ljc1IDZWMThDNC43NSAxOC4zMzE1IDQuODgxNyAxOC42NDk1IDUuMTE2MTIgMTguODgzOUM1LjM1MDU0IDE5LjExODMgNS42Njg0OCAxOS4yNSA2IDE5LjI1SDE4QzE4LjMzMTUgMTkuMjUgMTguNjQ5NSAxOS4xMTgzIDE4Ljg4MzkgMTguODgzOUMxOS4xMTgzIDE4LjY0OTUgMTkuMjUgMTguMzMxNSAxOS4yNSAxOFYxMkMxOS4yNSAxMS44MDExIDE5LjMyOSAxMS42MTAzIDE5LjQ2OTcgMTEuNDY5N0MxOS42MTAzIDExLjMyOSAxOS44MDExIDExLjI1IDIwIDExLjI1QzIwLjE5ODkgMTEuMjUgMjAuMzg5NyAxMS4zMjkgMjAuNTMwMyAxMS40Njk3QzIwLjY3MSAxMS42MTAzIDIwLjc1IDExLjgwMTEgMjAuNzUgMTJWMThDMjAuNzUgMTguNzI5MyAyMC40NjAzIDE5LjQyODggMTkuOTQ0NSAxOS45NDQ1QzE5LjQyODggMjAuNDYwMyAxOC43MjkzIDIwLjc1IDE4IDIwLjc1WiIgZmlsbD0iI2ZmZmZmZiIvPiA8cGF0aCBkPSJNMjAgOC43NUMxOS44MDE5IDguNzQ3NDEgMTkuNjEyNiA4LjY2NzU2IDE5LjQ3MjUgOC41Mjc0N0MxOS4zMzI0IDguMzg3MzcgMTkuMjUyNiA4LjE5ODExIDE5LjI1IDhWNC43NUgxNkMxNS44MDExIDQuNzUgMTUuNjEwMyA0LjY3MDk4IDE1LjQ2OTcgNC41MzAzM0MxNS4zMjkgNC4zODk2OCAxNS4yNSA0LjE5ODkxIDE1LjI1IDRDMTUuMjUgMy44MDEwOSAxNS4zMjkgMy42MTAzMiAxNS40Njk3IDMuNDY5NjdDMTUuNjEwMyAzLjMyOTAyIDE1LjgwMTEgMy4yNSAxNiAzLjI1SDIwQzIwLjE5ODEgMy4yNTI1OSAyMC4zODc0IDMuMzMyNDQgMjAuNTI3NSAzLjQ3MjUzQzIwLjY2NzYgMy42MTI2MyAyMC43NDc0IDMuODAxODkgMjAuNzUgNFY4QzIwLjc0NzQgOC4xOTgxMSAyMC42Njc2IDguMzg3MzcgMjAuNTI3NSA4LjUyNzQ3QzIwLjM4NzQgOC42Njc1NiAyMC4xOTgxIDguNzQ3NDEgMjAgOC43NVoiIGZpbGw9IiNmZmZmZmYiLz4gPHBhdGggZD0iTTEzLjUgMTEuMjVDMTMuMzA3MSAxMS4yMzUyIDEzLjEyNzYgMTEuMTQ1NSAxMyAxMUMxMi44NzcgMTAuODYyNSAxMi44MDkgMTAuNjg0NSAxMi44MDkgMTAuNUMxMi44MDkgMTAuMzE1NSAxMi44NzcgMTAuMTM3NSAxMyAxMEwxOS41IDMuNUMxOS41Njg3IDMuNDI2MzEgMTkuNjUxNSAzLjM2NzIxIDE5Ljc0MzUgMy4zMjYyMkMxOS44MzU1IDMuMjg1MjMgMTkuOTM0OCAzLjI2MzE5IDIwLjAzNTUgMy4yNjE0MUMyMC4xMzYyIDMuMjU5NjMgMjAuMjM2MiAzLjI3ODE2IDIwLjMyOTYgMy4zMTU4OEMyMC40MjMgMy4zNTM2IDIwLjUwNzggMy40MDk3NCAyMC41NzkgMy40ODA5NkMyMC42NTAzIDMuNTUyMTggMjAuNzA2NCAzLjYzNzAxIDIwLjc0NDEgMy43MzA0QzIwLjc4MTggMy44MjM3OSAyMC44MDA0IDMuOTIzODIgMjAuNzk4NiA0LjAyNDUyQzIwLjc5NjggNC4xMjUyMyAyMC43NzQ4IDQuMjI0NTQgMjAuNzMzOCA0LjMxNjU0QzIwLjY5MjggNC40MDg1NCAyMC42MzM3IDQuNDkxMzQgMjAuNTYgNC41NkwxNCAxMUMxMy44NzI0IDExLjE0NTUgMTMuNjkyOSAxMS4yMzUyIDEzLjUgMTEuMjVaIiBmaWxsPSIjZmZmZmZmIi8%2BIDwvZz4KDTwvc3ZnPg%3D%3D">
525
+ </a>
526
+ </div>
527
+
528
+ <div align="center">
529
+
530
+ <hr/>
531
+
532
+ <strong>Follow us to keep up to date with all the latest news from AG Grid:</strong>
533
+
534
+ <a href="https://x.com/ag_grid"><img src="https://img.shields.io/badge/-X%20(Twitter)-black?style=for-the-badge&logo=x" alt="Twitter Badge" height="36"></a>
535
+ <a href="https://www.linkedin.com/company/ag-grid/"><img src="https://img.shields.io/badge/-LinkedIn-blue?style=for-the-badge&logo=linkedin" alt="LinkedIn Badge" height="36"></a>
536
+ <a href="https://www.youtube.com/c/ag-grid"><img src="https://img.shields.io/badge/-YouTube-red?style=for-the-badge&logo=youtube" alt="YouTube Badge" height="36"></a>
537
+ <a href="https://blog.ag-grid.com"><img src="https://img.shields.io/badge/-Blog-grey?style=for-the-badge&logo=rss" alt="Blog Badge" height="36"></a>
124
538
 
125
- This project is licensed under the MIT license. See the [LICENSE file](./LICENSE.txt) for more info.
539
+ </div>