Sort icon placed ::after table header text

[b-89]

Is your feature request related to a problem? Please describe...

It would be nice to have the ability to have the sort icon set ::after the table header text instead of ::before. I'm currently to need to make the sort icon not float, but because the icon is rendered with ::before and float: right, there's no way of actually getting it to not float.

Describe the solution you'd like

Provide an optional way either to have the sort icon ::before or ::after, or just have it set to ::after since it's being floated anyways.

[tmorehouse]

With ::after the icon won't float correctly (it was using absolute positioning before, but that required position relative on the header cells which interfered when having dropdowns and tooltips in header cells).

[b-89]

Yeah, what I ended up doing is setting it up in our local SCSS to set the ::before to content: none, and then I set up the ::after with the ::before settings but without the float. We needed to prevent the table header text from breaking with white-space: nowrap, but because we're using that, the sort icon was overlapping with the text.

[b-89]

Not sure if a framework change is needed after all. I figured I'd mentioned it in case it made sense to do it.

[tmorehouse]

We may have to devices a few alternatives (choices) for sort icon positioning (or disabling, so uses could use SVGs or other icons).

[tmorehouse]

Another option we could implement would be a new SCSS variable to disable sort icons (we do have variables for setting the content of the 3 sort icons)

[tmorehouse]

PR #3968 switches sort icons to use SVGs as background images, which are configurable via SCSS/SASS variables

[tmorehouse]

BootstrapVue v2.0.0 stable has been released. See https://bootstrap-vue.js.org/docs/misc/changelog