Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow usage of custom sorting indicators on tables #3918

Closed
xaviarnl opened this issue Aug 20, 2019 · 7 comments · Fixed by #3968

Comments

@xaviarnl
Copy link

commented Aug 20, 2019

When you use the sorting options of a table, the columns which can be sorted will get a sorting indicator in their column head. Currently, these are arrows.
The arrows are (in my opinion) rather thin, which makes them harder to read. I would much rather have different/thicker arrows here.

Even better would be to have the option of specifying custom sorting indicators, perhaps by adding an additional slot type to the tables.
I would really like to use the sorting indicators which are in font awesome (for which we already have a Pro license). The fa indicators are little black triangles, and they are very well known with most users, and also much easier to read than the thin arrows in a table.

@Hiws

This comment has been minimized.

Copy link

commented Aug 20, 2019

You should be able to replace the default icons with font awesome ones by using CSS.

https://codepen.io/Hiws/pen/oNvzVjK

Quick edit: I realise this example uses an older version of font-awesome, however based on what i could read on their docs this should still be possible.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 20, 2019

We are (hopfully) revamping the table sort icons, and switching to simple SVG images instead of entity codes, and using the SVG as a background image of the header rather than being actually inserted into the header (similar to how the validation icons are inserted into form components)

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 20, 2019

The indicators are configured in SCSS (via pseudo selectors and content: "character"). you could modify the font being used, and then update the character in the content.

@xaviarnl

This comment has been minimized.

Copy link
Author

commented Aug 20, 2019

You should be able to replace the default icons with font awesome ones by using CSS.

https://codepen.io/Hiws/pen/oNvzVjK

Quick edit: I realise this example uses an older version of font-awesome, however based on what i could read on their docs this should still be possible.

I should have added to my original suggestion that I already went for this route. And it does indeed work, but it feels like it takes away of the idea of having a CSS framework like Bootstrap: if I go and add all kinds of CSS, why do I need the framework?

@xaviarnl

This comment has been minimized.

Copy link
Author

commented Aug 20, 2019

The indicators are configured in SCSS (via pseudo selectors and content: "character"). you could modify the font being used, and then update the character in the content.

Thanks for this info. Could you please add this information to the documentation? That will make it much easier for other people who want to modify this.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 20, 2019

Since we will be changing how the indicators are created, we will update the docs at that point to describe how they are generated.

@jackmu95 jackmu95 added the Type: Docs label Aug 22, 2019

tmorehouse added a commit that referenced this issue Aug 29, 2019
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 7, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.