npm - ag-grid-community - Versions diffs - 32.3.2 → 33.0.0 - Mend

ag-grid-community 32.3.2 → 33.0.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 (900) hide show

package/README.md CHANGED Viewed

@@ -57,27 +57,28 @@
 <details>
   <summary><strong>Table of Contents</strong></summary>
--   [📖 Overview](#-overview)
-    -   [Features](#features)
-    -   [Examples](#examples)
--   [⚡️ Quick Start](#️-quick-start)
-    -   [Installation](#installation)
-    -   [Setup](#setup)
-    -   [Seed Projects](#seed-projects)
--   [🛠️ Customisations](#️-customisations)
-    -   [Custom Components](#custom-components)
-    -   [Themes](#themes)
-    -   [Custom Themes](#custom-themes)
--   [🌍 Community](#-community)
-    -   [Tools \& Extensions](#tools--extensions)
-    -   [Showcase](#showcase)
-    -   [Stargazers](#stargazers)
--   [🤝 Support](#-support)
-    -   [Enterprise Support](#enterprise-support)
-    -   [Bug Reports](#bug-reports)
-    -   [Questions](#questions)
-    -   [Contributing](#contributing)
--   [⚠️ License](#️-license)
+-   [JavaScript Data Grid | JavaScript Table]
+    -   [📖 Overview](#overview)
+        -   [Features](#features)
+        -   [Examples](#examples)
+    -   [⚡️ Quick Start](#️quick-start)
+        -   [Installation](#installation)
+        -   [Setup](#setup)
+        -   [Seed Projects](#seed-projects)
+    -   [🛠️ Customisations](#️customisations)
+        -   [Custom Components](#custom-components)
+        -   [Themes](#themes)
+        -   [Custom Themes](#custom-themes)
+    -   [🌍 Community](#community)
+        -   [Tools \& Extensions](#tools--extensions)
+        -   [Showcase](#showcase)
+        -   [Stargazers](#stargazers)
+    -   [🤝 Support](#support)
+        -   [Enterprise Support](#enterprise-support)
+        -   [Bug Reports](#bug-reports)
+        -   [Questions](#questions)
+        -   [Contributing](#contributing)
+    -   [⚠️ License](#️license)
 </details>
@@ -191,7 +192,7 @@ $ npm install --save ag-grid-community
 <!-- Create JavaScript -->
-Load the AG Grid library and create a blank container div:
+Load the AG Grid library and create a container div. The div should have a height because the Data Grid will fill the size of the parent container:
 ```html
 <html lang="en">
@@ -201,7 +202,7 @@ Load the AG Grid library and create a blank container div:
     </head>
     <body>
         <!-- Your Data Grid container -->
-        <div id="myGrid"></div>
+        <div id="myGrid" style="height: 500px"></div>
     </body>
 </html>
 ```
@@ -231,24 +232,10 @@ const gridOptions = {
         { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
     ],
     // Column Definitions: Defines the columns to be displayed.
-    columnDefs: [
-        { field: 'make' },
-        { field: 'model' },
-        { field: 'price' },
-        { field: 'electric' },
-    ],
+    columnDefs: [{ field: 'make' }, { field: 'model' }, { field: 'price' }, { field: 'electric' }],
 };
 ```
-**4. Styling the JavaScript Data Grid**
-Add the `ag-theme-quartz` CSS class to your Data Grid container div to apply the Data Grid's theme.
-```html
-<!-- Your Data Grid container -->
-<div id="myGrid" class="ag-theme-quartz" style="height: 500px"></div>
-```
 <!-- END SETUP -->
 <blockquote>
@@ -360,7 +347,7 @@ gridOptions = {
 ### Themes
-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:
+AG Grid has 4 [themes](https://ag-grid.com/javascript-data-grid/themes/?utm_source=ag-grid-readme&utm_medium=repository&utm_campaign=github), each available in `light` & `dark` modes:
 <table>
     <tr>
@@ -413,19 +400,9 @@ AG Grid has 4 [themes](https://ag-grid.com/javascript-data-grid/global-style/?ut
     </tr>
 </table>
-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`:
-```js
-<div
-    id="myGrid"
-    style="height: 150px; width: 600px"
-    class="ag-theme-quartz"
-></div>
-```
 ### Custom Themes
-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).
+All AG Grid themes can be customised using the [Theming API](https://www.ag-grid.com/javascript-data-grid/theming/?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).
 ## 🌍 Community