{"action":"created","issue":{"url":"https://api.github.com/repos/react-tools/react-table/issues/444","repository_url":"https://api.github.com/repos/react-tools/react-table","labels_url":"https://api.github.com/repos/react-tools/react-table/issues/444/labels{/name}","comments_url":"https://api.github.com/repos/react-tools/react-table/issues/444/comments","events_url":"https://api.github.com/repos/react-tools/react-table/issues/444/events","html_url":"https://github.com/react-tools/react-table/issues/444","id":251425448,"node_id":"MDU6SXNzdWUyNTE0MjU0NDg=","number":444,"title":"How to customize sort icon in header cell?","user":{"login":"prettyGIT","id":21000216,"node_id":"MDQ6VXNlcjIxMDAwMjE2","avatar_url":"https://avatars3.githubusercontent.com/u/21000216?v=4","gravatar_id":"","url":"https://api.github.com/users/prettyGIT","html_url":"https://github.com/prettyGIT","followers_url":"https://api.github.com/users/prettyGIT/followers","following_url":"https://api.github.com/users/prettyGIT/following{/other_user}","gists_url":"https://api.github.com/users/prettyGIT/gists{/gist_id}","starred_url":"https://api.github.com/users/prettyGIT/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/prettyGIT/subscriptions","organizations_url":"https://api.github.com/users/prettyGIT/orgs","repos_url":"https://api.github.com/users/prettyGIT/repos","events_url":"https://api.github.com/users/prettyGIT/events{/privacy}","received_events_url":"https://api.github.com/users/prettyGIT/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2017-08-19T13:32:25Z","updated_at":"2018-08-27T21:25:46Z","closed_at":"2017-09-01T04:57:20Z","author_association":"NONE","body":"I am wondering if it is possible to custom sort icon\r\n\r\nCurrently sort icon is defined as below\r\n.ReactTable .rt-thead .rt-th.-sort-asc, .ReactTable .rt-thead .rt-td.-sort-asc {\r\n    -webkit-box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);\r\n    box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6);\r\n}\r\n\r\nI want to change it into arrow up/down icon corresponding to the sort order"},"comment":{"url":"https://api.github.com/repos/react-tools/react-table/issues/comments/416374168","html_url":"https://github.com/react-tools/react-table/issues/444#issuecomment-416374168","issue_url":"https://api.github.com/repos/react-tools/react-table/issues/444","id":416374168,"node_id":"MDEyOklzc3VlQ29tbWVudDQxNjM3NDE2OA==","user":{"login":"andrewaxelrod","id":10477044,"node_id":"MDQ6VXNlcjEwNDc3MDQ0","avatar_url":"https://avatars3.githubusercontent.com/u/10477044?v=4","gravatar_id":"","url":"https://api.github.com/users/andrewaxelrod","html_url":"https://github.com/andrewaxelrod","followers_url":"https://api.github.com/users/andrewaxelrod/followers","following_url":"https://api.github.com/users/andrewaxelrod/following{/other_user}","gists_url":"https://api.github.com/users/andrewaxelrod/gists{/gist_id}","starred_url":"https://api.github.com/users/andrewaxelrod/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/andrewaxelrod/subscriptions","organizations_url":"https://api.github.com/users/andrewaxelrod/orgs","repos_url":"https://api.github.com/users/andrewaxelrod/repos","events_url":"https://api.github.com/users/andrewaxelrod/events{/privacy}","received_events_url":"https://api.github.com/users/andrewaxelrod/received_events","type":"User","site_admin":false},"created_at":"2018-08-27T21:25:46Z","updated_at":"2018-08-27T21:25:46Z","author_association":"NONE","body":"A CSS Solution if you want to use a sorting up/down icon. This solution is for resizable columns enabled. \r\n\r\n```\r\n.ReactTable .rt-resizable-header {\r\n    padding: 6px 24px !important;\r\n    -webkit-box-shadow: none !important;\r\n    box-shadow: none !important;\r\n}\r\n \r\n.ReactTable .rt-resizer:before {\r\n    display: inline-block;\r\n    position: absolute;\r\n    right: 25px;\r\n    top: 3px;\r\n    height: 18px;\r\n    width: 18px;\r\n    color: transparent;\r\n    content: '.';\r\n    background-size: 18px 18px;\r\n    background-repeat: no-repeat; \r\n    opacity: 0.87;\r\n}\r\n\r\n.ReactTable  .rt-resizable-header-content:after {\r\n    position: absolute;\r\n    right: 8px;\r\n    top: 3px;\r\n    height: 18px;\r\n    width: 18px;\r\n    z-index: 120;\r\n    color: transparent;\r\n    content: '.';\r\n}\r\n\r\n.ReactTable .rt-th.-sort-asc .rt-resizer:before {\r\n    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAgMTVWNmw0IDQgMS0xLTYtNi02IDYgMSAxIDQtNHY5eiIgZmlsbD0iIzMzMyIvPjwvc3ZnPg==);\r\n}\r\n\r\n.ReactTable .rt-th.-sort-desc .rt-resizer:before {\r\n    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAzdjkuMTNMNCA4IDMgOWw2IDYgNi02LTEtMS00IDQuMTNWM3oiIGZpbGw9IiMzMzMiLz48L3N2Zz4=);\r\n}\r\n```"}}
{"actor":{"display_login":"andrewaxelrod"}}