code · pull · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026 · Jan 20, 2026
diff --git a/documentation/ag-grid-docs/public/images/back-to-top-icon.svg b/documentation/ag-grid-docs/public/images/back-to-top-icon.svg
diff --git a/documentation/ag-grid-docs/public/images/on-this-page-icon.svg b/documentation/ag-grid-docs/public/images/on-this-page-icon.svg
diff --git a/documentation/ag-grid-docs/src/components/demos/examples/finance/FinanceExample.tsx b/documentation/ag-grid-docs/src/components/demos/examples/finance/FinanceExample.tsx
@@ -9,7 +9,6 @@ import {
     type GetRowIdFunc,
     type GetRowIdParams,
     type GridSizeChangedEvent,
-    ModuleRegistry,
     type ValueFormatterFunc,
     type ValueGetterParams,
 } from 'ag-grid-community';
@@ -30,7 +29,7 @@ import {
     SparklinesModule,
     StatusBarModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import styles from './FinanceExample.module.css';
 import { getData } from './data';
@@ -93,7 +92,7 @@ const BREAKPOINT_CONFIG: Record<
     },
 };
 
-ModuleRegistry.registerModules([
+const modules = [
     AllCommunityModule,
     ClientSideRowModelModule,
     AdvancedFilterModule,
@@ -111,7 +110,7 @@ ModuleRegistry.registerModules([
     IntegratedChartsModule.with(AgChartsEnterpriseModule),
     SparklinesModule.with(AgChartsEnterpriseModule),
     ClipboardModule,
-]);
+];
 
 const numberFormatter: ValueFormatterFunc = ({ value }) => {
     const formatter = new Intl.NumberFormat('en-US', {
@@ -317,26 +316,28 @@ export const FinanceExample: React.FC<Props> = ({
     const chartThemes = useMemo(() => (isDarkMode ? ['ag-default-dark'] : ['ag-default']), [isDarkMode]);
 
     return (
-        <div
-            ref={gridWrapperRef}
-            style={gridHeight ? { height: gridHeight } : {}}
-            className={`${themeClass} ${styles.grid} ${gridHeight ? '' : styles.gridHeight}`}
-        >
-            <AgGridReact
-                chartThemes={chartThemes}
-                ref={gridRef}
-                getRowId={getRowId}
-                rowData={rowData}
-                columnDefs={colDefs}
-                defaultColDef={defaultColDef}
-                cellSelection={true}
-                enableCharts
-                rowGroupPanelShow={enableRowGroup ? 'always' : 'never'}
-                suppressAggFuncInHeader
-                groupDefaultExpanded={-1}
-                statusBar={statusBar}
-                onGridSizeChanged={onGridSizeChanged}
-            />
-        </div>
+        <AgGridProvider modules={modules}>
+            <div
+                ref={gridWrapperRef}
+                style={gridHeight ? { height: gridHeight } : {}}
+                className={`${themeClass} ${styles.grid} ${gridHeight ? '' : styles.gridHeight}`}
+            >
+                <AgGridReact
+                    chartThemes={chartThemes}
+                    ref={gridRef}
+                    getRowId={getRowId}
+                    rowData={rowData}
+                    columnDefs={colDefs}
+                    defaultColDef={defaultColDef}
+                    cellSelection={true}
+                    enableCharts
+                    rowGroupPanelShow={enableRowGroup ? 'always' : 'never'}
+                    suppressAggFuncInHeader
+                    groupDefaultExpanded={-1}
+                    statusBar={statusBar}
+                    onGridSizeChanged={onGridSizeChanged}
+                />
+            </div>
+        </AgGridProvider>
     );
 };
diff --git a/documentation/ag-grid-docs/src/components/demos/examples/hr/HRExample.tsx b/documentation/ag-grid-docs/src/components/demos/examples/hr/HRExample.tsx
@@ -1,7 +1,7 @@
 import { type FunctionComponent, useCallback, useMemo, useRef, useState } from 'react';
 
 import type { ColDef, GetDataPath, ValueFormatterFunc, ValueFormatterParams } from 'ag-grid-community';
-import { AllCommunityModule, ClientSideRowModelModule, ModuleRegistry } from 'ag-grid-community';
+import { AllCommunityModule, ClientSideRowModelModule } from 'ag-grid-community';
 import {
     ExcelExportModule,
     MasterDetailModule,
@@ -11,7 +11,7 @@ import {
     StatusBarModule,
     TreeDataModule,
 } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import styles from './HRExample.module.css';
 import { ContactCellRenderer } from './cell-renderers/ContactCellRenderer';
@@ -21,7 +21,7 @@ import { StatusCellRenderer } from './cell-renderers/StatusCellRenderer';
 import { TagCellRenderer } from './cell-renderers/TagCellRenderer';
 import { getData } from './data';
 
-ModuleRegistry.registerModules([
+const modules = [
     AllCommunityModule,
     ClientSideRowModelModule,
     ExcelExportModule,
@@ -31,7 +31,7 @@ ModuleRegistry.registerModules([
     SetFilterModule,
     StatusBarModule,
     TreeDataModule,
-]);
+];
 
 interface Props {
     gridTheme?: string;
@@ -143,20 +143,22 @@ export const HRExample: FunctionComponent<Props> = ({ gridTheme = 'ag-theme-quar
     }, []);
 
     return (
-        <div className={styles.wrapper}>
-            <div className={styles.container}>
-                <div className={`${themeClass} ${styles.grid}`}>
-                    <AgGridReact
-                        ref={gridRef}
-                        columnDefs={colDefs}
-                        rowData={rowData}
-                        groupDefaultExpanded={-1}
-                        getDataPath={getDataPath}
-                        treeData
-                        autoGroupColumnDef={autoGroupColumnDef}
-                    />
+        <AgGridProvider modules={modules}>
+            <div className={styles.wrapper}>
+                <div className={styles.container}>
+                    <div className={`${themeClass} ${styles.grid}`}>
+                        <AgGridReact
+                            ref={gridRef}
+                            columnDefs={colDefs}
+                            rowData={rowData}
+                            groupDefaultExpanded={-1}
+                            getDataPath={getDataPath}
+                            treeData
+                            autoGroupColumnDef={autoGroupColumnDef}
+                        />
+                    </div>
                 </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };
diff --git a/documentation/ag-grid-docs/src/components/demos/examples/inventory/InventoryExample.tsx b/documentation/ag-grid-docs/src/components/demos/examples/inventory/InventoryExample.tsx
@@ -8,9 +8,9 @@ import type {
     ValueFormatterParams,
     ValueGetterParams,
 } from 'ag-grid-community';
-import { AllCommunityModule, ClientSideRowModelModule, ModuleRegistry } from 'ag-grid-community';
+import { AllCommunityModule, ClientSideRowModelModule } from 'ag-grid-community';
 import { ExcelExportModule, MasterDetailModule, MultiFilterModule, SetFilterModule } from 'ag-grid-enterprise';
-import { AgGridReact } from 'ag-grid-react';
+import { AgGridProvider, AgGridReact } from 'ag-grid-react';
 
 import styles from './InventoryExample.module.css';
 import { ActionsCellRenderer } from './cell-renderers/ActionsCellRenderer';
@@ -20,14 +20,14 @@ import { StatusCellRenderer } from './cell-renderers/StatusCellRenderer';
 import { StockCellRenderer } from './cell-renderers/StockCellRenderer';
 import { getData } from './data';
 
-ModuleRegistry.registerModules([
+const modules = [
     AllCommunityModule,
     ClientSideRowModelModule,
     ExcelExportModule,
     SetFilterModule,
     MultiFilterModule,
     MasterDetailModule,
-]);
+];
 
 interface Props {
     gridTheme?: string;
@@ -149,63 +149,65 @@ export const InventoryExample: FunctionComponent<Props> = ({ gridTheme = 'ag-the
     }, []);
 
     return (
-        <div className={styles.wrapper}>
-            <div className={styles.container}>
-                <div className={styles.exampleHeader}>
-                    <div className={styles.tabs}>
-                        {Object.entries(statuses).map(([key, displayValue]) => (
-                            <button
-                                className={`${styles.tabButton} ${activeTab === key ? styles.active : ''}`}
-                                onClick={() => handleTabClick(key)}
-                                key={key}
+        <AgGridProvider modules={modules}>
+            <div className={styles.wrapper}>
+                <div className={styles.container}>
+                    <div className={styles.exampleHeader}>
+                        <div className={styles.tabs}>
+                            {Object.entries(statuses).map(([key, displayValue]) => (
+                                <button
+                                    className={`${styles.tabButton} ${activeTab === key ? styles.active : ''}`}
+                                    onClick={() => handleTabClick(key)}
+                                    key={key}
+                                >
+                                    {displayValue}
+                                </button>
+                            ))}
+                        </div>
+                        <div className={styles.inputWrapper}>
+                            <svg
+                                className={styles.searchIcon}
+                                width="16"
+                                height="16"
+                                viewBox="0 0 16 16"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
                             >
-                                {displayValue}
-                            </button>
-                        ))}
-                    </div>
-                    <div className={styles.inputWrapper}>
-                        <svg
-                            className={styles.searchIcon}
-                            width="16"
-                            height="16"
-                            viewBox="0 0 16 16"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
-                            <path
-                                fillRule="evenodd"
-                                clipRule="evenodd"
-                                d="M11.5014 7.00039C11.5014 7.59133 11.385 8.1765 11.1588 8.72246C10.9327 9.26843 10.6012 9.7645 10.1833 10.1824C9.76548 10.6002 9.2694 10.9317 8.72344 11.1578C8.17747 11.384 7.59231 11.5004 7.00136 11.5004C6.41041 11.5004 5.82525 11.384 5.27929 11.1578C4.73332 10.9317 4.23725 10.6002 3.81938 10.1824C3.40152 9.7645 3.07005 9.26843 2.8439 8.72246C2.61776 8.1765 2.50136 7.59133 2.50136 7.00039C2.50136 5.80691 2.97547 4.66232 3.81938 3.81841C4.6633 2.97449 5.80789 2.50039 7.00136 2.50039C8.19484 2.50039 9.33943 2.97449 10.1833 3.81841C11.0273 4.66232 11.5014 5.80691 11.5014 7.00039ZM10.6814 11.7404C9.47574 12.6764 7.95873 13.1177 6.43916 12.9745C4.91959 12.8314 3.51171 12.1145 2.50211 10.9698C1.49252 9.8251 0.957113 8.33868 1.0049 6.81314C1.05268 5.28759 1.68006 3.83759 2.75932 2.75834C3.83857 1.67908 5.28856 1.0517 6.81411 1.00392C8.33966 0.956136 9.82608 1.49154 10.9708 2.50114C12.1154 3.51073 12.8323 4.91862 12.9755 6.43819C13.1187 7.95775 12.6773 9.47476 11.7414 10.6804L14.5314 13.4704C14.605 13.539 14.6642 13.6218 14.7051 13.7138C14.7461 13.8058 14.7682 13.9052 14.77 14.0059C14.7717 14.1066 14.7532 14.2066 14.7155 14.3C14.6778 14.3934 14.6216 14.4782 14.5504 14.5494C14.4792 14.6206 14.3943 14.6768 14.301 14.7145C14.2076 14.7522 14.1075 14.7708 14.0068 14.769C13.9061 14.7672 13.8068 14.7452 13.7148 14.7042C13.6228 14.6632 13.54 14.6041 13.4714 14.5304L10.6814 11.7404Z"
-                                fill="currentColor"
-                            />
-                        </svg>
+                                <path
+                                    fillRule="evenodd"
+                                    clipRule="evenodd"
+                                    d="M11.5014 7.00039C11.5014 7.59133 11.385 8.1765 11.1588 8.72246C10.9327 9.26843 10.6012 9.7645 10.1833 10.1824C9.76548 10.6002 9.2694 10.9317 8.72344 11.1578C8.17747 11.384 7.59231 11.5004 7.00136 11.5004C6.41041 11.5004 5.82525 11.384 5.27929 11.1578C4.73332 10.9317 4.23725 10.6002 3.81938 10.1824C3.40152 9.7645 3.07005 9.26843 2.8439 8.72246C2.61776 8.1765 2.50136 7.59133 2.50136 7.00039C2.50136 5.80691 2.97547 4.66232 3.81938 3.81841C4.6633 2.97449 5.80789 2.50039 7.00136 2.50039C8.19484 2.50039 9.33943 2.97449 10.1833 3.81841C11.0273 4.66232 11.5014 5.80691 11.5014 7.00039ZM10.6814 11.7404C9.47574 12.6764 7.95873 13.1177 6.43916 12.9745C4.91959 12.8314 3.51171 12.1145 2.50211 10.9698C1.49252 9.8251 0.957113 8.33868 1.0049 6.81314C1.05268 5.28759 1.68006 3.83759 2.75932 2.75834C3.83857 1.67908 5.28856 1.0517 6.81411 1.00392C8.33966 0.956136 9.82608 1.49154 10.9708 2.50114C12.1154 3.51073 12.8323 4.91862 12.9755 6.43819C13.1187 7.95775 12.6773 9.47476 11.7414 10.6804L14.5314 13.4704C14.605 13.539 14.6642 13.6218 14.7051 13.7138C14.7461 13.8058 14.7682 13.9052 14.77 14.0059C14.7717 14.1066 14.7532 14.2066 14.7155 14.3C14.6778 14.3934 14.6216 14.4782 14.5504 14.5494C14.4792 14.6206 14.3943 14.6768 14.301 14.7145C14.2076 14.7522 14.1075 14.7708 14.0068 14.769C13.9061 14.7672 13.8068 14.7452 13.7148 14.7042C13.6228 14.6632 13.54 14.6041 13.4714 14.5304L10.6814 11.7404Z"
+                                    fill="currentColor"
+                                />
+                            </svg>
 
-                        <input
-                            type="text"
-                            id="filter-text-box"
-                            placeholder="Search product..."
-                            onInput={onFilterTextBoxChanged}
+                            <input
+                                type="text"
+                                id="filter-text-box"
+                                placeholder="Search product..."
+                                onInput={onFilterTextBoxChanged}
+                            />
+                        </div>
+                    </div>
+                    <div className={`${themeClass} ${styles.grid}`}>
+                        <AgGridReact
+                            ref={gridRef}
+                            columnDefs={colDefs}
+                            rowData={rowData}
+                            defaultColDef={defaultColDef}
+                            rowHeight={80}
+                            autoSizeStrategy={autoSizeStrategy}
+                            pagination
+                            paginationPageSize={10}
+                            paginationPageSizeSelector={paginationPageSizeSelector}
+                            masterDetail
+                            detailCellRendererParams={detailCellRendererParams}
+                            quickFilterText={quickFilterText}
+                            detailRowAutoHeight
                         />
                     </div>
                 </div>
-                <div className={`${themeClass} ${styles.grid}`}>
-                    <AgGridReact
-                        ref={gridRef}
-                        columnDefs={colDefs}
-                        rowData={rowData}
-                        defaultColDef={defaultColDef}
-                        rowHeight={80}
-                        autoSizeStrategy={autoSizeStrategy}
-                        pagination
-                        paginationPageSize={10}
-                        paginationPageSizeSelector={paginationPageSizeSelector}
-                        masterDetail
-                        detailCellRendererParams={detailCellRendererParams}
-                        quickFilterText={quickFilterText}
-                        detailRowAutoHeight
-                    />
-                </div>
             </div>
-        </div>
+        </AgGridProvider>
     );
 };