Adding Custom Up and Down Arrow Icons to Column Header by default to all sortable columns

[saching6]

Expected Behavior

As soon as we click on a column we see a downward (or an upward) arrow depending on the direction of sort. I would like to add both up and down arrow to indicate to the user that the column is sortable. Something similar to what is done by React Bootstrap Table. I was wondering if there is any way to do this while preserving other properties of the header cell. I just want to show the double arrow in the default (sort inactive mode).

Current Behavior

As soon as we click on a column we see a downward (or an upward) arrow depending on the direction of sort. Currently unless we explicity mention it or unless the user clicks on the column header, there is no clear way to indicate to the user that a particular column is sortable.