React-table switch sorting icon

Question

Here is a link for the icon that I'm referring to. Black line at the top of the table header.

Hello I embedded a link into the question but I am trying to figure out how to switch the color of the sorting icon for React-table's library. I tried using

.sort-asc {
    color: green;
}

as well as the opposite

.sort-desc {
    color: green;
}

but all it does is change the entire table headers color and not just the icon. I tried fooling around inside inspector and I can't access the icon that way either.

Any help would much appreciated. Thank you in advance.

score 5 · Answer 1 · answered Jan 22 '19 at 17:22

5

My fix for this is this:

.MyReactTableClass {
  .-sort-desc {
    box-shadow: none !important;
    &:before {
      content: "▼";
      float: right;
    }
  }

  .-sort-asc {
    box-shadow: none !important;
    &:before {
      content: "▲";
      float: right;
    }
  }
}

answered Jan 22 '19 at 17:22

Nicolae Maties

2,476
1
16
26

1

I've been searching for how to change the default React Table `box-shadow` they use to indicate sorting for an icon. Thank you. – El Anonimo Nov 07 '19 at 14:58
How to show both up, down arrow for only sortable enabled columns? so user can know those are sortable column – Nomura Nori Mar 04 '21 at 10:21

score 0 · Answer 2 · answered May 27 '18 at 22:48

0

.sort-desc {
    box-shadow: inset 0 -3px 0 0 green;
}

answered May 27 '18 at 22:48

score 0 · Answer 3 · edited May 28 '18 at 06:02

0

Actually, that is box-shadow, you can change it easily

box-shadow: inset 0 3px 0 0 rgba(0,0,0,0.6)

edited May 28 '18 at 06:02

Suraj Rao

29,388
11
94
103

answered May 28 '18 at 05:50

Bojan Todorović

1
1

So eventually I don't want the box shadow. I actually want to switch that sorting "icon" to a carrot to place inside the header. I actually saw that box shadow inside the css file but whenever I switch anything nothing changes. – Jeffrey Yourman May 28 '18 at 14:15
Did you look at this: https://github.com/react-tools/react-table/issues/444#issuecomment-416374168 – olefrank Oct 24 '18 at 12:43

React-table switch sorting icon

3 Answers3