diff --git a/cypress/integration/list.js b/cypress/integration/list.js
index 97c2302d04b..146cc8b6574 100644
--- a/cypress/integration/list.js
+++ b/cypress/integration/list.js
@@ -167,4 +167,29 @@ describe('List Page', () => {
             cy.contains('1-10 of 10');
         });
     });
+
+    describe("Sorting", () => {
+        it('should display a sort arrow when clicking on a sortable column header', () => {
+            ListPagePosts.toggleColumnSort('id');
+            cy.get(ListPagePosts.elements.sortBy('id')).get("svg").should('be.visible');
+
+            ListPagePosts.toggleColumnSort('"tags.name"');
+            cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("svg").should('be.visible');
+        });
+
+        it('should hide the sort arrow when clicking on another sortable column header', () => {
+            ListPagePosts.toggleColumnSort('published_at');
+            cy.get(ListPagePosts.elements.sortBy('id')).get("svg").should('be.hidden');
+            cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("svg").should('be.hidden');
+        });
+
+        it('should reverse the sort arrow when clicking on an already sorted column header', () => {
+            ListPagePosts.toggleColumnSort('published_at');
+            ListPagePosts.toggleColumnSort('"tags.name"');
+            cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("[class*=iconDirectionAsc]").should('exist');
+
+            ListPagePosts.toggleColumnSort('"tags.name"');
+            cy.get(ListPagePosts.elements.sortBy('"tags.name"')).get("[class*=iconDirectionDesc]").should('exist');
+        });
+    })
 });
diff --git a/cypress/support/ListPage.js b/cypress/support/ListPage.js
index d3403196793..841441f58f6 100644
--- a/cypress/support/ListPage.js
+++ b/cypress/support/ListPage.js
@@ -15,6 +15,7 @@ export default url => ({
         recordRows: '.datagrid-body tr',
         viewsColumn: '.datagrid-body tr td:nth-child(6)',
         datagridHeaders: 'th',
+        sortBy: name => `th span[data-sort=${name}]`,
         logout: '.logout',
         bulkActionsToolbar: '[data-test=bulk-actions-toolbar]',
         customBulkActionsButton:
@@ -101,4 +102,8 @@ export default url => ({
     applyDeleteBulkAction() {
         cy.get(this.elements.deleteBulkActionsButton).click();
     },
+
+    toggleColumnSort(name) {
+        cy.get(this.elements.sortBy(name)).click();
+    }
 });
diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js
index 67dd09f0931..b7b2bf3e06d 100644
--- a/examples/simple/src/posts/PostList.js
+++ b/examples/simple/src/posts/PostList.js
@@ -114,6 +114,7 @@ const PostList = withStyles(styles)(({ classes, ...props }) => (
                         label="Tags"
                         reference="tags"
                         source="tags"
+                        sortBy="tags.name"
                         cellClassName={classes.hiddenOnSmallScreens}
                         headerClassName={classes.hiddenOnSmallScreens}
                     >
diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js
index 90f2dd5e71e..7a3f0d8994d 100644
--- a/packages/ra-ui-materialui/src/list/Datagrid.js
+++ b/packages/ra-ui-materialui/src/list/Datagrid.js
@@ -156,8 +156,8 @@ class Datagrid extends Component {
                                         currentSort={currentSort}
                                         field={field}
                                         isSorting={
-                                            field.props.source ===
-                                            currentSort.field
+                                            currentSort.field ===
+                                            (field.props.sortBy || field.props.source)
                                         }
                                         key={field.props.source || index}
                                         resource={resource}