Repository navigation
DataGrid/TreeList: migrate React class snippets to functions - #9193
Open
vladaskorohodova wants to merge 6 commits into
Open
vladaskorohodova wants to merge 6 commits into
vladaskorohodova wants to merge 6 commits into
Conversation
Converts React class examples in the DataGrid and TreeList API reference and guides to TypeScript function components with hooks. To review faster: - Start with examples that use state, refs, async requests, or column callbacks. These contain the meaningful behavior changes. - Other examples follow the same pattern: `App.tsx`, typed handlers, and removal of constructors, bindings, and `render()`. - Check the accompanying fixes: email-response parsing, export cleanup, invalid JSX, and repeated selection updates. Only React snippets changed.
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Critical and moderate issues remain in the migrated examples.
Get a fresh assessment by requesting another Copilot review.
Review effort: Lite
Findings: 1
Open (2)
What changed in this PR
Migrates DataGrid and TreeList React documentation examples from class components to TypeScript function components with hooks.
Changes:
- Replaces constructors, bindings, and
render()methods with hooks. - Adds typed state, refs, callbacks, and async handlers.
- Updates selection, editing, filtering, sorting, paging, grouping, columns, and export examples.
| File | Reviewed change / finding |
|---|---|
concepts/05 UI Components/TreeList/50 Selection/30 Events.md |
Migrates selection events. |
concepts/05 UI Components/TreeList/50 Selection/20 API/8 Clear Selection Settings.md |
Migrates selection state and refs. |
concepts/05 UI Components/TreeList/50 Selection/20 API/1 Initial and Runtime Selection.md |
Migrates selection examples. |
concepts/05 UI Components/TreeList/40 Filtering and Searching/6 API/8 Clear Filtering Settings.md |
Migrates filtering refs. |
concepts/05 UI Components/TreeList/40 Filtering and Searching/6 API/1 Initial and Runtime Filtering.md |
Migrates filtering APIs. |
concepts/05 UI Components/TreeList/40 Filtering and Searching/5 Standalone Filter Builder.md |
Migrates filter builder. |
concepts/05 UI Components/TreeList/40 Filtering and Searching/4 Filter Panel with Filter Builder.md |
Migrates filter panel. |
concepts/05 UI Components/TreeList/40 Filtering and Searching/3 Search Panel.md |
Migrates search panel. |
concepts/05 UI Components/TreeList/40 Filtering and Searching/2 Header Filter.md |
Migrates header filter. |
concepts/05 UI Components/TreeList/40 Filtering and Searching/1 Filter Row.md |
Migrates filter row. |
concepts/05 UI Components/TreeList/35 Paging/20 API.md |
Migrates paging. |
concepts/05 UI Components/TreeList/30 Sorting/20 API/8 Clear Sorting Settings.md |
Migrates sorting refs. |
concepts/05 UI Components/TreeList/30 Sorting/20 API/5 Custom Sorting.md |
Migrates custom sorting. |
concepts/05 UI Components/TreeList/30 Sorting/20 API/1 Initial and Runtime Sorting.md |
Migrates sorting state. |
concepts/05 UI Components/TreeList/20 Editing/50 Data Validation.md |
Migrates validation. |
concepts/05 UI Components/TreeList/20 Editing/40 Customize Editors.md |
Migrates editor customization. |
concepts/05 UI Components/TreeList/20 Editing/30 Events/Events.md |
Migrates editing events. |
concepts/05 UI Components/TreeList/20 Editing/20 API/30 Delete.md |
Migrates delete API. |
concepts/05 UI Components/TreeList/20 Editing/20 API/20 Update.md |
Migrates update API. |
concepts/05 UI Components/TreeList/20 Editing/20 API/10 Add.md |
Migrates add API. |
concepts/05 UI Components/DataGrid/99 How To/Dynamically Change Form Item Properties in the Editing State.md |
Migrates form customization. |
concepts/05 UI Components/DataGrid/99 How To/Dynamically Change Editor Properties in the Editing State.md |
Migrates editor customization. |
concepts/05 UI Components/DataGrid/99 How To/Customize Header Filter Data Source/30 Change the Generated Data Source.md |
Duplicate guards should be reduced to one. |
concepts/05 UI Components/DataGrid/50 Selection/30 Events.md |
Migrates selection events. |
concepts/05 UI Components/DataGrid/50 Selection/20 API/8 Clear Selection Settings.md |
Migrates selection state and refs. |
concepts/05 UI Components/DataGrid/50 Selection/20 API/1 Initial and Runtime Selection.md |
Migrates selection examples. |
concepts/05 UI Components/DataGrid/45 Grouping/30 Events.md |
Migrates grouping events. |
concepts/05 UI Components/DataGrid/45 Grouping/20 API/30 Clear Grouping.md |
Migrates grouping state. |
concepts/05 UI Components/DataGrid/45 Grouping/20 API/10 Initial and Runtime Grouping.md |
Migrates grouping state. |
concepts/05 UI Components/DataGrid/35 Paging/20 API.md |
Migrates paging. |
concepts/05 UI Components/DataGrid/25 Sorting/20 API/8 Clear Sorting Settings.md |
Migrates sorting refs. |
concepts/05 UI Components/DataGrid/25 Sorting/20 API/1 Initial and Runtime Sorting.md |
Migrates sorting state. |
concepts/05 UI Components/DataGrid/20 Editing/50 Data Validation.md |
Migrates validation. |
concepts/05 UI Components/DataGrid/20 Editing/40 Customize Editors.md |
Migrates editor customization. |
concepts/05 UI Components/DataGrid/20 Editing/30 Events/Events.md |
Migrates editing events. |
concepts/05 UI Components/DataGrid/20 Editing/20 API/30 Delete.md |
Migrates delete API. |
concepts/05 UI Components/DataGrid/20 Editing/20 API/20 Update.md |
Migrates update API. |
concepts/05 UI Components/DataGrid/20 Editing/20 API/10 Add.md |
Migrates add API. |
concepts/05 UI Components/DataGrid/15 Columns/60 Column Chooser.md |
Migrates column chooser. |
concepts/05 UI Components/DataGrid/15 Columns/40 Customize Cells/1 Customize the Value and Text.md |
Migrates cell callbacks. |
concepts/05 UI Components/DataGrid/15 Columns/35 Hide a Column Using the API.md |
Migrates column visibility. |
concepts/05 UI Components/DataGrid/15 Columns/25 Column Reordering/10 API.md |
Migrates column reordering. |
concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/4 Command Columns/15 Customize the Edit Column/3 Add a Custom Button.md |
Migrates custom buttons. |
concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/4 Command Columns/15 Customize the Edit Column/2 Hide a Button.md |
Migrates button configuration. |
concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/4 Command Columns/15 Customize the Edit Column/1 Customize Buttons.md |
Migrates button styling. |
concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/4 Command Columns/05 Configure a Command Column.md |
Migrates command columns. |
concepts/05 UI Components/DataGrid/15 Columns/10 Column Types/2 Band Columns.md |
Migrates band columns. |
concepts/05 UI Components/DataGrid/15 Columns/00 Overview.md |
Migrates column callbacks. |
concepts/05 UI Components/DataGrid/10 Enhance Performance on Large Datasets/015 Deferred Selection.md |
Remove the unused Column import. |
api-reference/10 UI Components/GridBase/3 Methods/refresh().md |
Critical ref type and readonly assignment issues remain, including a second occurrence. |
api-reference/10 UI Components/GridBase/1 Configuration/onRowValidating.md |
Migrates async validation. |
api-reference/10 UI Components/GridBase/1 Configuration/onKeyDown.md |
Migrates keyboard handling. |
api-reference/10 UI Components/GridBase/1 Configuration/onInitNewRow.md |
Migrates async row initialization. |
api-reference/10 UI Components/dxTreeList/3 Methods/getSelectedRowsData(mode).md |
Migrates selected-data retrieval. |
api-reference/10 UI Components/dxTreeList/3 Methods/getSelectedRowsData().md |
Migrates selected-data retrieval. |
api-reference/10 UI Components/dxTreeList/3 Methods/addRow().md |
Migrates row insertion. |
api-reference/10 UI Components/dxTreeList/1 Configuration/onRowValidating.md |
Migrates async validation. |
api-reference/10 UI Components/dxTreeList/1 Configuration/onKeyDown.md |
Migrates keyboard handling. |
api-reference/10 UI Components/dxTreeList/1 Configuration/onInitNewRow.md |
Migrates async row initialization. |
api-reference/10 UI Components/dxTreeList/1 Configuration/onContextMenuPreparing.md |
Migrates context menu handling. |
api-reference/10 UI Components/dxTreeList/1 Configuration/cacheEnabled.md |
Destructuring can throw when the ref is null. |
api-reference/10 UI Components/dxDataGrid/3 Methods/getSelectedRowsData().md |
Migrates selected-data retrieval. |
api-reference/10 UI Components/dxDataGrid/3 Methods/addRow().md |
Migrates row insertion. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onRowValidating.md |
Migrates async validation. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onRowClick.md |
Migrates row interaction. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onKeyDown.md |
Migrates keyboard handling. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onInitNewRow.md |
Migrates async row initialization. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onFocusedCellChanging.md |
Migrates focus handling. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onExporting.md |
Migrates export handling. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onEditorPreparing.md |
Migrates editor preparation. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onContextMenuPreparing.md |
Migrates context menu handling. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/onCellPrepared.md |
Migrates cell preparation. |
api-reference/10 UI Components/dxDataGrid/1 Configuration/export/export.md |
Migrates export examples. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Removed redundant checks for options.dataSource. Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Copilot review overview
🔵 Needs a closer look
The refresh example has an unresolved ref and component-type issue.
Review effort: Lite
Findings: None
Resolved since last review (2)
Previously missed (1)
In code that hasn't changed since last review
api-reference/10 UI Components/GridBase/3 Methods/refresh().md:120
This React example creates the ref with createRef inside App, so a rerender replaces the ref object; it also uses Dx{WidgetName}Component, which is the Angular wrapper type and is not imported here. After placeholder substitution, the sample does not type-check and can lose the component instance on rerender. Use useRef<{WidgetName}Ref>(null) and pass that ref directly to the component instead.
There was a problem hiding this comment.
Copilot review overview
🔵 Needs a closer look
Four moderate issues and two minor cleanup issues remain unresolved.
Review effort: Lite
Findings: None
Previously missed (1)
In code that hasn't changed since last review
concepts/05 UI Components/DataGrid/99 How To/Customize Header Filter Data Source/30 Change the Generated Data Source.md:150
This if statement is flush with the document margin instead of being nested in the callback, unlike the surrounding TypeScript sample. Although whitespace does not change execution, it makes the migrated example appear malformed and inconsistent with the rest of the code block; indent it to the callback body.
Alyar666
requested changes
Oct 15, 2026
Alyar666
left a comment
Alyar666
left a comment
Contributor
There was a problem hiding this comment.
I noticed that our code style is inconsistent in some places. For example, there are blank lines between imports and after the import statements in some files.
| }); | ||
| import DataGrid, { Column } from 'devextreme-react/data-grid'; | ||
| function App() { | ||
| const [state, setState] = useState<{ |
Contributor
There was a problem hiding this comment.
Usually, hooks are written more simply:
const [isEmailVisible, setIsEmailVisible] = useState(true);
Please check this everywhere.
| key: 'id' | ||
| } | ||
| type: 'array', | ||
| data: [], |
Contributor
There was a problem hiding this comment.
I think it would be better to use an ellipsis here — data: ... — since an empty data array could be misleading to the user.
| </DataGrid> | ||
| ); | ||
| } | ||
| import DataGrid, { Column } from 'devextreme-react/data-grid'; |
Contributor
There was a problem hiding this comment.
Do we definitely need Column here?
| function App() { | ||
| const dataGridRef = useRef<DataGridRef>(null); | ||
| const customizeItem = useCallback( | ||
| (item: Parameters<NonNullable<FormTypes.Properties['customizeItem']>>[0]) => { |
Contributor
There was a problem hiding this comment.
Can't we simplify this to FormTypes.Item?
| const contactsFields = ['Email', 'Mobile_Phone', 'Skype']; | ||
| for (let i = 0; i < columns.length - 1; i++) { | ||
| if (contactsFields.indexOf(columns[i].dataField) > -1) // If the column belongs to "Contacts", | ||
| if (contactsFields.indexOf(columns[i].dataField ?? '') > -1) |
Contributor
There was a problem hiding this comment.
Curly braces are needed here
| const textAreaOptions = { height: 200 }; | ||
| function App() { | ||
| const onEditorPreparing = useCallback((e: TreeListTypes.EditorPreparingEvent) => { | ||
| if (e.dataField == 'Note' && e.parentType === 'dataRow') { |
Contributor
There was a problem hiding this comment.
We should replace == with === here, since we use === everywhere.
| key: 'id' | ||
| } | ||
| type: 'array', | ||
| data: ..., |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Converts React class examples in the DataGrid and TreeList API reference and guides to TypeScript function components with hooks.
To review faster:
App.tsx, typed handlers, and removal of constructors, bindings, andrender().Only React snippets changed.