[DataGridPro] Make Row reordering work with pagination #15355
Conversation
|
Deploy preview: https://deploy-preview-15355--material-ui-x.netlify.app/ |
| }, {}), | ||
| [rows], | ||
| ); | ||
| const getRowIndex = React.useCallback((id: GridRowId) => lookup[id], [lookup]); |
There was a problem hiding this comment.
should we add this method to the GridRowApi ?
zannager
added
the
component: data grid
michelengelen
added
bug 🐛
There was a problem hiding this comment.
Thank you @k-rajat19 for your contribution.
I added a few comments.
Also, Is it possible to add some test coverage for the bugfix?
There was a problem hiding this comment.
I noticed it doesn't work as expected with filtered data.
row-reorder.mp4
Could we make it work properly?
| @@ -63,6 +64,16 @@ export const useGridRowReorder = ( | |||
| const ownerState = { classes: props.classes }; | |||
| const classes = useUtilityClasses(ownerState); | |||
| const [dragRowId, setDragRowId] = React.useState<GridRowId>(''); | |||
| const rows = gridExpandedSortedRowEntriesSelector(apiRef); | |||
There was a problem hiding this comment.
Using a selector directly in the React component might yield bugs since it'll not ensure proper reactivity.
Wrapping the selector with useGridSelector is preferred as it ensures to re-render the component when the state value updates.
| @@ -63,6 +64,16 @@ export const useGridRowReorder = ( | |||
| const ownerState = { classes: props.classes }; | |||
| const classes = useUtilityClasses(ownerState); | |||
| const [dragRowId, setDragRowId] = React.useState<GridRowId>(''); | |||
| const rows = gridExpandedSortedRowEntriesSelector(apiRef); | |||
| const lookup = React.useMemo( | |||
There was a problem hiding this comment.
I'd prefer to off-load this to a selector as it'll remove the need for a memoization as well as ensure proper reactivity.
Wdyt?
Closes #15351
getRowIndexRelativeToVisibleRowsmethod gives index relative to the current page but I think using the absolute index would help in all cases, added agetRowIndexmethod which gives the absolute index.Before: https://codesandbox.io/p/sandbox/row-reorder-v5r5q9
After: https://codesandbox.io/p/sandbox/mui-mui-x-x-data-grid-forked-zmc5hd