From ef4717b49c5f199a9275a1f7e981bbb629020c0f Mon Sep 17 00:00:00 2001 From: Stephen Cooper Date: Tue, 20 Jan 2026 10:26:56 +0000 Subject: [PATCH 1/3] AG-13371 Configure Modules and LicenceKey via React.Context (#12836) * test context * First pass at static AgGridContext * Tests for static context * revert code * revert code * Simplify just to modules and license key * extract the logic for finding EnterpriseCore * Not going to add globalGridOptions support * Update tests for modules and license * Switch to a nestable provider * Improve type safety for automatic license key * Fix tests * example generator * Update example generator * Update provided examples * update JSDoc * Fix formatting * update jsdoc * Small review fixes * re-use real code in tests * optimise module stability * update jsdoc comment --- .../demos/examples/finance/FinanceExample.tsx | 51 +- .../demos/examples/hr/HRExample.tsx | 36 +- .../examples/inventory/InventoryExample.tsx | 114 ++-- .../provided/reactFunctionalTs/index.tsx | 125 ++-- .../provided/reactFunctionalTs/index.tsx | 57 +- .../provided/reactFunctionalTs/index.tsx | 61 +- .../provided/reactFunctionalTs/index.tsx | 89 +-- .../provided/reactFunctionalTs/index.tsx | 45 +- .../provided/reactFunctionalTs/index.tsx | 51 +- .../provided/reactFunctionalTs/index.tsx | 17 +- .../provided/reactFunctionalTs/index.tsx | 17 +- .../provided/reactFunctionalTs/index.tsx | 27 +- .../provided/reactFunctionalTs/index.tsx | 40 +- .../provided/reactFunctionalTs/index.tsx | 39 +- .../provided/reactFunctionalTs/index.tsx | 17 +- .../provided/reactFunctionalTs/index.tsx | 22 +- .../provided/reactFunctionalTs/index.tsx | 40 +- .../provided/reactFunctionalTs/index.tsx | 29 +- .../provided/reactFunctionalTs/index.tsx | 43 +- .../provided/reactFunctionalTs/index.tsx | 72 +- .../provided/reactFunctionalTs/index.tsx | 32 +- .../provided/reactFunctionalTs/index.tsx | 37 +- .../provided/reactFunctionalTs/index.tsx | 29 +- .../provided/reactFunctionalTs/index.tsx | 30 +- .../provided/reactFunctionalTs/index.tsx | 36 +- .../provided/reactFunctionalTs/index.tsx | 40 +- .../provided/reactFunctionalTs/index.tsx | 32 +- .../provided/reactFunctionalTs/index.tsx | 40 +- .../provided/reactFunctionalTs/index.tsx | 37 +- .../provided/reactFunctionalTs/index.tsx | 93 +-- .../provided/reactFunctionalTs/index.tsx | 47 +- .../provided/reactFunctionalTs/index.tsx | 41 +- .../provided/reactFunctionalTs/index.tsx | 83 +-- .../provided/reactFunctionalTs/index.tsx | 14 +- .../provided/reactFunctionalTs/index.tsx | 32 +- .../provided/reactFunctionalTs/index.tsx | 18 +- .../provided/reactFunctionalTs/index.tsx | 18 +- .../provided/reactFunctionalTs/index.tsx | 32 +- .../provided/reactFunctionalTs/index.tsx | 30 +- .../provided/reactFunctionalTs/index.tsx | 34 +- .../provided/reactFunctionalTs/index.tsx | 18 +- .../provided/reactFunctionalTs/index.tsx | 30 +- .../provided/reactFunctionalTs/index.tsx | 99 +-- .../provided/reactFunctionalTs/index.tsx | 21 +- .../provided/reactFunctionalTs/index.tsx | 180 +++-- .../provided/reactFunctionalTs/index.tsx | 34 +- .../provided/reactFunctionalTs/index.tsx | 76 +-- .../provided/reactFunctionalTs/index.tsx | 18 +- .../provided/reactFunctionalTs/index.tsx | 129 ++-- .../provided/reactFunctionalTs/index.tsx | 73 ++- .../provided/reactFunctionalTs/index.tsx | 77 ++- .../provided/reactFunctionalTs/index.tsx | 79 ++- .../provided/reactFunctionalTs/index.tsx | 72 +- .../find/provided/reactFunctionalTs/index.tsx | 68 +- .../provided/reactFunctionalTs/index.tsx | 14 +- .../provided/reactFunctionalTs/index.tsx | 52 +- .../provided/reactFunctionalTs/index.tsx | 59 +- .../provided/reactFunctionalTs/index.tsx | 31 +- .../provided/angular/app.component.ts | 3 +- .../provided/reactFunctionalTs/index.tsx | 66 +- .../provided/angular/app.component.ts | 3 +- .../provided/reactFunctionalTs/index.tsx | 68 +- .../provided/reactFunctionalTs/index.tsx | 46 +- .../provided/reactFunctionalTs/index.tsx | 50 +- .../provided/reactFunctionalTs/index.tsx | 71 +- .../provided/reactFunctionalTs/index.tsx | 48 +- .../provided/reactFunctionalTs/index.tsx | 41 +- .../provided/reactFunctionalTs/index.tsx | 42 +- .../provided/reactFunctionalTs/index.tsx | 62 +- .../provided/reactFunctionalTs/index.tsx | 14 +- .../provided/reactFunctionalTs/index.tsx | 30 +- .../provided/reactFunctionalTs/index.tsx | 28 +- .../provided/reactFunctionalTs/index.tsx | 49 +- .../provided/reactFunctionalTs/index.tsx | 43 +- .../provided/reactFunctionalTs/index.tsx | 37 +- .../provided/reactFunctionalTs/index.tsx | 37 +- .../provided/reactFunctionalTs/index.tsx | 37 +- .../provided/reactFunctionalTs/index.tsx | 37 +- .../provided/reactFunctionalTs/index.tsx | 50 +- .../provided/reactFunctionalTs/index.tsx | 43 +- .../provided/reactFunctionalTs/index.tsx | 47 +- .../provided/reactFunctionalTs/index.tsx | 43 +- .../provided/reactFunctionalTs/index.tsx | 45 +- .../provided/reactFunctionalTs/index.tsx | 43 +- .../provided/reactFunctionalTs/index.tsx | 41 +- .../modules/reactFunctional/index.jsx | 34 - .../modules/reactFunctional/styles.css | 9 - .../modules/reactFunctionalTs/index.tsx | 40 -- .../modules/reactFunctionalTs/styles.css | 9 - .../provided/reactFunctionalTs/index.tsx | 82 +-- .../provided/reactFunctionalTs/index.tsx | 80 +-- .../provided/reactFunctionalTs/index.tsx | 50 +- .../provided/reactFunctionalTs/index.tsx | 46 +- .../provided/reactFunctionalTs/index.tsx | 41 +- .../modules/reactFunctional/index.jsx | 34 - .../modules/reactFunctional/styles.css | 9 - .../modules/reactFunctionalTs/index.tsx | 40 -- .../modules/reactFunctionalTs/styles.css | 9 - .../dev/provided/reactFunctionalTs/index.tsx | 14 +- .../provided/reactFunctionalTs/index.tsx | 60 +- .../provided/reactFunctionalTs/index.tsx | 38 +- .../provided/reactFunctionalTs/index.tsx | 51 +- .../provided/reactFunctionalTs/index.tsx | 72 +- .../provided/reactFunctionalTs/index.tsx | 27 +- .../provided/reactFunctionalTs/index.tsx | 27 +- .../provided/reactFunctionalTs/index.tsx | 21 +- .../provided/reactFunctionalTs/index.tsx | 44 +- .../provided/reactFunctionalTs/index.tsx | 46 +- .../provided/reactFunctionalTs/index.tsx | 71 +- .../provided/reactFunctionalTs/index.tsx | 37 +- .../provided/reactFunctionalTs/index.tsx | 29 +- .../provided/reactFunctionalTs/index.tsx | 34 +- .../provided/reactFunctionalTs/index.tsx | 105 ++- .../provided/reactFunctionalTs/index.tsx | 38 +- .../provided/reactFunctionalTs/index.tsx | 106 +-- .../provided/reactFunctionalTs/index.tsx | 37 +- .../provided/reactFunctionalTs/index.tsx | 64 +- .../provided/reactFunctionalTs/index.tsx | 65 +- .../provided/reactFunctionalTs/index.tsx | 40 +- .../provided/reactFunctionalTs/index.tsx | 40 +- .../provided/reactFunctionalTs/index.tsx | 32 +- .../provided/reactFunctionalTs/index.tsx | 25 +- .../src/interfaces/iModule.ts | 5 + .../ag-grid-community/src/main-internal.ts | 8 +- .../src/modules/moduleRegistry.ts | 18 +- .../src/agGridEnterpriseModule.ts | 5 +- packages/ag-grid-react/src/index.ts | 2 + .../src/reactUi/agGridProvider.tsx | 66 ++ .../src/reactUi/agGridReactUi.tsx | 13 +- .../grid-vanilla-to-react-functional-ts.ts | 24 +- .../src/modules/enterprise-modules.test.ts | 58 +- ...egistry-global-with-react-context.test.tsx | 158 +++++ .../modules/react-modules-provider.test.tsx | 620 ++++++++++++++++++ 133 files changed, 3643 insertions(+), 2941 deletions(-) delete mode 100644 documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/index.jsx delete mode 100644 documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/styles.css delete mode 100644 documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx delete mode 100644 documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css delete mode 100644 documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/index.jsx delete mode 100644 documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/styles.css delete mode 100644 documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx delete mode 100644 documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css create mode 100644 packages/ag-grid-react/src/reactUi/agGridProvider.tsx create mode 100644 testing/behavioural/src/modules/module-registry-global-with-react-context.test.tsx create mode 100644 testing/behavioural/src/modules/react-modules-provider.test.tsx 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 index 49c15fa94b8..b1dd5af46b4 100644 --- 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 = ({ const chartThemes = useMemo(() => (isDarkMode ? ['ag-default-dark'] : ['ag-default']), [isDarkMode]); return ( -
- -
+ +
+ +
+ ); }; 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 index 0cb336bf8ce..47c412ba5f5 100644 --- 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 = ({ gridTheme = 'ag-theme-quar }, []); return ( -
-
-
- + +
+
+
+ +
-
+ ); }; 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 index 8d60b2b6f2d..aa43974ec8c 100644 --- 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 = ({ gridTheme = 'ag-the }, []); return ( -
-
-
-
- {Object.entries(statuses).map(([key, displayValue]) => ( - + ))} +
+
+ - {displayValue} - - ))} -
-
- - - + + - +
+
+
+
-
- -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/ai-toolkit/_examples/natural-language-grid-state/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/ai-toolkit/_examples/natural-language-grid-state/provided/reactFunctionalTs/index.tsx index 73e2d48e02f..00000ba00ea 100644 --- a/documentation/ag-grid-docs/src/content/docs/ai-toolkit/_examples/natural-language-grid-state/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/ai-toolkit/_examples/natural-language-grid-state/provided/reactFunctionalTs/index.tsx @@ -1,17 +1,14 @@ import React, { StrictMode, useCallback, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ModuleRegistry } from 'ag-grid-community'; import { AllEnterpriseModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { callChatGPT } from './chatgptApi'; import { type IOlympicData, gridOptions } from './gridOptions'; import './styles.css'; import { useFetchJson } from './useFetchJson'; -ModuleRegistry.registerModules([AllEnterpriseModule]); - interface ChatMessage { prompt: string; response: string; @@ -123,71 +120,73 @@ const GridExample = () => { }, []); return ( -
-
-
-
- setNaturalLanguageInput(e.target.value)} - disabled={processingState.isProcessing} - placeholder="Your prompt e.g. 'hide age column'" - /> - -
- - {processingState.message && ( -
- - {processingState.message} - {processingState.status === 'processing' && ⧖} - {processingState.status === 'success' && ✓} - {processingState.status === 'error' && ✗} - + +
+
+
+
+ setNaturalLanguageInput(e.target.value)} + disabled={processingState.isProcessing} + placeholder="Your prompt e.g. 'hide age column'" + /> + +
+ + {processingState.message && ( +
+ + {processingState.message} + {processingState.status === 'processing' && ⧖} + {processingState.status === 'success' && ✓} + {processingState.status === 'error' && ✗} + +
+ )} + +
+
- )} +
-
- +
+ {chatMessage && ( +
+ Prompt +

{chatMessage.prompt}

+ Response +

{chatMessage.response}

+
+ )} + + {currentState && ( +
+

Current Grid State:

+ 
{currentState}
+
+ )}
-
- {chatMessage && ( -
- Prompt -

{chatMessage.prompt}

- Response -

{chatMessage.response}

-
- )} - - {currentState && ( -
-

Current Grid State:

- 
{currentState}
-
- )} -
+
- - -
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-column-groups/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-column-groups/provided/reactFunctionalTs/index.tsx index f558daa5168..908b5871197 100644 --- a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-column-groups/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-column-groups/provided/reactFunctionalTs/index.tsx @@ -7,22 +7,21 @@ import { ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, - ModuleRegistry, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, ColumnAutoSizeModule, ColumnApiModule, AlignedGridsModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const topGridRef = useRef(null); @@ -82,33 +81,35 @@ const GridExample = () => { }; return ( -
-
- -
+ +
+
+ +
-
+
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-floating-footer/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-floating-footer/provided/reactFunctionalTs/index.tsx index 71ac0fc7944..b5f09baba2d 100644 --- a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-floating-footer/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-floating-footer/provided/reactFunctionalTs/index.tsx @@ -6,17 +6,16 @@ import { AlignedGridsModule, ClientSideRowModelModule, ColumnAutoSizeModule, - ModuleRegistry, NumberFilterModule, RowStyleModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, NumberFilterModule, ColumnAutoSizeModule, @@ -24,7 +23,7 @@ ModuleRegistry.registerModules([ AlignedGridsModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const bottomData = [ { @@ -83,34 +82,36 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); return ( -
-
- -
+ +
+
+ +
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-grids/provided/reactFunctionalTs/index.tsx index 3950e4f3d2c..fc504b5f800 100644 --- a/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-grids/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/aligned-grids/_examples/aligned-grids/provided/reactFunctionalTs/index.tsx @@ -7,16 +7,15 @@ import { ClientSideRowModelModule, ColumnApiModule, ColumnAutoSizeModule, - ModuleRegistry, NumberFilterModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ColumnApiModule, TextFilterModule, NumberFilterModule, @@ -24,7 +23,7 @@ ModuleRegistry.registerModules([ AlignedGridsModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const topGrid = useRef(null); @@ -88,47 +87,49 @@ const GridExample = () => { }; return ( -
-
- - - + +
+
+ + + +
+ +
+ +
+ +
+ +
+ +
- -
- -
- -
- -
- -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row-test/_examples/full-row-editing-test/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row-test/_examples/full-row-editing-test/provided/reactFunctionalTs/index.tsx index ec7aeae05fc..a2eb2f1a846 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row-test/_examples/full-row-editing-test/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row-test/_examples/full-row-editing-test/provided/reactFunctionalTs/index.tsx @@ -6,7 +6,6 @@ import { ClientSideRowModelModule, ColumnApiModule, CustomEditorModule, - ModuleRegistry, NumberEditorModule, RenderApiModule, SelectEditorModule, @@ -14,13 +13,13 @@ import { ValidationModule, } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; const { StrictMode, useCallback, useMemo, useRef, useState } = React; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, ColumnsToolPanelModule, ColumnMenuModule, @@ -32,7 +31,7 @@ ModuleRegistry.registerModules([ ColumnApiModule, RenderApiModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; function getRowData(): any[] { const rowData: any[] = []; @@ -122,26 +121,28 @@ const GridExample = () => { }, []); return ( -
-
-
- - -
-
- + +
+
+
+ + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row/_examples/full-row-editing/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row/_examples/full-row-editing/provided/reactFunctionalTs/index.tsx index 6934335515e..3b6b4dbbff2 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row/_examples/full-row-editing/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-editing-full-row/_examples/full-row-editing/provided/reactFunctionalTs/index.tsx @@ -5,18 +5,17 @@ import type { CellValueChangedEvent, ColDef, RowValueChangedEvent } from 'ag-gri import { ClientSideRowModelModule, CustomEditorModule, - ModuleRegistry, SelectEditorModule, TextEditorModule, ValidationModule, } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import NumericCellEditor from './numericCellEditor'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ SelectEditorModule, ClientSideRowModelModule, ColumnsToolPanelModule, @@ -25,7 +24,7 @@ ModuleRegistry.registerModules([ CustomEditorModule, TextEditorModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; function getRowData(): any[] { const rowData: any[] = []; @@ -114,29 +113,31 @@ const GridExample = () => { }, []); return ( -
-
-
- - -
-
- + +
+
+
+ + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editing-validation/_examples/component-editor-validation/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editing-validation/_examples/component-editor-validation/provided/reactFunctionalTs/index.tsx index a9fedf73fe7..cb4c3716f57 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-editing-validation/_examples/component-editor-validation/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-editing-validation/_examples/component-editor-validation/provided/reactFunctionalTs/index.tsx @@ -5,26 +5,25 @@ import type { ColDef } from 'ag-grid-community'; import { ClientSideRowModelModule, CustomEditorModule, - ModuleRegistry, NumberEditorModule, TextEditorModule, ValidationModule, } from 'ag-grid-community'; import { RichSelectModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getData } from './data'; import PhoneEditor from './phoneEditor'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberEditorModule, TextEditorModule, CustomEditorModule, ClientSideRowModelModule, RichSelectModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -47,11 +46,13 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor-2/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor-2/provided/reactFunctionalTs/index.tsx index 6df97859e44..50172aad687 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor-2/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor-2/provided/reactFunctionalTs/index.tsx @@ -5,13 +5,12 @@ import type { ColDef } from 'ag-grid-community'; import { ClientSideRowModelModule, CustomEditorModule, - ModuleRegistry, NumberEditorModule, TextEditorModule, ValidationModule, } from 'ag-grid-community'; import { RichSelectModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getData } from './data'; import GenderRenderer from './genderRenderer'; @@ -20,14 +19,14 @@ import MoodRenderer from './moodRenderer'; import SimpleTextEditor from './simpleTextEditor'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberEditorModule, TextEditorModule, CustomEditorModule, ClientSideRowModelModule, RichSelectModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -72,11 +71,13 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor/provided/reactFunctionalTs/index.tsx index 843a3db6414..49d7c4f9a16 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/component-editor/provided/reactFunctionalTs/index.tsx @@ -5,23 +5,22 @@ import type { ColDef } from 'ag-grid-community'; import { ClientSideRowModelModule, CustomEditorModule, - ModuleRegistry, TextEditorModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import NumericEditor from './numericEditor'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ TextEditorModule, TextFilterModule, CustomEditorModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const [rowData] = useState([ @@ -69,16 +68,18 @@ const GridExample = () => { ); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/dynamic-editor-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/dynamic-editor-component/provided/reactFunctionalTs/index.tsx index 995b7947767..677092aa9fd 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/dynamic-editor-component/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/dynamic-editor-component/provided/reactFunctionalTs/index.tsx @@ -10,15 +10,9 @@ import type { RowEditingStartedEvent, RowEditingStoppedEvent, } from 'ag-grid-community'; -import { - ClientSideRowModelModule, - ModuleRegistry, - NumberEditorModule, - TextEditorModule, - ValidationModule, -} from 'ag-grid-community'; +import { ClientSideRowModelModule, NumberEditorModule, TextEditorModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, RichSelectModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IRow } from './data'; import { getData } from './data'; @@ -26,7 +20,7 @@ import MoodEditor from './moodEditor'; import NumericCellEditor from './numericCellEditor'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberEditorModule, TextEditorModule, ClientSideRowModelModule, @@ -35,7 +29,7 @@ ModuleRegistry.registerModules([ ColumnsToolPanelModule, RichSelectModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const cellEditorSelector: (params: ICellEditorParams) => CellEditorSelectorResult | undefined = ( params: ICellEditorParams @@ -99,19 +93,21 @@ const GridExample = () => { }, []); return ( -
-
- - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - onRowEditingStarted={onRowEditingStarted} - onRowEditingStopped={onRowEditingStopped} - onCellEditingStarted={onCellEditingStarted} - onCellEditingStopped={onCellEditingStopped} - /> + +
+
+ + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + onRowEditingStarted={onRowEditingStarted} + onRowEditingStopped={onRowEditingStopped} + onCellEditingStarted={onCellEditingStarted} + onCellEditingStopped={onCellEditingStopped} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/get-editor-instance/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/get-editor-instance/provided/reactFunctionalTs/index.tsx index 95462a756ff..ca1acbb4a51 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/get-editor-instance/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/get-editor-instance/provided/reactFunctionalTs/index.tsx @@ -5,26 +5,25 @@ import type { ColDef, GridReadyEvent, ICellEditor } from 'ag-grid-community'; import { ClientSideRowModelModule, CustomEditorModule, - ModuleRegistry, NumberEditorModule, TextEditorModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact, getInstance } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact, getInstance } from 'ag-grid-react'; import type { MySimpleInterface } from './mySimpleEditor'; import MySimpleEditor from './mySimpleEditor'; import './style.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberEditorModule, TextEditorModule, TextFilterModule, CustomEditorModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const createRowData = () => { const cloneObject = (obj: any) => JSON.parse(JSON.stringify(obj)); @@ -160,22 +159,24 @@ const GridExample = () => { ); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/popup-editor/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/popup-editor/provided/reactFunctionalTs/index.tsx index 098a6d98b10..374253fdb03 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/popup-editor/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-editors/_examples/popup-editor/provided/reactFunctionalTs/index.tsx @@ -5,27 +5,26 @@ import type { ColDef } from 'ag-grid-community'; import { ClientSideRowModelModule, CustomEditorModule, - ModuleRegistry, NumberEditorModule, TextEditorModule, ValidationModule, } from 'ag-grid-community'; import { RichSelectModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getData } from './data'; import MoodEditor from './moodEditor'; import MoodRenderer from './moodRenderer'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberEditorModule, TextEditorModule, CustomEditorModule, ClientSideRowModelModule, RichSelectModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -63,11 +62,13 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/cell-styles/_examples/cell-styling/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/cell-styles/_examples/cell-styling/provided/reactFunctionalTs/index.tsx index 0d2f27ff052..a9c5719692c 100644 --- a/documentation/ag-grid-docs/src/content/docs/cell-styles/_examples/cell-styling/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/cell-styles/_examples/cell-styling/provided/reactFunctionalTs/index.tsx @@ -5,23 +5,22 @@ import type { CellClassParams, CellClassRules, ColDef, ValueParserParams } from import { CellStyleModule, ClientSideRowModelModule, - ModuleRegistry, NumberEditorModule, TextEditorModule, ValidationModule, } from 'ag-grid-community'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberEditorModule, TextEditorModule, CellStyleModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const ragCellClassRules: CellClassRules = { 'rag-green-outer': (params) => params.value === 2008, @@ -127,11 +126,18 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/column-definitions/_examples/column-definition-update/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/column-definitions/_examples/column-definition-update/provided/reactFunctionalTs/index.tsx index b3149c87fd3..f83fdf92a9f 100644 --- a/documentation/ag-grid-docs/src/content/docs/column-definitions/_examples/column-definition-update/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/column-definitions/_examples/column-definition-update/provided/reactFunctionalTs/index.tsx @@ -2,17 +2,17 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react import { createRoot } from 'react-dom/client'; import type { ColDef, SizeColumnsToFitGridStrategy } from 'ag-grid-community'; -import { ClientSideRowModelModule, ColumnAutoSizeModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, ColumnAutoSizeModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ColumnAutoSizeModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const columnDefinitions: ColDef[] = [{ field: 'athlete' }, { field: 'age' }, { field: 'country' }, { field: 'sport' }]; @@ -48,23 +48,25 @@ const GridExample = () => { }, []); return ( -
-
-
- - -
-
- - ref={gridRef} - rowData={data} - loading={loading} - columnDefs={columnDefs} - autoSizeStrategy={autoSizeStrategy} - /> + +
+
+
+ + +
+
+ + ref={gridRef} + rowData={data} + loading={loading} + columnDefs={columnDefs} + autoSizeStrategy={autoSizeStrategy} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/dynamic-tooltips/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/dynamic-tooltips/provided/reactFunctionalTs/index.tsx index 9c9c5dd42a0..cfafe8f0fe2 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/dynamic-tooltips/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/dynamic-tooltips/provided/reactFunctionalTs/index.tsx @@ -4,25 +4,24 @@ import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; import { ClientSideRowModelModule, - ModuleRegistry, TextEditorModule, TextFilterModule, TooltipModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import AthleteCellRenderer from './athleteCellRenderer'; import type { IOlympicData } from './interfaces'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ TextEditorModule, TextFilterModule, ClientSideRowModelModule, TooltipModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef>(null); @@ -43,17 +42,19 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); return ( -
-
- - ref={gridRef} - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - /> + +
+
+ + ref={gridRef} + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/get-cell-renderer/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/get-cell-renderer/provided/reactFunctionalTs/index.tsx index 4bc4c8b447b..371571a4a97 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/get-cell-renderer/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/get-cell-renderer/provided/reactFunctionalTs/index.tsx @@ -1,10 +1,9 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import type { ColDef, GridReadyEvent, ValueGetterParams } from 'ag-grid-community'; +import type { ColDef, ValueGetterParams } from 'ag-grid-community'; import { ClientSideRowModelModule, - ModuleRegistry, NumberEditorModule, NumberFilterModule, RenderApiModule, @@ -13,13 +12,13 @@ import { TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import MedalCellRenderer from './medalCellRenderer'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ RenderApiModule, NumberEditorModule, TextEditorModule, @@ -28,7 +27,7 @@ ModuleRegistry.registerModules([ RowApiModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef>(null); @@ -91,25 +90,27 @@ const GridExample = () => { }, []); return ( -
-
-
- - - -
+ +
+
+
+ + + +
-
- - ref={gridRef} - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - /> +
+ + ref={gridRef} + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/handling-mouse-events/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/handling-mouse-events/provided/reactFunctionalTs/index.tsx index c930740a007..6d15e3f2c55 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/handling-mouse-events/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/handling-mouse-events/provided/reactFunctionalTs/index.tsx @@ -1,37 +1,33 @@ 'use client'; -import React, { StrictMode, useCallback, useMemo, useState } from 'react'; +import { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - type CellClickedEvent, - type CellDoubleClickedEvent, - type CellMouseDownEvent, - ClientSideRowModelModule, +import type { + CellClickedEvent, + CellDoubleClickedEvent, + CellMouseDownEvent, ColDef, EventCellRendererParams, - ModuleRegistry, - NumberEditorModule, - type RowClickedEvent, - type RowDoubleClickedEvent, - RowSelectionModule, + RowClickedEvent, + RowDoubleClickedEvent, RowSelectionOptions, SuppressMouseEventHandlingParams, - TextEditorModule, } from 'ag-grid-community'; +import { ClientSideRowModelModule, NumberEditorModule, RowSelectionModule, TextEditorModule } from 'ag-grid-community'; import { CellSelectionModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomButtonComponent from './customButtonComponent'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, CellSelectionModule, RowSelectionModule, TextEditorModule, NumberEditorModule, -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -87,29 +83,35 @@ const GridExample = () => { ); return ( -
-
-
- - -
+ +
+
+
+ + +
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/lazy-renderer/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/lazy-renderer/provided/reactFunctionalTs/index.tsx index 6985d25370d..0c3842f7a09 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/lazy-renderer/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-cell-renderer/_examples/lazy-renderer/provided/reactFunctionalTs/index.tsx @@ -3,18 +3,16 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ColDef, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; +import type { ColDef } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { IOlympicData } from './interfaces'; import { LazyCellLoader } from './lazyCellComp'; import './styles.css'; import { useFetchJson } from './useFetchJson'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; const LazyCellRenderer = React.lazy(LazyCellLoader); @@ -49,18 +47,20 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); return ( -
-
-
- - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - /> + +
+
+
+ + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-filter/_examples/filter-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-filter/_examples/filter-component/provided/reactFunctionalTs/index.tsx index 5f42e70664d..b9da86dd961 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-filter/_examples/filter-component/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-filter/_examples/filter-component/provided/reactFunctionalTs/index.tsx @@ -5,24 +5,23 @@ import type { ColDef, ColGroupDef, DoesFilterPassParams, FilterDisplay } from 'a import { ClientSideRowModelModule, CustomFilterModule, - ModuleRegistry, TextEditorModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact, getInstance } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact, getInstance } from 'ag-grid-react'; import { getData } from './data'; import PartialMatchFilter from './partialMatchFilter'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, TextEditorModule, CustomFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; function doesFilterPass({ model, node, handlerParams }: DoesFilterPassParams): boolean { const value = handlerParams.getValue(node).toString().toLowerCase(); @@ -67,23 +66,25 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ -
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter-and-floating-filter/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter-and-floating-filter/provided/reactFunctionalTs/index.tsx index 4f9a88feee5..1d84ab1ff5f 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter-and-floating-filter/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter-and-floating-filter/provided/reactFunctionalTs/index.tsx @@ -1,28 +1,27 @@ -import React, { StrictMode, useCallback, useMemo, useState } from 'react'; +import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; import { ClientSideRowModelModule, CustomFilterModule, - ModuleRegistry, NumberFilterModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import NumberFilterComponent from './numberFilterComponent'; import NumberFloatingFilterComponent from './numberFloatingFilterComponent'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, CustomFilterModule, NumberFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -67,16 +66,18 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); return ( -
-
- - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - /> + +
+
+ + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter/provided/reactFunctionalTs/index.tsx index 342d2384c79..e56c2b96108 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-filter/provided/reactFunctionalTs/index.tsx @@ -1,18 +1,18 @@ -import React, { StrictMode, useCallback, useMemo, useState } from 'react'; +import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { ClientSideRowModelModule, CustomFilterModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, CustomFilterModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import NumberFilterComponent from './numberFilterComponent'; -ModuleRegistry.registerModules([ +const modules = [ CustomFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -57,16 +57,18 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); return ( -
-
- - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - /> + +
+
+ + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-floating-filter/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-floating-filter/provided/reactFunctionalTs/index.tsx index d4c8357e716..9d2d588ba25 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-floating-filter/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/custom-floating-filter/provided/reactFunctionalTs/index.tsx @@ -1,25 +1,19 @@ -import React, { StrictMode, useCallback, useMemo, useState } from 'react'; +import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { - ClientSideRowModelModule, - ModuleRegistry, - NumberFilterModule, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import NumberFloatingFilterComponent from './numberFloatingFilterComponent'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, NumberFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -80,16 +74,18 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); return ( -
-
- - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - /> + +
+
+ + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/floating-filter-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/floating-filter-component/provided/reactFunctionalTs/index.tsx index 18079768219..11cd5ec2e58 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/floating-filter-component/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-floating-filter-legacy/_examples/floating-filter-component/provided/reactFunctionalTs/index.tsx @@ -1,24 +1,18 @@ -import React, { StrictMode, useCallback, useMemo, useState } from 'react'; +import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, INumberFilterParams } from 'ag-grid-community'; -import { - ClientSideRowModelModule, - ModuleRegistry, - NumberFilterModule, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import SliderFloatingFilter from './sliderFloatingFilter'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, NumberFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const filterParams: INumberFilterParams = { filterOptions: ['greaterThan'], @@ -77,19 +71,21 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); return ( -
-
-
- + +
+
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/custom-menu-item/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/custom-menu-item/provided/reactFunctionalTs/index.tsx index 5e7930c177f..0095c9ef11a 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/custom-menu-item/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/custom-menu-item/provided/reactFunctionalTs/index.tsx @@ -2,7 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, GetContextMenuItemsParams, GetMainMenuItemsParams } from 'ag-grid-community'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import { CellSelectionModule, ClipboardModule, @@ -10,12 +10,12 @@ import { ContextMenuModule, ExcelExportModule, } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import MenuItem from './menuItem'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, ColumnMenuModule, @@ -24,7 +24,7 @@ ModuleRegistry.registerModules([ CellSelectionModule, ClipboardModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -93,18 +93,20 @@ const GridExample = () => { }, []); return ( -
-
- - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - getMainMenuItems={getMainMenuItems} - getContextMenuItems={getContextMenuItems} - /> + +
+
+ + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + getMainMenuItems={getMainMenuItems} + getContextMenuItems={getContextMenuItems} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/menu-item-without-defaults/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/menu-item-without-defaults/provided/reactFunctionalTs/index.tsx index 34eb9ccd25c..77616ee7b07 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/menu-item-without-defaults/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-menu-item/_examples/menu-item-without-defaults/provided/reactFunctionalTs/index.tsx @@ -1,14 +1,8 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import type { ColDef, GetMainMenuItemsParams } from 'ag-grid-community'; -import { - ClientSideRowModelModule, - ModuleRegistry, - NumberFilterModule, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; +import type { ColDef, GetMainMenuItems } from 'ag-grid-community'; +import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; import { CellSelectionModule, ClipboardModule, @@ -16,13 +10,13 @@ import { ContextMenuModule, ExcelExportModule, } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import MenuItem from './menuItem'; import './style.css'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, NumberFilterModule, ClientSideRowModelModule, @@ -32,7 +26,7 @@ ModuleRegistry.registerModules([ CellSelectionModule, ClipboardModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -58,7 +52,7 @@ const GridExample = () => { const { data, loading } = useFetchJson('https://www.ag-grid.com/example-assets/olympic-winners.json'); - const getMainMenuItems = useCallback((params: GetMainMenuItemsParams) => { + const getMainMenuItems = useCallback((params) => { return [ ...params.defaultItems.filter((item) => item !== 'columnFilter'), 'separator', @@ -73,17 +67,19 @@ const GridExample = () => { }, []); return ( -
-
- - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - getMainMenuItems={getMainMenuItems} - /> + +
+
+ + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + getMainMenuItems={getMainMenuItems} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/component-tool-panel/_examples/custom-stats/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/component-tool-panel/_examples/custom-stats/provided/reactFunctionalTs/index.tsx index 3baa9c1a931..96348164c67 100644 --- a/documentation/ag-grid-docs/src/content/docs/component-tool-panel/_examples/custom-stats/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/component-tool-panel/_examples/custom-stats/provided/reactFunctionalTs/index.tsx @@ -6,7 +6,6 @@ import { ClientSideRowModelApiModule, ClientSideRowModelModule, EventApiModule, - ModuleRegistry, NumberEditorModule, NumberFilterModule, RowApiModule, @@ -17,12 +16,12 @@ import { themeQuartz, } from 'ag-grid-community'; import { ColumnsToolPanelModule, FiltersToolPanelModule, SetFilterModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomStatsToolPanel from './customStatsToolPanel'; import type { IOlympicData } from './interfaces'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, NumberEditorModule, TextEditorModule, @@ -35,7 +34,7 @@ ModuleRegistry.registerModules([ RowApiModule, EventApiModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const myTheme = themeQuartz.withPart( iconOverrides({ @@ -119,22 +118,24 @@ const GridExample = () => { }, []); return ( -
-
-
- - theme={myTheme} - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - icons={icons} - sideBar={sideBar} - onCellValueChanged={onCellValueChanged} - /> + +
+
+
+ + theme={myTheme} + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + icons={icons} + sideBar={sideBar} + onCellValueChanged={onCellValueChanged} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/context/_examples/monthly-sales/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/context/_examples/monthly-sales/provided/reactFunctionalTs/index.tsx index 744cc8cdb0e..5584f2f63e2 100644 --- a/documentation/ag-grid-docs/src/content/docs/context/_examples/monthly-sales/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/context/_examples/monthly-sales/provided/reactFunctionalTs/index.tsx @@ -6,7 +6,6 @@ import { CellStyleModule, ClientSideRowModelApiModule, ClientSideRowModelModule, - ModuleRegistry, QuickFilterModule, RenderApiModule, RowSelectionModule, @@ -14,11 +13,11 @@ import { } from 'ag-grid-community'; import { FiltersToolPanelModule, RowGroupingModule, SetFilterModule } from 'ag-grid-enterprise'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, RenderApiModule, RowSelectionModule, @@ -29,7 +28,7 @@ ModuleRegistry.registerModules([ SetFilterModule, FiltersToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const monthValueGetter = '(ctx.month < ctx.months.indexOf(colDef.field)) ? data[colDef.field + "_bud"] : data[colDef.field + "_act"]'; @@ -191,52 +190,54 @@ const GridExample = () => { }, []); return ( -
-
-
- onQuickFilterChanged(e.target.value)} - placeholder="Filter..." - /> - - - Period: - - - - Year to Jan + +
+
+
+ onQuickFilterChanged(e.target.value)} + placeholder="Filter..." + /> + + + Period: + + + + Year to Jan + - - - - Legend:   -
Actual   -
Budget - -
-
- + + Legend:   +
Actual   +
Budget + +
+ +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/add-rows-to-immutable-store/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/add-rows-to-immutable-store/provided/reactFunctionalTs/index.tsx index 6dd68787129..9ddfca96cb9 100644 --- a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/add-rows-to-immutable-store/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/add-rows-to-immutable-store/provided/reactFunctionalTs/index.tsx @@ -5,24 +5,23 @@ import type { ColDef, EditableCallbackParams, GetRowIdParams, RowEditingStoppedE import { ClientSideRowModelModule, ColumnApiModule, - ModuleRegistry, NumberEditorModule, PinnedRowModule, TextEditorModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getData } from './data'; -ModuleRegistry.registerModules([ +const modules = [ ColumnApiModule, ClientSideRowModelModule, TextEditorModule, NumberEditorModule, PinnedRowModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef(null); @@ -77,29 +76,31 @@ const GridExample = () => { ); return ( -
-
-
-
- + +
+
+
+
+ +
-
-
-
- +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/complex-immutable-store/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/complex-immutable-store/provided/reactFunctionalTs/index.tsx index d623337b380..1094eaee285 100644 --- a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/complex-immutable-store/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/complex-immutable-store/provided/reactFunctionalTs/index.tsx @@ -12,7 +12,6 @@ import { CellStyleModule, ClientSideRowModelModule, HighlightChangesModule, - ModuleRegistry, NumberFilterModule, RowSelectionModule, TextEditorModule, @@ -20,11 +19,11 @@ import { ValidationModule, } from 'ag-grid-community'; import { RowGroupingModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ HighlightChangesModule, TextEditorModule, NumberFilterModule, @@ -34,7 +33,7 @@ ModuleRegistry.registerModules([ ClientSideRowModelModule, RowGroupingModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const MIN_BOOK_COUNT = 10; const MAX_BOOK_COUNT = 20; @@ -401,25 +400,27 @@ const GridExample = () => { useEffect(() => setRowData(globalRowData), [globalRowData]); return ( -
-
-
- -
+ +
+
+
+ +
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/simple-immutable-store/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/simple-immutable-store/provided/reactFunctionalTs/index.tsx index fc23cbf5311..0d3bd35c2f5 100644 --- a/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/simple-immutable-store/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/data-update-row-data/_examples/simple-immutable-store/provided/reactFunctionalTs/index.tsx @@ -5,15 +5,14 @@ import type { ColDef, GetRowIdParams, GridApi, GridReadyEvent, RowSelectionOptio import { ClientSideRowModelModule, ColumnApiModule, - ModuleRegistry, RowSelectionModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; import { CellSelectionModule, RowGroupingModule, StatusBarModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; -ModuleRegistry.registerModules([ +const modules = [ ColumnApiModule, TextFilterModule, RowSelectionModule, @@ -22,7 +21,7 @@ ModuleRegistry.registerModules([ StatusBarModule, CellSelectionModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; // creates a unique symbol, eg 'ADG' or 'ZJD' function createUniqueRandomSymbol(data: any[]) { @@ -206,47 +205,49 @@ const GridExample = () => { }, [rowData]); return ( -
-
-
-
- - - - - + +
+
+
+
+ + + + + +
+
+ + + + + +
-
- - - - - -
-
-
-
- +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/basic-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/basic-example/provided/reactFunctionalTs/index.tsx index 1c8d0f10077..c94c4a825c9 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/basic-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/basic-example/provided/reactFunctionalTs/index.tsx @@ -4,11 +4,9 @@ import { createRoot } from 'react-dom/client'; // Theme import type { ColDef } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; +import { AllCommunityModule } from 'ag-grid-community'; // Core CSS -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Row Data Interface interface IRow { @@ -37,9 +35,11 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- -
+ +
+ +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/cell-renderer-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/cell-renderer-example/provided/reactFunctionalTs/index.tsx index 79d71501622..763c17468d2 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/cell-renderer-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/cell-renderer-example/provided/reactFunctionalTs/index.tsx @@ -1,15 +1,11 @@ // React Grid Logic -import React, { StrictMode, useEffect, useMemo, useState } from 'react'; +import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -// Theme import type { ColDef, ValueFormatterParams } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -// Core CSS +import { AllCommunityModule } from 'ag-grid-community'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Custom Cell Renderer (Display logos based on cell value) const CompanyLogoRenderer = (params: CustomCellRendererProps) => ( @@ -82,16 +78,18 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- {/* The AG Grid component, with Row Data & Column Definition props */} - -
+ +
+ {/* The AG Grid component, with Row Data & Column Definition props */} + +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/configure-columns-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/configure-columns-example/provided/reactFunctionalTs/index.tsx index 061239fc8c3..846db84ed8f 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/configure-columns-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/configure-columns-example/provided/reactFunctionalTs/index.tsx @@ -2,13 +2,9 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; -// Theme import type { ColDef } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -// Core CSS -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Row Data Interface interface IRow { @@ -40,10 +36,12 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- {/* The AG Grid component, with Row Data & Column Definition props */} - -
+ +
+ {/* The AG Grid component, with Row Data & Column Definition props */} + +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/default-columns-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/default-columns-example/provided/reactFunctionalTs/index.tsx index d6aeed4f780..6b5b2ce7f66 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/default-columns-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/default-columns-example/provided/reactFunctionalTs/index.tsx @@ -2,13 +2,9 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -// Theme import type { ColDef } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -// Core CSS -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Row Data Interface interface IRow { @@ -47,10 +43,12 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- {/* The AG Grid component, with Row Data & Column Definition props */} - -
+ +
+ {/* The AG Grid component, with Row Data & Column Definition props */} + +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-events-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-events-example/provided/reactFunctionalTs/index.tsx index 93459e3d4f6..1ef0df4d914 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-events-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-events-example/provided/reactFunctionalTs/index.tsx @@ -2,14 +2,10 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -// Theme import type { ColDef, ValueFormatterParams } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -// Core CSS +import { AllCommunityModule } from 'ag-grid-community'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Custom Cell Renderer (Display logos based on cell value) const CompanyLogoRenderer = (params: CustomCellRendererProps) => ( @@ -83,17 +79,19 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- {/* The AG Grid component, with Row Data & Column Definition props */} - console.log(`New Cell Value: ${event.value}`)} - /> -
+ +
+ {/* The AG Grid component, with Row Data & Column Definition props */} + console.log(`New Cell Value: ${event.value}`)} + /> +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-options-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-options-example/provided/reactFunctionalTs/index.tsx index f4ec3ab3958..e7511d12a5d 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-options-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/grid-options-example/provided/reactFunctionalTs/index.tsx @@ -2,13 +2,9 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -// Theme import type { ColDef } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -// Core CSS -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Row Data Interface interface IRow { @@ -47,16 +43,18 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- {/* The AG Grid component, with Row Data & Column Definition props */} - -
+ +
+ {/* The AG Grid component, with Row Data & Column Definition props */} + +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/testing-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/testing-example/provided/reactFunctionalTs/index.tsx index 77b27171a97..3c12456aac0 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/testing-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/testing-example/provided/reactFunctionalTs/index.tsx @@ -2,14 +2,10 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -// Theme import type { ColDef, RowSelectionOptions, ValueFormatterParams } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -// Core CSS +import { AllCommunityModule } from 'ag-grid-community'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Custom Cell Renderer (Display logos based on cell value) const CompanyLogoRenderer = (params: CustomCellRendererProps) => ( @@ -121,18 +117,20 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- console.log('Row Selected!')} - onCellValueChanged={(event) => console.log(`New Cell Value: ${event.value}`)} - /> -
+ +
+ console.log('Row Selected!')} + onCellValueChanged={(event) => console.log(`New Cell Value: ${event.value}`)} + /> +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/updating-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/updating-example/provided/reactFunctionalTs/index.tsx index 20347437395..89fbd2850ac 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/updating-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/updating-example/provided/reactFunctionalTs/index.tsx @@ -2,13 +2,9 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; -// Theme import type { ColDef } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -// Core CSS -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Row Data Interface interface IRow { @@ -40,10 +36,12 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- {/* The AG Grid component, with Row Data & Column Definition props */} - -
+ +
+ {/* The AG Grid component, with Row Data & Column Definition props */} + +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/value-formatter-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/value-formatter-example/provided/reactFunctionalTs/index.tsx index bcde7f0981b..a375d3e6760 100644 --- a/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/value-formatter-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/deep-dive/_examples/value-formatter-example/provided/reactFunctionalTs/index.tsx @@ -2,13 +2,9 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -// Theme import type { ColDef, ValueFormatterParams } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -// Core CSS -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Row Data Interface interface IRow { @@ -55,16 +51,18 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- {/* The AG Grid component, with Row Data & Column Definition props */} - -
+ +
+ {/* The AG Grid component, with Row Data & Column Definition props */} + +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/drag-and-drop/_examples/two-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/drag-and-drop/_examples/two-grids/provided/reactFunctionalTs/index.tsx index 8e182a19d65..bf2e69e29fd 100644 --- a/documentation/ag-grid-docs/src/content/docs/drag-and-drop/_examples/two-grids/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/drag-and-drop/_examples/two-grids/provided/reactFunctionalTs/index.tsx @@ -6,18 +6,17 @@ import { ClientSideRowModelApiModule, ClientSideRowModelModule, DragAndDropModule, - ModuleRegistry, RowApiModule, RowDragModule, RowStyleModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ DragAndDropModule, ClientSideRowModelApiModule, RowApiModule, @@ -26,7 +25,7 @@ ModuleRegistry.registerModules([ RowStyleModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const baseDefaultColDef: ColDef = { flex: 1, @@ -171,52 +170,54 @@ const GridExample = () => { }; return ( -
-
gridDrop('left', e)} - > - -
- -
- - - Trash - - - Drop target to destroy row - - dragStart('Red', e)} className="factory factory-red"> - - Create - - - Drag source for new red item - - dragStart('Green', e)} className="factory factory-green"> - - Create - - - Drag source for new green item - - dragStart('Blue', e)} className="factory factory-blue"> - - Create - - - Drag source for new blue item - -
- -
gridDrop('right', e)} - > - + +
+
gridDrop('left', e)} + > + +
+ +
+ + + Trash - + + Drop target to destroy row + + dragStart('Red', e)} className="factory factory-red"> + + Create - + + Drag source for new red item + + dragStart('Green', e)} className="factory factory-green"> + + Create - + + Drag source for new green item + + dragStart('Blue', e)} className="factory factory-blue"> + + Create - + + Drag source for new blue item + +
+ +
gridDrop('right', e)} + > + +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/excel-export-multiple-sheets/_examples/excel-export-multiple-sheets-multiple-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/excel-export-multiple-sheets/_examples/excel-export-multiple-sheets-multiple-grids/provided/reactFunctionalTs/index.tsx index d38a0bc6f11..38d2b193474 100644 --- a/documentation/ag-grid-docs/src/content/docs/excel-export-multiple-sheets/_examples/excel-export-multiple-sheets-multiple-grids/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/excel-export-multiple-sheets/_examples/excel-export-multiple-sheets-multiple-grids/provided/reactFunctionalTs/index.tsx @@ -13,7 +13,6 @@ import { ClientSideRowModelApiModule, ClientSideRowModelModule, CsvExportModule, - ModuleRegistry, RowDragModule, RowSelectionModule, TextFilterModule, @@ -21,11 +20,11 @@ import { } from 'ag-grid-community'; import { ExcelExportModule, exportMultipleSheetsAsExcel } from 'ag-grid-enterprise'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, TextFilterModule, RowDragModule, @@ -34,7 +33,7 @@ ModuleRegistry.registerModules([ CsvExportModule, ExcelExportModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const SportRenderer = (props: CustomCellRendererProps) => { return ( @@ -219,13 +218,15 @@ const GridExample = () => { ); return ( -
- {getTopToolBar()} -
- {getGridWrapper(0)} - {getGridWrapper(1)} + +
+ {getTopToolBar()} +
+ {getGridWrapper(0)} + {getGridWrapper(1)} +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/excel-export-page-setup/_examples/excel-export-page-setup/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/excel-export-page-setup/_examples/excel-export-page-setup/provided/reactFunctionalTs/index.tsx index 9f8b8df9495..69091617819 100644 --- a/documentation/ag-grid-docs/src/content/docs/excel-export-page-setup/_examples/excel-export-page-setup/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/excel-export-page-setup/_examples/excel-export-page-setup/provided/reactFunctionalTs/index.tsx @@ -2,20 +2,14 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, GridApi, GridReadyEvent } from 'ag-grid-community'; -import { - ClientSideRowModelModule, - ModuleRegistry, - NumberFilterModule, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; +import { ClientSideRowModelModule, NumberFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ContextMenuModule, ExcelExportModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, NumberFilterModule, ClientSideRowModelModule, @@ -23,7 +17,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, ExcelExportModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; function getNumber(id: string) { const el = document.querySelector(id) as any; @@ -96,92 +90,94 @@ const GridExample = () => { }, []); return ( -
-
-
) => onFormSubmit(e)}> -
-
- - + +
+
+ ) => onFormSubmit(e)}> +
+
+ + +
+
+ Margins + + + + + + +
+
+
+ +
+ +
+
+ + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + popupParent={popupParent} + onGridReady={onGridReady} + />
-
- Margins - - - - - - -
-
-
- -
- -
-
- - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - popupParent={popupParent} - onGridReady={onGridReady} - />
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/filter-date/_examples/custom-date/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/filter-date/_examples/custom-date/provided/reactFunctionalTs/index.tsx index fe421db2a45..30e94887500 100644 --- a/documentation/ag-grid-docs/src/content/docs/filter-date/_examples/custom-date/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/filter-date/_examples/custom-date/provided/reactFunctionalTs/index.tsx @@ -2,25 +2,19 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { - ClientSideRowModelModule, - DateFilterModule, - ModuleRegistry, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, DateFilterModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomDateComponent from './customDateComponent'; import type { IOlympicData } from './interfaces'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ DateFilterModule, TextFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -63,16 +57,18 @@ const GridExample = () => { }, []); return ( -
-
- - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - onGridReady={onGridReady} - /> + +
+
+ + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + onGridReady={onGridReady} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/filter-set-api/_examples/set-filter-api-case-sensitive/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/filter-set-api/_examples/set-filter-api-case-sensitive/provided/reactFunctionalTs/index.tsx index cc9f8db542b..dc454a03ea3 100644 --- a/documentation/ag-grid-docs/src/content/docs/filter-set-api/_examples/set-filter-api-case-sensitive/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/filter-set-api/_examples/set-filter-api-case-sensitive/provided/reactFunctionalTs/index.tsx @@ -2,22 +2,22 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react import { createRoot } from 'react-dom/client'; import type { ColDef, FirstDataRenderedEvent, SetFilterHandler } from 'ag-grid-community'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ContextMenuModule, FiltersToolPanelModule, SetFilterModule } from 'ag-grid-enterprise'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getData } from './data'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, SetFilterModule, ColumnMenuModule, ContextMenuModule, FiltersToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const colourCellRenderer = (props: CustomCellRendererProps) => { if (!props.value || props.value === '(Select All)') { @@ -115,43 +115,45 @@ const GridExample = () => { }, []); return ( -
-
-
-
- Case Insensitive: - - - - - + +
+
+
+
+ Case Insensitive: + + + + + +
+
+ Case Sensitive: + + + + + +
-
- Case Sensitive: - - - - - -
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/_examples/case-sensitive-set-filter-list/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/_examples/case-sensitive-set-filter-list/provided/reactFunctionalTs/index.tsx index ca412aabfa2..c9649ce21e9 100644 --- a/documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/_examples/case-sensitive-set-filter-list/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/filter-set-filter-list/_examples/case-sensitive-set-filter-list/provided/reactFunctionalTs/index.tsx @@ -2,7 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react import { createRoot } from 'react-dom/client'; import type { ColDef, FirstDataRenderedEvent } from 'ag-grid-community'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, @@ -11,9 +11,9 @@ import { SetFilterModule, } from 'ag-grid-enterprise'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, SetFilterModule, @@ -22,7 +22,7 @@ ModuleRegistry.registerModules([ ColumnsToolPanelModule, FiltersToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const colourCellRenderer = (props: CustomCellRendererProps) => { if (!props.value || props.value === '(Select All)') { @@ -39,10 +39,12 @@ const colourCellRenderer = (props: CustomCellRendererProps) => { backgroundColor: props.value.toLowerCase(), }; return ( - -
- {props.value} - + + +
+ {props.value} + + ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/customising-find/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/customising-find/provided/reactFunctionalTs/index.tsx index b3f8415c00e..e6045f7dbb0 100644 --- a/documentation/ag-grid-docs/src/content/docs/find/_examples/customising-find/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/customising-find/provided/reactFunctionalTs/index.tsx @@ -3,23 +3,14 @@ import React, { ChangeEvent, KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, - ColDef, - FindChangedEvent, - FindOptions, - GridReadyEvent, - ModuleRegistry, - PaginationModule, - PinnedRowModule, - ValidationModule, -} from 'ag-grid-community'; +import type { ColDef, FindChangedEvent, FindOptions, GridReadyEvent } from 'ag-grid-community'; +import { ClientSideRowModelModule, PaginationModule, PinnedRowModule, ValidationModule } from 'ag-grid-community'; import { FindModule, RowGroupingModule, RowGroupingPanelModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ FindModule, RowGroupingModule, RowGroupingPanelModule, @@ -27,7 +18,7 @@ ModuleRegistry.registerModules([ ClientSideRowModelModule, PaginationModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef(null); @@ -137,64 +128,66 @@ const GridExample = () => { }, []); return ( -
-
-
-
- - -
-
- Find: - - - - {activeMatchNum} + +
+
+
+
+ + +
+
+ Find: + + + + {activeMatchNum} +
+
+ Go to match: + + +
+
{activeMatch}
-
- Go to match: - - -
-
{activeMatch}
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-cell-components/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-cell-components/provided/reactFunctionalTs/index.tsx index 6ca634ae7fd..3727cec2066 100644 --- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-cell-components/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-cell-components/provided/reactFunctionalTs/index.tsx @@ -1,28 +1,29 @@ 'use client'; -import React, { type ChangeEvent, KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react'; +import React, { + type ChangeEvent, + type KeyboardEventHandler, + StrictMode, + useCallback, + useMemo, + useRef, + useState, +} from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, - ColDef, - FindChangedEvent, - GetFindTextParams, - GridReadyEvent, - ModuleRegistry, - ValidationModule, -} from 'ag-grid-community'; +import type { ColDef, FindChangedEvent, GetFindTextParams, GridReadyEvent } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import { FindModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import FindRenderer from './findRenderer'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ FindModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef(null); @@ -68,7 +69,7 @@ const GridExample = () => { setFindSearchValue(event.target.value); }, []); - const onKeyDown = useCallback((event: KeyboardEvent) => { + const onKeyDown = useCallback>((event) => { if (event.key === 'Enter') { event.preventDefault(); const backwards = event.shiftKey; @@ -89,31 +90,33 @@ const GridExample = () => { }, []); return ( -
-
-
-
- Find: - - - - {activeMatchNum} + +
+
+
+
+ Find: + + + + {activeMatchNum} +
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-custom-detail/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-custom-detail/provided/reactFunctionalTs/index.tsx index 8ccc355cdb6..8cd4b9ce50e 100644 --- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-custom-detail/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-custom-detail/provided/reactFunctionalTs/index.tsx @@ -3,8 +3,7 @@ import React, { type ChangeEvent, type KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, +import type { ColDef, FindChangedEvent, FindDetailCellRendererParams, @@ -12,23 +11,21 @@ import { FirstDataRenderedEvent, GetFindMatchesParams, GridReadyEvent, - ModuleRegistry, - RowApiModule, - ValidationModule, } from 'ag-grid-community'; +import { ClientSideRowModelModule, RowApiModule, ValidationModule } from 'ag-grid-community'; import { FindModule, MasterDetailModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import DetailCellRenderer from './detailCellRenderer'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ FindModule, ClientSideRowModelModule, MasterDetailModule, RowApiModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef(null); @@ -114,41 +111,43 @@ const GridExample = () => { }, []); return ( -
-
-
-
- Find: - - - - {activeMatchNum} -
-
- Go to match: - - + +
+
+
+
+ Find: + + + + {activeMatchNum} +
+
+ Go to match: + + +
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-detail-grid/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-detail-grid/provided/reactFunctionalTs/index.tsx index 917153b71c2..b7c8320a796 100644 --- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-detail-grid/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-detail-grid/provided/reactFunctionalTs/index.tsx @@ -3,33 +3,30 @@ import React, { type ChangeEvent, type KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, +import type { ColDef, FindChangedEvent, FindOptions, FirstDataRenderedEvent, - type GetDetailRowDataParams, - type GetFindMatchesParams, + GetDetailRowDataParams, + GetFindMatchesParams, GetRowIdParams, IDetailCellRendererParams, - ModuleRegistry, - RowApiModule, - ValidationModule, } from 'ag-grid-community'; +import { ClientSideRowModelModule, RowApiModule, ValidationModule } from 'ag-grid-community'; import { FindModule, MasterDetailModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getData } from './data'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ FindModule, ClientSideRowModelModule, MasterDetailModule, RowApiModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef(null); @@ -157,40 +154,42 @@ const GridExample = () => { }, []); return ( -
-
-
-
- Find: - - - - {activeMatchNum} -
-
- Go to match: - - + +
+
+
+
+ Find: + + + + {activeMatchNum} +
+
+ Go to match: + + +
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-full-width/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-full-width/provided/reactFunctionalTs/index.tsx index c6cf2a2c264..3c10259c50c 100644 --- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find-full-width/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find-full-width/provided/reactFunctionalTs/index.tsx @@ -3,29 +3,27 @@ import React, { type ChangeEvent, type KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, +import type { ColDef, FindChangedEvent, FindFullWidthCellRendererParams, GetFindMatchesParams, IsFullWidthRowParams, - ModuleRegistry, RowHeightParams, - ValidationModule, } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import { FindModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getData, getLatinText } from './data'; import FullWidthCellRenderer from './fullWidthCellRenderer'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ FindModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef(null); @@ -121,39 +119,41 @@ const GridExample = () => { }, []); return ( -
-
-
-
- Find: - - - - {activeMatchNum} -
-
- Go to match: - - + +
+
+
+
+ Find: + + + + {activeMatchNum} +
+
+ Go to match: + + +
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/find/_examples/find/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/find/_examples/find/provided/reactFunctionalTs/index.tsx index 119c93e845f..c8066002fc9 100644 --- a/documentation/ag-grid-docs/src/content/docs/find/_examples/find/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/find/_examples/find/provided/reactFunctionalTs/index.tsx @@ -3,24 +3,18 @@ import React, { type ChangeEvent, type KeyboardEvent, StrictMode, useCallback, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, - ColDef, - FindChangedEvent, - GridReadyEvent, - ModuleRegistry, - ValidationModule, -} from 'ag-grid-community'; +import type { ColDef, FindChangedEvent, GridReadyEvent } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import { FindModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ FindModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef(null); @@ -89,35 +83,37 @@ const GridExample = () => { }, []); return ( -
-
-
-
- Find: - - - - {activeMatchNum} -
-
- Go to match: - - + +
+
+
+
+ Find: + + + + {activeMatchNum} +
+
+ Go to match: + + +
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/getting-started/_examples/quick-start-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/getting-started/_examples/quick-start-example/provided/reactFunctionalTs/index.tsx index d2877556797..9b63f2164cc 100644 --- a/documentation/ag-grid-docs/src/content/docs/getting-started/_examples/quick-start-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/getting-started/_examples/quick-start-example/provided/reactFunctionalTs/index.tsx @@ -2,10 +2,8 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Row Data Interface interface IRow { @@ -41,9 +39,11 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- -
+ +
+ +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/grid-ready/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/grid-ready/provided/reactFunctionalTs/index.tsx index 35f8444f9e8..9080a3ddadb 100644 --- a/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/grid-ready/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/grid-ready/provided/reactFunctionalTs/index.tsx @@ -2,17 +2,17 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react import { createRoot } from 'react-dom/client'; import type { ColDef, GridReadyEvent } from 'ag-grid-community'; -import { ClientSideRowModelModule, ColumnApiModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, ColumnApiModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getData } from './data'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ColumnApiModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef(null); @@ -46,32 +46,34 @@ const GridExample = () => { }, []); return ( -
-
-
-
- - -
+ +
+
+
+
+ + +
-
- +
+ +
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/row-data-updated/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/row-data-updated/provided/reactFunctionalTs/index.tsx index 934facee4c8..a62fa362436 100644 --- a/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/row-data-updated/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/grid-lifecycle/_examples/row-data-updated/provided/reactFunctionalTs/index.tsx @@ -1,18 +1,15 @@ -import React, { StrictMode, useCallback, useEffect, useRef, useState } from 'react'; +import React, { StrictMode, useCallback, useEffect, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import type { ColDef, FirstDataRenderedEvent, RowDataUpdatedEvent } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; +import type { FirstDataRenderedEvent, RowDataUpdatedEvent } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { fetchDataAsync } from './data'; import type { TAthlete } from './data'; import './styles.css'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; const updateRowCount = (id: string) => { const element = document.querySelector(`#${id} > .value`); @@ -58,31 +55,33 @@ const GridExample = () => { useEffect(reloadData, []); return ( -
-
-
- First Data Rendered: - + +
+
+
+ First Data Rendered: - +
+
+ Row Data Updated: - +
+
+ +
-
- Row Data Updated: - -
-
- -
-
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/grid-size/_examples/width-and-height/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-size/_examples/width-and-height/provided/reactFunctionalTs/index.tsx index 1ae0368a73e..eaea878e7f3 100644 --- a/documentation/ag-grid-docs/src/content/docs/grid-size/_examples/width-and-height/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/grid-size/_examples/width-and-height/provided/reactFunctionalTs/index.tsx @@ -2,15 +2,12 @@ import React, { StrictMode, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; const GridExample = () => { const gridRef = useRef(null); @@ -57,18 +54,20 @@ const GridExample = () => { }; return ( -
-
- - - -
-
-
- + +
+
+ + + +
+
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/angular/app.component.ts b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/angular/app.component.ts index 87ad6d0a9f9..a8208fa3e23 100644 --- a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/angular/app.component.ts +++ b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/angular/app.component.ts @@ -3,6 +3,7 @@ import { Component, signal } from '@angular/core'; import { AgGridAngular } from 'ag-grid-angular'; import type { + AutoGroupColumnDef, ColDef, GridApi, GridOptions, @@ -101,7 +102,7 @@ export class AppComponent { enablePivot: true, enableValue: true, }; - public autoGroupColumnDef: ColDef = { minWidth: 200 }; + public autoGroupColumnDef: AutoGroupColumnDef = { minWidth: 200 }; public rowSelection: RowSelectionOptions = { mode: 'multiRow', }; diff --git a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/reactFunctionalTs/index.tsx index 0f7bec65d9a..41387cece6f 100644 --- a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/grid-state/provided/reactFunctionalTs/index.tsx @@ -2,6 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react import { createRoot } from 'react-dom/client'; import type { + AutoGroupColumnDef, ColDef, GridPreDestroyedEvent, GridState, @@ -11,7 +12,6 @@ import type { import { ClientSideRowModelModule, GridStateModule, - ModuleRegistry, NumberFilterModule, PaginationModule, RowSelectionModule, @@ -24,13 +24,13 @@ import { PivotModule, SetFilterModule, } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import './styles.css'; import { useFetchJson } from './useFetchJson'; -ModuleRegistry.registerModules([ +const modules = [ NumberFilterModule, RowSelectionModule, GridStateModule, @@ -42,7 +42,7 @@ ModuleRegistry.registerModules([ CellSelectionModule, PivotModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef>(null); @@ -70,7 +70,7 @@ const GridExample = () => { enableValue: true, }; }, []); - const autoGroupColumnDef = useMemo(() => { + const autoGroupColumnDef = useMemo(() => { return { minWidth: 200 }; }, []); const rowSelection = useMemo( @@ -108,35 +108,37 @@ const GridExample = () => { }, [currentState]); return ( -
-
-
- - - - -
-
- {gridVisible && ( - - ref={gridRef} - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - autoGroupColumnDef={autoGroupColumnDef} - sideBar={true} - pagination={true} - rowSelection={rowSelection} - suppressColumnMoveAnimation={true} - initialState={initialState} - onGridPreDestroyed={onGridPreDestroyed} - onStateUpdated={onStateUpdated} - /> - )} + +
+
+
+ + + + +
+
+ {gridVisible && ( + + ref={gridRef} + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + autoGroupColumnDef={autoGroupColumnDef} + sideBar={true} + pagination={true} + rowSelection={rowSelection} + suppressColumnMoveAnimation={true} + initialState={initialState} + onGridPreDestroyed={onGridPreDestroyed} + onStateUpdated={onStateUpdated} + /> + )} +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/angular/app.component.ts b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/angular/app.component.ts index 7623b4d2eea..f8d92063d59 100644 --- a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/angular/app.component.ts +++ b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/angular/app.component.ts @@ -3,6 +3,7 @@ import { Component, signal } from '@angular/core'; import { AgGridAngular } from 'ag-grid-angular'; import type { + AutoGroupColumnDef, ColDef, GridApi, GridOptions, @@ -102,7 +103,7 @@ export class AppComponent { enablePivot: true, enableValue: true, }; - public autoGroupColumnDef: ColDef = { minWidth: 200 }; + public autoGroupColumnDef: AutoGroupColumnDef = { minWidth: 200 }; public rowSelection: RowSelectionOptions = { mode: 'multiRow', }; diff --git a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/reactFunctionalTs/index.tsx index 80738810395..6b98aab636c 100644 --- a/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/grid-state/_examples/set-state/provided/reactFunctionalTs/index.tsx @@ -2,6 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react import { createRoot } from 'react-dom/client'; import type { + AutoGroupColumnDef, ColDef, GridPreDestroyedEvent, GridReadyEvent, @@ -12,7 +13,6 @@ import type { import { ClientSideRowModelModule, GridStateModule, - ModuleRegistry, NumberFilterModule, PaginationModule, RowSelectionModule, @@ -25,12 +25,12 @@ import { PivotModule, SetFilterModule, } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IOlympicData } from './interfaces'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberFilterModule, RowSelectionModule, GridStateModule, @@ -42,7 +42,7 @@ ModuleRegistry.registerModules([ CellSelectionModule, PivotModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const gridRef = useRef>(null); @@ -71,7 +71,7 @@ const GridExample = () => { enableValue: true, }; }, []); - const autoGroupColumnDef = useMemo(() => { + const autoGroupColumnDef = useMemo(() => { return { minWidth: 200 }; }, []); const rowSelection = useMemo( @@ -125,36 +125,38 @@ const GridExample = () => { }, [savedState]); return ( -
-
-
- - - - - - -
-
- {gridVisible && ( - - ref={gridRef} - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - autoGroupColumnDef={autoGroupColumnDef} - sideBar={true} - pagination={true} - rowSelection={rowSelection} - suppressColumnMoveAnimation={true} - onGridReady={onGridReady} - onGridPreDestroyed={onGridPreDestroyed} - onStateUpdated={onStateUpdated} - /> - )} + +
+
+
+ + + + + + +
+
+ {gridVisible && ( + + ref={gridRef} + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + autoGroupColumnDef={autoGroupColumnDef} + sideBar={true} + pagination={true} + rowSelection={rowSelection} + suppressColumnMoveAnimation={true} + onGridReady={onGridReady} + onGridPreDestroyed={onGridPreDestroyed} + onStateUpdated={onStateUpdated} + /> + )} +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-equal-page/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-equal-page/provided/reactFunctionalTs/index.tsx index 2bbb29a2ddd..0d0fb655ab8 100644 --- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-equal-page/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-equal-page/provided/reactFunctionalTs/index.tsx @@ -2,21 +2,15 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, GetRowIdParams, GridReadyEvent, IDatasource } from 'ag-grid-community'; -import { - InfiniteRowModelModule, - ModuleRegistry, - NumberFilterModule, - PaginationModule, - ValidationModule, -} from 'ag-grid-community'; +import { InfiniteRowModelModule, NumberFilterModule, PaginationModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, SetFilterModule } from 'ag-grid-enterprise'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { countries } from './countries'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberFilterModule, PaginationModule, InfiniteRowModelModule, @@ -25,7 +19,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, ColumnsToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const filterParams = { values: countries() }; @@ -202,22 +196,24 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-larger-page/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-larger-page/provided/reactFunctionalTs/index.tsx index b019429ca93..d7511c6582b 100644 --- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-larger-page/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/block-larger-page/provided/reactFunctionalTs/index.tsx @@ -2,20 +2,14 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, GetRowIdParams, GridReadyEvent, IDatasource } from 'ag-grid-community'; -import { - InfiniteRowModelModule, - ModuleRegistry, - NumberFilterModule, - PaginationModule, - ValidationModule, -} from 'ag-grid-community'; +import { InfiniteRowModelModule, NumberFilterModule, PaginationModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, SetFilterModule } from 'ag-grid-enterprise'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { countries } from './countries'; -ModuleRegistry.registerModules([ +const modules = [ NumberFilterModule, PaginationModule, InfiniteRowModelModule, @@ -24,7 +18,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, ColumnsToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const filterParams = { values: countries() }; @@ -198,24 +192,26 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/insert-remove/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/insert-remove/provided/reactFunctionalTs/index.tsx index 1304b4855bc..4f98e409d5d 100644 --- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/insert-remove/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/insert-remove/provided/reactFunctionalTs/index.tsx @@ -11,22 +11,21 @@ import type { } from 'ag-grid-community'; import { InfiniteRowModelModule, - ModuleRegistry, RowApiModule, RowStyleModule, ScrollApiModule, ValidationModule, } from 'ag-grid-community'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; -ModuleRegistry.registerModules([ +const modules = [ RowApiModule, ScrollApiModule, RowStyleModule, InfiniteRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const valueFormatter = function (params: ValueFormatterParams) { if (typeof params.value === 'number') { @@ -208,40 +207,42 @@ const GridExample = () => { }, []); return ( -
-
-
- - - - - -
-
- - - - -
-
-
- + +
+
+
+ + + + + +
+
+ + + + +
+
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/server-side/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/server-side/provided/reactFunctionalTs/index.tsx index b3dd81f3853..e0c0a68d0b8 100644 --- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/server-side/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/server-side/provided/reactFunctionalTs/index.tsx @@ -2,20 +2,14 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, GetRowIdParams, GridReadyEvent, IDatasource, RowSelectionOptions } from 'ag-grid-community'; -import { - InfiniteRowModelModule, - ModuleRegistry, - NumberFilterModule, - RowSelectionModule, - ValidationModule, -} from 'ag-grid-community'; +import { InfiniteRowModelModule, NumberFilterModule, RowSelectionModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, SetFilterModule } from 'ag-grid-enterprise'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import { getCountries } from './countries'; -ModuleRegistry.registerModules([ +const modules = [ NumberFilterModule, RowSelectionModule, InfiniteRowModelModule, @@ -24,7 +18,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, ColumnsToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const filterParams = { values: getCountries() }; @@ -206,23 +200,25 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/simple/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/simple/provided/reactFunctionalTs/index.tsx index 79fce1e3ec2..070c5734e95 100644 --- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/simple/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/simple/provided/reactFunctionalTs/index.tsx @@ -2,14 +2,11 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, GridReadyEvent, IDatasource } from 'ag-grid-community'; -import { InfiniteRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { InfiniteRowModelModule, ValidationModule } from 'ag-grid-community'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; -ModuleRegistry.registerModules([ - InfiniteRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [InfiniteRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -78,22 +75,24 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/specify-selectable-rows/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/specify-selectable-rows/provided/reactFunctionalTs/index.tsx index 1e3f6598567..b487d44a6d2 100644 --- a/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/specify-selectable-rows/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/infinite-scrolling/_examples/specify-selectable-rows/provided/reactFunctionalTs/index.tsx @@ -2,15 +2,15 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, GridReadyEvent, IDatasource, IRowNode, RowSelectionOptions } from 'ag-grid-community'; -import { InfiniteRowModelModule, ModuleRegistry, RowSelectionModule, ValidationModule } from 'ag-grid-community'; +import { InfiniteRowModelModule, RowSelectionModule, ValidationModule } from 'ag-grid-community'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; -ModuleRegistry.registerModules([ +const modules = [ RowSelectionModule, InfiniteRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const rowSelection: RowSelectionOptions = { mode: 'multiRow', @@ -88,23 +88,25 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/integrated-charts-container/_examples/provided-container/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/integrated-charts-container/_examples/provided-container/provided/reactFunctionalTs/index.tsx index 43e86496304..6fe6a12be98 100644 --- a/documentation/ag-grid-docs/src/content/docs/integrated-charts-container/_examples/provided-container/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/integrated-charts-container/_examples/provided-container/provided/reactFunctionalTs/index.tsx @@ -3,20 +3,20 @@ import React, { StrictMode, useCallback, useEffect, useMemo, useRef, useState } import { createRoot } from 'react-dom/client'; import type { ChartRef, ColDef, GridReadyEvent } from 'ag-grid-community'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ContextMenuModule, IntegratedChartsModule, RowGroupingModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, IntegratedChartsModule.with(AgChartsEnterpriseModule), ColumnMenuModule, ContextMenuModule, RowGroupingModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const containerStyle = useMemo(() => ({ width: '100%', height: '100%' }), []); @@ -66,36 +66,38 @@ const GridExample = () => { }, [chartRef]); return ( -
-
-
- -
- {chartRef ? ( -
-
-

- Chart created at {new Date().toLocaleString()} -

- + +
+
+
+ +
+ {chartRef ? ( +
+
+

+ Chart created at {new Date().toLocaleString()} +

+ +
-
- ) : ( -
Chart will be displayed here.
- )} + ) : ( +
Chart will be displayed here.
+ )} +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/key-features/_examples/showing-data-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/key-features/_examples/showing-data-example/provided/reactFunctionalTs/index.tsx index 073b0965091..5c8457639bf 100644 --- a/documentation/ag-grid-docs/src/content/docs/key-features/_examples/showing-data-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/key-features/_examples/showing-data-example/provided/reactFunctionalTs/index.tsx @@ -2,10 +2,8 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, ColGroupDef, ValueGetterParams } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; const CustomButtonComponent = () => { return ; @@ -31,11 +29,13 @@ const GridExample = () => { { field: 'button', cellRenderer: CustomButtonComponent, flex: 1 }, ]); return ( -
+
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/key-features/_examples/working-with-data-example/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/key-features/_examples/working-with-data-example/provided/reactFunctionalTs/index.tsx index 74bf914e44e..136f363bd34 100644 --- a/documentation/ag-grid-docs/src/content/docs/key-features/_examples/working-with-data-example/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/key-features/_examples/working-with-data-example/provided/reactFunctionalTs/index.tsx @@ -2,10 +2,8 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, RowSelectionOptions } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; const rowSelection: RowSelectionOptions = { mode: 'multiRow', @@ -96,17 +94,19 @@ const GridExample = () => { }, []); return ( -
- -
+ +
+ +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/cell-renderer-keyboard-navigation/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/cell-renderer-keyboard-navigation/provided/reactFunctionalTs/index.tsx index 16aa21ec842..b1b6f0d8947 100644 --- a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/cell-renderer-keyboard-navigation/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/cell-renderer-keyboard-navigation/provided/reactFunctionalTs/index.tsx @@ -2,17 +2,17 @@ import React, { StrictMode, useCallback, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef, GridReadyEvent, SuppressKeyboardEventParams } from 'ag-grid-community'; -import { ClientSideRowModelModule, ModuleRegistry, TextFilterModule, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomElements from './customElements'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ TextFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GRID_CELL_CLASSNAME = 'ag-cell'; @@ -136,16 +136,18 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/custom-tabbing-into-grid/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/custom-tabbing-into-grid/provided/reactFunctionalTs/index.tsx index 5e15f834299..02587575558 100644 --- a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/custom-tabbing-into-grid/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/custom-tabbing-into-grid/provided/reactFunctionalTs/index.tsx @@ -12,25 +12,24 @@ import type { } from 'ag-grid-community'; import { ClientSideRowModelModule, - ModuleRegistry, NumberEditorModule, NumberFilterModule, TextEditorModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberEditorModule, TextEditorModule, TextFilterModule, NumberFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const [lastFocused, setLastFocused] = useState< @@ -96,31 +95,33 @@ const GridExample = () => { ); return ( -
-
-
+ +
+
+
+
+ + +
+
+
+ +
- +
-
- -
-
- - -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/tabbing-into-grid/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/tabbing-into-grid/provided/reactFunctionalTs/index.tsx index a0873e248e8..f0e2f5ee716 100644 --- a/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/tabbing-into-grid/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/keyboard-navigation/_examples/tabbing-into-grid/provided/reactFunctionalTs/index.tsx @@ -4,25 +4,24 @@ import { createRoot } from 'react-dom/client'; import type { ColDef, GridReadyEvent } from 'ag-grid-community'; import { ClientSideRowModelModule, - ModuleRegistry, NumberEditorModule, NumberFilterModule, TextEditorModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ NumberEditorModule, TextEditorModule, TextFilterModule, NumberFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const columnDefs = useMemo( @@ -62,28 +61,30 @@ const GridExample = () => { ); return ( -
-
-
+ +
+
+
+
+ + +
+
+
+ +
- +
-
- -
-
- - -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/master-detail-custom-detail/_examples/custom-detail-with-refresh/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/master-detail-custom-detail/_examples/custom-detail-with-refresh/provided/reactFunctionalTs/index.tsx index dc40ab756a2..27f5eb73c58 100644 --- a/documentation/ag-grid-docs/src/content/docs/master-detail-custom-detail/_examples/custom-detail-with-refresh/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/master-detail-custom-detail/_examples/custom-detail-with-refresh/provided/reactFunctionalTs/index.tsx @@ -6,17 +6,16 @@ import { ClientSideRowModelApiModule, ClientSideRowModelModule, HighlightChangesModule, - ModuleRegistry, ValidationModule, } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, MasterDetailModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import DetailCellRenderer from './detailCellRenderer'; import type { IAccount } from './interfaces'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, HighlightChangesModule, ClientSideRowModelModule, @@ -25,7 +24,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, ColumnsToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; let allRowData: any[]; @@ -89,21 +88,23 @@ const GridExample = () => { ); return ( -
-
- - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - masterDetail={true} - detailCellRenderer={detailCellRenderer} - detailRowHeight={70} - groupDefaultExpanded={1} - onGridReady={onGridReady} - onFirstDataRendered={onFirstDataRendered} - /> + +
+
+ + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + masterDetail={true} + detailCellRenderer={detailCellRenderer} + detailRowHeight={70} + groupDefaultExpanded={1} + onGridReady={onGridReady} + onFirstDataRendered={onFirstDataRendered} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-everything/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-everything/provided/reactFunctionalTs/index.tsx index 2f39c0c78b1..132818428a9 100644 --- a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-everything/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-everything/provided/reactFunctionalTs/index.tsx @@ -6,18 +6,17 @@ import { ClientSideRowModelApiModule, ClientSideRowModelModule, HighlightChangesModule, - ModuleRegistry, RowApiModule, RowSelectionModule, ValidationModule, } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, MasterDetailModule } from 'ag-grid-enterprise'; import type { CustomDetailCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IAccount } from './interfaces'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, RowSelectionModule, RowApiModule, @@ -28,7 +27,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, ColumnsToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; let allRowData: any[]; @@ -122,21 +121,23 @@ const GridExample = () => { ); return ( -
-
- - ref={gridRef} - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - getRowId={getRowId} - masterDetail={true} - detailCellRendererParams={detailCellRendererParams} - onGridReady={onGridReady} - onFirstDataRendered={onFirstDataRendered} - /> + +
+
+ + ref={gridRef} + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + getRowId={getRowId} + masterDetail={true} + detailCellRendererParams={detailCellRendererParams} + onGridReady={onGridReady} + onFirstDataRendered={onFirstDataRendered} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-nothing/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-nothing/provided/reactFunctionalTs/index.tsx index 248bda5595c..ebcdd045ea8 100644 --- a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-nothing/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-nothing/provided/reactFunctionalTs/index.tsx @@ -6,18 +6,17 @@ import { ClientSideRowModelApiModule, ClientSideRowModelModule, HighlightChangesModule, - ModuleRegistry, RowApiModule, RowSelectionModule, ValidationModule, } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, MasterDetailModule } from 'ag-grid-enterprise'; import type { CustomDetailCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { IAccount } from './interfaces'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, RowSelectionModule, RowApiModule, @@ -28,7 +27,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, ColumnsToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; let allRowData: any[]; @@ -124,21 +123,23 @@ const GridExample = () => { ); return ( -
-
- - ref={gridRef} - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - getRowId={getRowId} - masterDetail={true} - detailCellRendererParams={detailCellRendererParams} - onGridReady={onGridReady} - onFirstDataRendered={onFirstDataRendered} - /> + +
+
+ + ref={gridRef} + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + getRowId={getRowId} + masterDetail={true} + detailCellRendererParams={detailCellRendererParams} + onGridReady={onGridReady} + onFirstDataRendered={onFirstDataRendered} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-rows/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-rows/provided/reactFunctionalTs/index.tsx index 06acf781473..71f4f6a909c 100644 --- a/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-rows/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/master-detail-refresh/_examples/refresh-rows/provided/reactFunctionalTs/index.tsx @@ -12,15 +12,14 @@ import { ClientSideRowModelApiModule, ClientSideRowModelModule, HighlightChangesModule, - ModuleRegistry, RowApiModule, RowSelectionModule, ValidationModule, } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, MasterDetailModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, RowSelectionModule, RowApiModule, @@ -31,7 +30,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, ColumnsToolPanelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; let allRowData: any[]; @@ -126,21 +125,23 @@ const GridExample = () => { }, []); return ( -
-
- + +
+
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/modules/_examples/individual-registration/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/modules/_examples/individual-registration/provided/reactFunctionalTs/index.tsx index d9ee41f01ba..24ace9a2fee 100644 --- a/documentation/ag-grid-docs/src/content/docs/modules/_examples/individual-registration/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/modules/_examples/individual-registration/provided/reactFunctionalTs/index.tsx @@ -4,7 +4,6 @@ import { createRoot } from 'react-dom/client'; import { ClientSideRowModelModule, CsvExportModule, - ModuleRegistry, NumberFilterModule, TextFilterModule, ValidationModule, @@ -17,7 +16,7 @@ import { ExcelExportModule, SetFilterModule, } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; @@ -30,9 +29,6 @@ const sharedModules = [ const leftModules = [SetFilterModule, ClipboardModule, CsvExportModule]; const rightModules = [TextFilterModule, NumberFilterModule, CsvExportModule, ExcelExportModule]; -// Register shared Modules globally -ModuleRegistry.registerModules(sharedModules); - const columns: ColDef[] = [{ field: 'id' }, { field: 'color' }, { field: 'value1' }]; const defaultColDef: ColDef = { @@ -72,29 +68,31 @@ const GridExample = () => { }, []); return ( -
-
- -
+ +
+
+ +
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-component/provided/reactFunctionalTs/index.tsx index 32f0a51ea7b..eefa571554b 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-component/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-component/provided/reactFunctionalTs/index.tsx @@ -1,18 +1,15 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import type { CustomParams } from './customOverlay'; import { CustomOverlay } from './customOverlay'; import './styles.css'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; interface IAthlete { athlete: string; @@ -36,24 +33,26 @@ const GridExample = () => { const [activeOverlayParams, setActiveOverlayParams] = useState({ count: 1 }); return ( -
-
- - - -
+ +
+
+ + + +
-
- - rowData={rowData} - columnDefs={columnDefs} - activeOverlay={activeOverlay} - activeOverlayParams={activeOverlayParams} - /> +
+ + rowData={rowData} + columnDefs={columnDefs} + activeOverlay={activeOverlay} + activeOverlayParams={activeOverlayParams} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-switcher/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-switcher/provided/reactFunctionalTs/index.tsx index 6c39bf9f77e..558da03a45e 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-switcher/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays-active/_examples/active-overlay-switcher/provided/reactFunctionalTs/index.tsx @@ -1,17 +1,14 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import StatusOverlay from './statusOverlay'; import './styles.css'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; interface IAthlete { athlete: string; @@ -50,26 +47,28 @@ const GridExample = () => { }; return ( -
-
- - - - -
+ +
+
+ + + + +
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-component-map/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-component-map/provided/reactFunctionalTs/index.tsx index db7ff27ca96..2357a41c4ca 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-component-map/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-component-map/provided/reactFunctionalTs/index.tsx @@ -2,8 +2,8 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomNoRowsOverlay from './customNoRowsOverlay'; import './styles.css'; @@ -19,10 +19,7 @@ const defaultColDef = { flex: 1, }; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; const GridExample = () => { const [rowData, setRowData] = useState([]); @@ -34,22 +31,26 @@ const GridExample = () => { }, []); return ( -
-
- - + +
+
+ + +
+ +
+ + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + noRowsOverlayComponent={CustomNoRowsOverlay} + noRowsOverlayComponentParams={noRowsOverlayComponentParams} + /> +
- -
- - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - noRowsOverlayComponent={CustomNoRowsOverlay} - noRowsOverlayComponentParams={noRowsOverlayComponentParams} - /> -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-component/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-component/provided/reactFunctionalTs/index.tsx index 728c6b8bf7a..cb9dbe32617 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-component/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-component/provided/reactFunctionalTs/index.tsx @@ -1,17 +1,14 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomOverlay from './customOverlay'; import './styles.css'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; interface IAthlete { athlete: string; @@ -37,25 +34,27 @@ const GridExample = () => { }, []); return ( -
-
- -
+ +
+
+ +
-
- - loading={loading} - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - overlayComponent={CustomOverlay} - overlayComponentParams={overlayComponentParams} - /> +
+ + loading={loading} + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + overlayComponent={CustomOverlay} + overlayComponentParams={overlayComponentParams} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-selector/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-selector/provided/reactFunctionalTs/index.tsx index ee7f3488120..b72f2c06b1c 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-selector/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/custom-overlay-selector/provided/reactFunctionalTs/index.tsx @@ -1,17 +1,14 @@ import React, { StrictMode, useCallback, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import type { ColDef, IOverlayParams } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomLoadingOverlay from './customLoadingOverlay'; import './styles.css'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; interface IAthlete { athlete: string; @@ -43,24 +40,26 @@ const GridExample = () => { }, []); return ( -
-
- -
+ +
+
+ +
-
- - loading={loading} - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - overlayComponentSelector={overlayComponentSelector} - /> +
+ + loading={loading} + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + overlayComponentSelector={overlayComponentSelector} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx index 51f012f9042..99ec22baf08 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx @@ -1,16 +1,13 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; interface IAthlete { athlete: string; @@ -27,21 +24,25 @@ const GridExample = () => { const [rowData, setRowData] = useState(); return ( -
-
- - - - + +
+
+ + + + +
+ +
+ +
- -
- -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/index.jsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/index.jsx deleted file mode 100644 index 853861f789c..00000000000 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/index.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState } from 'react'; -import { createRoot } from 'react-dom/client'; - -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -import './styles.css'; - -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); - -const columnDefs = [{ field: 'athlete' }, { field: 'country' }]; - -const GridExample = () => { - const [rowData, setRowData] = useState([]); - - return ( -
-
- - -
- -
- -
-
- ); -}; - -const root = createRoot(document.getElementById('root')); -root.render(); diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/styles.css b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/styles.css deleted file mode 100644 index b35fa5f3ab2..00000000000 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctional/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.example-wrapper { - display: flex; - flex-direction: column; - height: 100%; -} - -#myGrid { - flex: 1 1 0px; -} diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx deleted file mode 100644 index aa677999c41..00000000000 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useState } from 'react'; -import { createRoot } from 'react-dom/client'; - -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -import './styles.css'; - -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); - -interface IAthlete { - athlete: string; - country: string; -} - -const columnDefs: ColDef[] = [{ field: 'athlete' }, { field: 'country' }]; - -const GridExample = () => { - const [rowData, setRowData] = useState([]); - - return ( -
-
- - -
- -
- -
-
- ); -}; - -const root = createRoot(document.getElementById('root')!); -root.render(); diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css deleted file mode 100644 index b35fa5f3ab2..00000000000 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.example-wrapper { - display: flex; - flex-direction: column; - height: 100%; -} - -#myGrid { - flex: 1 1 0px; -} diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays-text/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays-text/provided/reactFunctionalTs/index.tsx index 4c476ea2d80..89dbeb27e3b 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays-text/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays-text/provided/reactFunctionalTs/index.tsx @@ -1,24 +1,18 @@ import React, { StrictMode, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, - CsvExportModule, - ModuleRegistry, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; +import { ClientSideRowModelModule, CsvExportModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; import type { ColDef, OverlayComponentUserParams } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, CsvExportModule, TextFilterModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; interface IAthlete { athlete: string; @@ -48,40 +42,46 @@ const GridExample = () => { const gridRef = useRef(null); return ( -
-
- + +
+
+ - - - - - -
+ + + + + +
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays/provided/reactFunctionalTs/index.tsx index 7b2b8078f38..554e247c780 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays-provided/_examples/provided-overlays/provided/reactFunctionalTs/index.tsx @@ -1,24 +1,18 @@ import React, { StrictMode, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, - CsvExportModule, - ModuleRegistry, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; +import { ClientSideRowModelModule, CsvExportModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, TextFilterModule, CsvExportModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; interface IAthlete { athlete: string; @@ -42,39 +36,45 @@ const GridExample = () => { const gridRef = useRef(null); return ( -
-
- + +
+
+ - - - - - -
+ + + + + +
-
- +
+ +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-loading/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-loading/provided/reactFunctionalTs/index.tsx index b4cc062fb70..13e1b860ca3 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-loading/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-loading/provided/reactFunctionalTs/index.tsx @@ -1,25 +1,19 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, - ModuleRegistry, - TextEditorModule, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; +import { ClientSideRowModelModule, TextEditorModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomLoadingOverlay from './customLoadingOverlay'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ TextEditorModule, TextFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; interface IAthlete { athlete: string; @@ -53,25 +47,27 @@ const GridExample = () => { }, []); return ( -
-
- -
+ +
+
+ +
-
- - loading={loading} - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - loadingOverlayComponent={CustomLoadingOverlay} - loadingOverlayComponentParams={loadingOverlayComponentParams} - /> +
+ + loading={loading} + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + loadingOverlayComponent={CustomLoadingOverlay} + loadingOverlayComponentParams={loadingOverlayComponentParams} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-no-rows/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-no-rows/provided/reactFunctionalTs/index.tsx index 89e1bf0416a..010de3dca77 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-no-rows/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/custom-overlay-no-rows/provided/reactFunctionalTs/index.tsx @@ -2,14 +2,8 @@ import React, { StrictMode, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { - ClientSideRowModelModule, - ModuleRegistry, - TextEditorModule, - TextFilterModule, - ValidationModule, -} from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, TextEditorModule, TextFilterModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import CustomNoRowsOverlay from './customNoRowsOverlay'; import './styles.css'; @@ -31,12 +25,12 @@ const defaultColDef = { filter: true, }; -ModuleRegistry.registerModules([ +const modules = [ TextEditorModule, TextFilterModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const [rowData, setRowData] = useState([]); @@ -48,22 +42,26 @@ const GridExample = () => { }, []); return ( -
-
- - -
+ +
+
+ + +
-
- - rowData={rowData} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - noRowsOverlayComponent={CustomNoRowsOverlay} - noRowsOverlayComponentParams={noRowsOverlayComponentParams} - /> +
+ + rowData={rowData} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + noRowsOverlayComponent={CustomNoRowsOverlay} + noRowsOverlayComponentParams={noRowsOverlayComponentParams} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx index 51f012f9042..99ec22baf08 100644 --- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/loading-overlay/provided/reactFunctionalTs/index.tsx @@ -1,16 +1,13 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; interface IAthlete { athlete: string; @@ -27,21 +24,25 @@ const GridExample = () => { const [rowData, setRowData] = useState(); return ( -
-
- - - - + +
+
+ + + + +
+ +
+ +
- -
- -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/index.jsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/index.jsx deleted file mode 100644 index 853861f789c..00000000000 --- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/index.jsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState } from 'react'; -import { createRoot } from 'react-dom/client'; - -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -import './styles.css'; - -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); - -const columnDefs = [{ field: 'athlete' }, { field: 'country' }]; - -const GridExample = () => { - const [rowData, setRowData] = useState([]); - - return ( -
-
- - -
- -
- -
-
- ); -}; - -const root = createRoot(document.getElementById('root')); -root.render(); diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/styles.css b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/styles.css deleted file mode 100644 index b35fa5f3ab2..00000000000 --- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctional/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.example-wrapper { - display: flex; - flex-direction: column; - height: 100%; -} - -#myGrid { - flex: 1 1 0px; -} diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx deleted file mode 100644 index aa677999c41..00000000000 --- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/index.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useState } from 'react'; -import { createRoot } from 'react-dom/client'; - -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import type { ColDef } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -import './styles.css'; - -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); - -interface IAthlete { - athlete: string; - country: string; -} - -const columnDefs: ColDef[] = [{ field: 'athlete' }, { field: 'country' }]; - -const GridExample = () => { - const [rowData, setRowData] = useState([]); - - return ( -
-
- - -
- -
- -
-
- ); -}; - -const root = createRoot(document.getElementById('root')!); -root.render(); diff --git a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css b/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css deleted file mode 100644 index b35fa5f3ab2..00000000000 --- a/documentation/ag-grid-docs/src/content/docs/overlays/_examples/no-rows-overlay/modules/reactFunctionalTs/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.example-wrapper { - display: flex; - flex-direction: column; - height: 100%; -} - -#myGrid { - flex: 1 1 0px; -} diff --git a/documentation/ag-grid-docs/src/content/docs/performance-test/_examples/dev/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/performance-test/_examples/dev/provided/reactFunctionalTs/index.tsx index d2877556797..9b63f2164cc 100644 --- a/documentation/ag-grid-docs/src/content/docs/performance-test/_examples/dev/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/performance-test/_examples/dev/provided/reactFunctionalTs/index.tsx @@ -2,10 +2,8 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([AllCommunityModule]); +import { AllCommunityModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Row Data Interface interface IRow { @@ -41,9 +39,11 @@ const GridExample = () => { // Container: Defines the grid's theme & dimensions. return ( -
- -
+ +
+ +
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/pivoting-column-groups/_examples/hidden-single-value-column-header/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/pivoting-column-groups/_examples/hidden-single-value-column-header/provided/reactFunctionalTs/index.tsx index 70e81ecb0e8..f81253af52f 100644 --- a/documentation/ag-grid-docs/src/content/docs/pivoting-column-groups/_examples/hidden-single-value-column-header/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/pivoting-column-groups/_examples/hidden-single-value-column-header/provided/reactFunctionalTs/index.tsx @@ -2,7 +2,7 @@ import React, { StrictMode, useCallback, useMemo, useRef, useState } from 'react import { createRoot } from 'react-dom/client'; import type { ColDef } from 'ag-grid-community'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; import { ColumnMenuModule, ColumnsToolPanelModule, @@ -10,11 +10,11 @@ import { FiltersToolPanelModule, PivotModule, } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelModule, ColumnsToolPanelModule, @@ -23,7 +23,7 @@ ModuleRegistry.registerModules([ ContextMenuModule, PivotModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; interface IOlympicData { athlete: string; @@ -68,34 +68,36 @@ const GridExample = () => { }, []); return ( -
-
-
- -
+ +
+
+
+ +
-
- - ref={gridRef} - rowData={data} - loading={loading} - columnDefs={columnDefs} - defaultColDef={defaultColDef} - autoGroupColumnDef={autoGroupColumnDef} - pivotMode={true} - removePivotHeaderRowWhenSingleValueColumn={true} - /> +
+ + ref={gridRef} + rowData={data} + loading={loading} + columnDefs={columnDefs} + defaultColDef={defaultColDef} + autoGroupColumnDef={autoGroupColumnDef} + pivotMode={true} + removePivotHeaderRowWhenSingleValueColumn={true} + /> +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/reorder-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/reorder-grids/provided/reactFunctionalTs/index.tsx index ecc15067168..eb9786d7b09 100644 --- a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/reorder-grids/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/reorder-grids/provided/reactFunctionalTs/index.tsx @@ -3,10 +3,9 @@ import React, { StrictMode, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ModuleRegistry } from 'ag-grid-community'; import type { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community'; import { AllEnterpriseModule } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; // Type definitions interface RowData { @@ -29,7 +28,6 @@ interface GridComponentProps { index: number; } -ModuleRegistry.registerModules([AllEnterpriseModule]); const queryParamsFromUrl = new URLSearchParams(window.location.search); console.log('React Version', React.version, queryParamsFromUrl.get('version'), 'Prod:', queryParamsFromUrl.get('prod')); @@ -107,23 +105,25 @@ const GridComponent = React.memo(({ id, title, data, index } }; }, []); return ( -
-

- {title} (Position: {index + 1}) -

-
- + +
+

+ {title} (Position: {index + 1}) +

+
+ +
-
+ ); }); diff --git a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/test-tear-down/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/test-tear-down/provided/reactFunctionalTs/index.tsx index e2727188cd2..b7c83fee771 100644 --- a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/test-tear-down/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/test-tear-down/provided/reactFunctionalTs/index.tsx @@ -3,40 +3,39 @@ import React, { StrictMode, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, ValidationModule } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; export function GridExample() { const [show, setShow] = useState(true); const [visibility, setVisibility] = useState('visible'); return ( -
- -
{show && }
-
+ }} + > + Destroy + +
{show && }
+
+ ); } diff --git a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/updating-row-data-without-row-ids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/updating-row-data-without-row-ids/provided/reactFunctionalTs/index.tsx index 08e7debf030..7f987d0c484 100644 --- a/documentation/ag-grid-docs/src/content/docs/react-test/_examples/updating-row-data-without-row-ids/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/react-test/_examples/updating-row-data-without-row-ids/provided/reactFunctionalTs/index.tsx @@ -3,19 +3,11 @@ import React, { StrictMode, useCallback, useEffect, useMemo, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { - ClientSideRowModelModule, - type ColDef, - type GridReadyEvent, - ModuleRegistry, - ValidationModule, -} from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; - -ModuleRegistry.registerModules([ - ClientSideRowModelModule, - ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +import type { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community'; +import { ClientSideRowModelModule, ValidationModule } from 'ag-grid-community'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; + +const modules = [ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : [])]; let startTime: any = undefined; let endTime: any = undefined; @@ -116,35 +108,37 @@ const GridExample = () => { }; return ( -
-
- - -
-
-
- Current Rendering Mode: {renderingMode} + +
+
+ +
-
- Current getRowId: {useGetRowId ? 'Enabled' : 'Disabled'} +
+
+ Current Rendering Mode: {renderingMode} +
+
+ Current getRowId: {useGetRowId ? 'Enabled' : 'Disabled'} +
+
+
+ + key={`${renderingMode}-${useGetRowId}`} + rowData={rowData} + columnDefs={columnDefs} + onGridReady={onGridReady} + suppressScrollOnNewData + renderingMode={renderingMode} + getRowId={useGetRowId ? (params: GetRowIdParams) => String(params.data.id) : undefined} + />
-
- - key={`${renderingMode}-${useGetRowId}`} - rowData={rowData} - columnDefs={columnDefs} - onGridReady={onGridReady} - suppressScrollOnNewData - renderingMode={renderingMode} - getRowId={useGetRowId ? (params) => String(params.data.id) : undefined} - /> -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-external-dropzone/_examples/two-grids/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-external-dropzone/_examples/two-grids/provided/reactFunctionalTs/index.tsx index 6adfc44fda8..49245b1be39 100644 --- a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-external-dropzone/_examples/two-grids/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-external-dropzone/_examples/two-grids/provided/reactFunctionalTs/index.tsx @@ -5,18 +5,17 @@ import type { ColDef, GetRowIdParams, GridApi, GridReadyEvent, RowDropZoneParams import { ClientSideRowModelApiModule, ClientSideRowModelModule, - ModuleRegistry, RowApiModule, RowDragModule, RowStyleModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, RowApiModule, TextFilterModule, @@ -24,7 +23,7 @@ ModuleRegistry.registerModules([ RowStyleModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const columns: ColDef[] = [ { field: 'id', rowDrag: true }, @@ -203,22 +202,24 @@ const GridExample = () => { suppressMoveWhenRowDragging={true} rowData={side === 'Left' ? leftRowData : rightRowData} columnDefs={[...columns]} - onGridReady={(params) => onGridReady(side, params)} + onGridReady={(params: GridReadyEvent) => onGridReady(side, params)} />
); return ( -
- {getInnerGridCol('Left')} -
- - - + +
+ {getInnerGridCol('Left')} +
+ + + +
+ {getInnerGridCol('Right')}
- {getInnerGridCol('Right')} -
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-drop-position/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-drop-position/provided/reactFunctionalTs/index.tsx index 429235f516e..6172337b108 100644 --- a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-drop-position/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-drop-position/provided/reactFunctionalTs/index.tsx @@ -12,18 +12,17 @@ import type { import { ClientSideRowModelApiModule, ClientSideRowModelModule, - ModuleRegistry, RowApiModule, RowDragModule, RowStyleModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, RowApiModule, TextFilterModule, @@ -31,7 +30,7 @@ ModuleRegistry.registerModules([ RowStyleModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const columns: ColDef[] = [ { field: 'id', rowDrag: true }, @@ -212,22 +211,24 @@ const GridExample = () => { suppressMoveWhenRowDragging={true} rowData={side === 'Left' ? leftRowData : rightRowData} columnDefs={[...columns]} - onGridReady={(params) => onGridReady(side, params)} + onGridReady={(params: GridReadyEvent) => onGridReady(side, params)} />
); return ( -
- {getInnerGridCol('Left')} -
- - - + +
+ {getInnerGridCol('Left')} +
+ + + +
+ {getInnerGridCol('Right')}
- {getInnerGridCol('Right')} -
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-multiple-records/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-multiple-records/provided/reactFunctionalTs/index.tsx index 1567d72deb9..12e8c35b8d2 100644 --- a/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-multiple-records/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/row-dragging-to-grid/_examples/two-grids-with-multiple-records/provided/reactFunctionalTs/index.tsx @@ -12,25 +12,24 @@ import type { import { ClientSideRowModelApiModule, ClientSideRowModelModule, - ModuleRegistry, RowDragModule, RowSelectionModule, TextFilterModule, ValidationModule, } from 'ag-grid-community'; import type { CustomCellRendererProps } from 'ag-grid-react'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ ClientSideRowModelApiModule, TextFilterModule, RowDragModule, RowSelectionModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const SportRenderer = (props: CustomCellRendererProps) => { return ( @@ -225,13 +224,15 @@ const GridExample = () => { ); return ( -
- {getTopToolBar()} -
- {getGridWrapper(0)} - {getGridWrapper(1)} + +
+ {getTopToolBar()} +
+ {getGridWrapper(0)} + {getGridWrapper(1)} +
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/row-selection-multi-row/_examples/checkbox-selection-disable-checkboxes/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-selection-multi-row/_examples/checkbox-selection-disable-checkboxes/provided/reactFunctionalTs/index.tsx index 5b9ce0a074c..24406345a29 100644 --- a/documentation/ag-grid-docs/src/content/docs/row-selection-multi-row/_examples/checkbox-selection-disable-checkboxes/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/row-selection-multi-row/_examples/checkbox-selection-disable-checkboxes/provided/reactFunctionalTs/index.tsx @@ -1,17 +1,17 @@ import React, { StrictMode, useMemo, useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, RowSelectionModule, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, RowSelectionModule, ValidationModule } from 'ag-grid-community'; import type { ColDef, RowSelectionOptions } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ RowSelectionModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const grid = useRef(null); @@ -48,24 +48,26 @@ const GridExample = () => { } return ( -
-
- + +
+
+ +
+
+ +
-
- -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/row-selection-single-row/_examples/configure-selectable-rows/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/row-selection-single-row/_examples/configure-selectable-rows/provided/reactFunctionalTs/index.tsx index a845396e3d4..a4d3370b359 100644 --- a/documentation/ag-grid-docs/src/content/docs/row-selection-single-row/_examples/configure-selectable-rows/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/row-selection-single-row/_examples/configure-selectable-rows/provided/reactFunctionalTs/index.tsx @@ -1,17 +1,17 @@ -import React, { StrictMode, useMemo, useRef, useState } from 'react'; +import React, { StrictMode, useMemo, useRef } from 'react'; import { createRoot } from 'react-dom/client'; -import { ClientSideRowModelModule, ModuleRegistry, RowSelectionModule, ValidationModule } from 'ag-grid-community'; +import { ClientSideRowModelModule, RowSelectionModule, ValidationModule } from 'ag-grid-community'; import type { ColDef, RowSelectionOptions } from 'ag-grid-community'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; -ModuleRegistry.registerModules([ +const modules = [ RowSelectionModule, ClientSideRowModelModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; const GridExample = () => { const grid = useRef(null); @@ -48,24 +48,26 @@ const GridExample = () => { } return ( -
-
- + +
+
+ +
+
+ +
-
- -
-
+ ); }; diff --git a/documentation/ag-grid-docs/src/content/docs/side-bar/_examples/tool-panel-parent/provided/reactFunctionalTs/index.tsx b/documentation/ag-grid-docs/src/content/docs/side-bar/_examples/tool-panel-parent/provided/reactFunctionalTs/index.tsx index dd7283805c2..e8fa6641f9b 100644 --- a/documentation/ag-grid-docs/src/content/docs/side-bar/_examples/tool-panel-parent/provided/reactFunctionalTs/index.tsx +++ b/documentation/ag-grid-docs/src/content/docs/side-bar/_examples/tool-panel-parent/provided/reactFunctionalTs/index.tsx @@ -6,7 +6,6 @@ import { createRoot } from 'react-dom/client'; import { ClientSideRowModelModule, ColumnsToolPanelModule, - ModuleRegistry, NewFiltersToolPanelModule, NumberFilterModule, PivotModule, @@ -14,12 +13,12 @@ import { TextFilterModule, ValidationModule, } from 'ag-grid-enterprise'; -import { AgGridReact } from 'ag-grid-react'; +import { AgGridProvider, AgGridReact } from 'ag-grid-react'; import './styles.css'; import { useFetchJson } from './useFetchJson'; -ModuleRegistry.registerModules([ +const modules = [ NumberFilterModule, ClientSideRowModelModule, ColumnsToolPanelModule, @@ -28,7 +27,7 @@ ModuleRegistry.registerModules([ PivotModule, TextFilterModule, ...(process.env.NODE_ENV !== 'production' ? [ValidationModule] : []), -]); +]; function addStyles(parentEl) { const contentClassnames = [...parentEl.querySelector('.content').classList].filter((e) => e !== 'content'); @@ -120,46 +119,48 @@ const GridExample = () => { }, [drawerRef, closePopup, filtersToolPanel]); return ( -
-
-
- - -
+ +
+
+
+ + +
-
- +
+ +
-
-