React-data-grid: Custom icon for column sorting

[jlarso11]

HAVE YOU ALREADY SEARCHED FOR SIMILAR ISSUES? PLEASE HELP US OUT AND DOUBLE-CHECK FIRST!

ALSO, PLEASE DON'T BE THAT PERSON WHO DELETES THIS TEMPLATE. IT'S HERE FOR A REASON.

THANKS!

WHICH VERSION OF REACT ARE YOU USING?

Officially Supported:
[ ] v0.14.x

Community Supported:
[X] v15.0.x

WHICH BROWSER ARE YOU USING?

Officially Supported:
[ ] IE 9 / IE 10 / IE 11
[ ] Edge
[X] Chrome

Should work:
[X] Firefox
[X] Safari

---

I'm submitting a ... (check one with "x")

[ ] bug report
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/adazzle/react-data-grid/blob/master/CONTRIBUTING.md

Current behavior

Expected/desired behavior
Is there a way to put a custom icon in for sorting on a column instead of the default arrow?

Reproduction of the problem
If the current behavior is a bug or you can illustrate your feature request better with an example, please provide the steps to reproduce and if possible a minimal demo of the problem.

What is the expected behavior?

What is the motivation / use case for changing the behavior?

[diogofcunha]

Hi @jlarso11.

You can implement react-grid-HeaderCell-sortable css class an specify what you want down there.
There is also react-grid-HeaderCell-sortable--ascending and react-grid-HeaderCell-sortable--descending classes if you want something different.

As you can see in here, if you need to override the cursor you will need to set !important on your class as inline styles take priority over css classes.

[iamkennytso]

The link seems to be down, can you please direct me to some example code?

[BlaineBradbury]

I am assuming this to be the new location of the source code link from @diogofcunha above.

See my hack solution in a related comment here also.