diff --git a/cypress/support/ListPage.js b/cypress/support/ListPage.js
index 02f873b8024..e9f1eac04c0 100644
--- a/cypress/support/ListPage.js
+++ b/cypress/support/ListPage.js
@@ -15,9 +15,9 @@ export default url => ({
         recordRows: '.datagrid-body tr',
         viewsColumn: '.datagrid-body tr td:nth-child(7)',
         datagridHeaders: 'th',
-        sortBy: name => `th span[data-sort="${name}"]`,
+        sortBy: name => `th span[data-field="${name}"]`,
         svg: (name, criteria = '') =>
-            `th span[data-sort="${name}"] svg${criteria}`,
+            `th span[data-field="${name}"] svg${criteria}`,
         logout: '.logout',
         bulkActionsToolbar: '[data-test=bulk-actions-toolbar]',
         customBulkActionsButton:
diff --git a/packages/ra-ui-materialui/src/list/Datagrid.tsx b/packages/ra-ui-materialui/src/list/Datagrid.tsx
index d3343bbed44..37fc93babc2 100644
--- a/packages/ra-ui-materialui/src/list/Datagrid.tsx
+++ b/packages/ra-ui-materialui/src/list/Datagrid.tsx
@@ -99,12 +99,17 @@ const Datagrid: FC<DatagridProps> = props => {
     const updateSort = useCallback(
         event => {
             event.stopPropagation();
-            setSort(
-                event.currentTarget.dataset.sort,
-                event.currentTarget.dataset.order
-            );
+            const newField = event.currentTarget.dataset.field;
+            const newOrder =
+                currentSort.field === newField
+                    ? currentSort.order === 'ASC'
+                        ? 'DESC'
+                        : 'ASC'
+                    : event.currentTarget.dataset.order;
+
+            setSort(newField, newOrder);
         },
-        [setSort]
+        [currentSort.field, currentSort.order, setSort]
     );
 
     const handleSelectAll = useCallback(
diff --git a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js
index 15a9204d2a6..4c05587c6c1 100644
--- a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js
+++ b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.js
@@ -36,6 +36,7 @@ export const DatagridHeaderCell = props => {
     } = props;
     const classes = useStyles(props);
     const translate = useTranslate();
+
     return (
         <TableCell
             className={classnames(className, field.props.headerClassName)}
@@ -60,7 +61,8 @@ export const DatagridHeaderCell = props => {
                             (field.props.sortBy || field.props.source)
                         }
                         direction={currentSort.order === 'ASC' ? 'asc' : 'desc'}
-                        data-sort={field.props.sortBy || field.props.source}
+                        data-sort={field.props.sortBy || field.props.source} // @deprecated. Use data-field instead.
+                        data-field={field.props.sortBy || field.props.source}
                         data-order={field.props.sortByOrder || 'ASC'}
                         onClick={updateSort}
                         classes={classes}
@@ -97,11 +99,11 @@ DatagridHeaderCell.propTypes = {
     updateSort: PropTypes.func.isRequired,
 };
 
-export default memo(
-    DatagridHeaderCell,
-    (props, nextProps) =>
+export default memo(DatagridHeaderCell, (props, nextProps) => {
+    return (
         props.updateSort === nextProps.updateSort &&
-        props.currentSort.sort === nextProps.currentSort.sort &&
+        props.currentSort.field === nextProps.currentSort.field &&
         props.currentSort.order === nextProps.currentSort.order &&
         !(nextProps.isSorting && props.sortable !== nextProps.sortable)
-);
+    );
+});
diff --git a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.spec.js b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.spec.js
index 2d046b4e7c6..ab236d6bf82 100644
--- a/packages/ra-ui-materialui/src/list/DatagridHeaderCell.spec.js
+++ b/packages/ra-ui-materialui/src/list/DatagridHeaderCell.spec.js
@@ -47,7 +47,7 @@ describe('<DatagridHeaderCell />', () => {
                     </tbody>
                 </table>
             );
-            expect(getByTitle('ra.action.sort').dataset.sort).toBe('title');
+            expect(getByTitle('ra.action.sort').dataset.field).toBe('title');
         });
 
         it('should be enabled when field has a sortBy props', () => {
@@ -64,7 +64,7 @@ describe('<DatagridHeaderCell />', () => {
                     </tbody>
                 </table>
             );
-            expect(getByTitle('ra.action.sort').dataset.sort).toBe('title');
+            expect(getByTitle('ra.action.sort').dataset.field).toBe('title');
         });
 
         it('should be change order when field has a sortByOrder props', () => {