How can I show sorting icons all the time and with blue color for current sorting column in react material-table

Question

I have create a material table using material-table liberary. I want to show the sorting icon all the time for all columns. Also color should be blue for the column which is currently sorted.

Below is the sandbox link for the code.

https://codesandbox.io/s/stupefied-mclean-okcvx?file=/src/App.js

How can I acheive the above expected output?

Is there any way to achieve this by overriding the components?

Answer 1

To always show sort icons (not only when hovering), you need to apply CSS style for your material-table.

styles.css

.App {
  font-family: sans-serif;
}
.MuiTableSortLabel-icon {
  opacity: 1;
}