{"action":"created","issue":{"url":"https://api.github.com/repos/Saulis/iron-data-table/issues/29","repository_url":"https://api.github.com/repos/Saulis/iron-data-table","labels_url":"https://api.github.com/repos/Saulis/iron-data-table/issues/29/labels{/name}","comments_url":"https://api.github.com/repos/Saulis/iron-data-table/issues/29/comments","events_url":"https://api.github.com/repos/Saulis/iron-data-table/issues/29/events","html_url":"https://github.com/Saulis/iron-data-table/issues/29","id":143747249,"number":29,"title":"SortOrder not handled as Array","user":{"login":"userquin","id":6311119,"avatar_url":"https://avatars.githubusercontent.com/u/6311119?v=3","gravatar_id":"","url":"https://api.github.com/users/userquin","html_url":"https://github.com/userquin","followers_url":"https://api.github.com/users/userquin/followers","following_url":"https://api.github.com/users/userquin/following{/other_user}","gists_url":"https://api.github.com/users/userquin/gists{/gist_id}","starred_url":"https://api.github.com/users/userquin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/userquin/subscriptions","organizations_url":"https://api.github.com/users/userquin/orgs","repos_url":"https://api.github.com/users/userquin/repos","events_url":"https://api.github.com/users/userquin/events{/privacy}","received_events_url":"https://api.github.com/users/userquin/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2016-03-26T20:30:46Z","updated_at":"2016-03-27T17:51:38Z","closed_at":null,"body":"In iron-data-table sortOrder can be an array to allow multiple sort columns but in data-table-column-sort is handled as plain object. Also sort arrows are not accessible, why just not use paper-icon-button?\r\n\r\nHere is a patch allowing configure the sort position in the sortOrder and change div by paper-icon-button to make #sortIcon accessible (only need to configure aria-label, need change iron-data-table also); also allow clear state up-down-newClick sequence -> direction must be reset and propagated to the UI:\r\n\r\n```diff\r\nIndex: x-app-polymer/src/main/polymer-starter-kit-1.2.3/app/bower_components/iron-data-table/data-table-column-sort.html\r\nIDEA additional info:\r\nSubsystem: com.intellij.openapi.diff.impl.patch.CharsetEP\r\n<+>UTF-8\r\n===================================================================\r\n--- x-app-polymer/src/main/polymer-starter-kit-1.2.3/app/bower_components/iron-data-table/data-table-column-sort.html\t(revision )\r\n+++ x-app-polymer/src/main/polymer-starter-kit-1.2.3/app/bower_components/iron-data-table/data-table-column-sort.html\t(revision )\r\n@@ -10,38 +10,43 @@\r\n         margin: 4px;\r\n       }\r\n \r\n-      #sortIcon {\r\n+      paper-icon-button {\r\n-        position: relative;\r\n+          position: relative;\r\n-        width: 24px;\r\n-        height: 24px;\r\n+          opacity: .16;\r\n       }\r\n \r\n-      iron-icon {\r\n-        fill: rgba(0, 0, 0, .16);\r\n-        cursor: pointer;\r\n-        padding: 0px;\r\n+      paper-icon-button[active], paper-icon-button:hover, paper-icon-button[focused] {\r\n+          opacity: .84;\r\n+      }\r\n+\r\n+      paper-icon-button ::content iron-icon {\r\n+        padding: 0;\r\n         --iron-icon-width: 24px;\r\n         --iron-icon-height: 24px;\r\n         transition: all .2s;\r\n       }\r\n \r\n-      iron-icon[active], iron-icon:hover {\r\n-        fill: rgba(0, 0, 0, .87);\r\n+      paper-icon-button[direction='desc'][active] ::content iron-icon {\r\n+        transform: rotate(-180deg);\r\n       }\r\n \r\n-      paper-ripple {\r\n-        color: rgba(0, 0, 0, .54);\r\n+      paper-icon-button[direction]:after {\r\n+        content: attr(sort-order);\r\n+        font-size: 9px;\r\n+        font-weight: bold;\r\n+        position: absolute;\r\n+        right: 4px;\r\n+        bottom: 8px;\r\n       }\r\n-\r\n-      #sortIcon[direction='desc'] iron-icon[active] {\r\n-        transform: rotate(-180deg);\r\n-      }\r\n     </style>\r\n \r\n-    <div id=\"sortIcon\" on-tap=\"_sort\" hidden=\"[[hidden]]\" direction$=\"[[direction]]\">\r\n-      <iron-icon active$=\"[[_isActive(path, sortOrder)]]\" icon=\"arrow-upward\"></iron-icon>\r\n-      <paper-ripple class=\"circle\" center></paper-ripple>\r\n-    </div>\r\n+    <paper-icon-button id=\"sortIcon\"\r\n+                       on-tap=\"_sort\"\r\n+                       hidden=\"[[hidden]]\"\r\n+                       icon=\"arrow-upward\"\r\n+                       active=\"[[_isActive(path, sortOrder)]]\"\r\n+                       direction$=\"[[direction]]\"\r\n+                       sort-order$=\"[[_computeSortOrder(path, sortOrder)]]\"></paper-icon-button>\r\n \r\n   </template>\r\n   <script>\r\n@@ -49,7 +54,10 @@\r\n       is: 'data-table-column-sort',\r\n \r\n       properties: {\r\n-        direction: String,\r\n+        direction: {\r\n+            type: String,\r\n+            notify: true\r\n+        },\r\n         hidden: Boolean,\r\n         path: String,\r\n         sortOrder: {\r\n@@ -59,13 +67,45 @@\r\n       },\r\n \r\n       _isActive: function(path, sortOrder) {\r\n+        if(Array.isArray(sortOrder)) {\r\n+          return sortOrder.find(function(item) {\r\n+            return item.path == path;\r\n+          }) !== undefined;\r\n+        }\r\n         return path === sortOrder.path;\r\n       },\r\n \r\n       _sortOrderChanged: function(sortOrder) {\r\n+        if(Array.isArray(sortOrder)) {\r\n+          var path = this.path;\r\n+          var sort = sortOrder.find(function(item) {\r\n+            return item.path == path;\r\n+          });\r\n+          if(sort) {\r\n+            this.direction = sort.direction;\r\n+          } else {\r\n+            this.direction = null;\r\n+          }\r\n+        } else {\r\n-        if (sortOrder.path === this.path) {\r\n-          this.direction = sortOrder.direction;\r\n+          if (sortOrder.path === this.path) {\r\n+            this.direction = sortOrder.direction;\r\n+          } else {\r\n+            this.direction = null;\r\n-        }\r\n+          }\r\n+        }\r\n+      },\r\n+\r\n+      _computeSortOrder: function(path, sortOrder) {\r\n+        if(Array.isArray(sortOrder)) {\r\n+          var sort = sortOrder.find(function(item) {\r\n+            return item.path == path;\r\n+          });\r\n+          return sort && sort.order ? sort.order: null;\r\n+        }\r\n+        if (path === sortOrder.path) {\r\n+          return sortOrder.order ? sortOrder.order : null;\r\n+        }\r\n+        return null;\r\n       },\r\n \r\n       _sort: function() {\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/Saulis/iron-data-table/issues/comments/202113520","html_url":"https://github.com/Saulis/iron-data-table/issues/29#issuecomment-202113520","issue_url":"https://api.github.com/repos/Saulis/iron-data-table/issues/29","id":202113520,"user":{"login":"userquin","id":6311119,"avatar_url":"https://avatars.githubusercontent.com/u/6311119?v=3","gravatar_id":"","url":"https://api.github.com/users/userquin","html_url":"https://github.com/userquin","followers_url":"https://api.github.com/users/userquin/followers","following_url":"https://api.github.com/users/userquin/following{/other_user}","gists_url":"https://api.github.com/users/userquin/gists{/gist_id}","starred_url":"https://api.github.com/users/userquin/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/userquin/subscriptions","organizations_url":"https://api.github.com/users/userquin/orgs","repos_url":"https://api.github.com/users/userquin/repos","events_url":"https://api.github.com/users/userquin/events{/privacy}","received_events_url":"https://api.github.com/users/userquin/received_events","type":"User","site_admin":false},"created_at":"2016-03-27T17:51:38Z","updated_at":"2016-03-27T17:51:38Z","body":"Hi Sailus:\r\n\r\nThe logic to keep sortOrder is not present in iron-data-table, the logic resides in another element wrapping iron-data-table. I need this functionallity so I have done this manually (see filtering.html).\r\n\r\nThe sequence is clicking three times (on the same column): first time will sort asc (as single sorting), second time will sort desc (as single sorting) and the third click will remove the sorting (instead of sort asc again like single sort does). Once removed sorted column, if there is more than one column sorted, then the same criteria is applied; if only one sorted column, fallback to default sorting (see modified _sort function); in all cases, the sort action will propagate sortOrder object to iron-data-table. This function is not included in the logic, I must find a way to include it (see filtering.html) in iron-data-table.\r\n\r\nAbout this behavior, I usually include a second \"button\" to remove the sorted column when aria-sorted attribute is present in thead.th. I'm working to include aria-* in data-table-column-sort and maybe I will try to include a new attribute to allow multi-sort, so the user will not need to include its own logic.\r\n\r\nAbout the rotation: I rotate the paper-icon-button, but the sort-order is included as paper-icon-button:after decorator with its content as attr(sort-order), so all is rotated (also the number, so it will appear rotated/inverted on the left upper corner).\r\n\r\n![sort-3](https://cloud.githubusercontent.com/assets/6311119/14066829/3d9acef0-f455-11e5-8e08-74edc0934774.png)\r\n\r\n\r\nBye."}}