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

thead-variant primary, info, ... don't work with b-table #4215

Closed
oussama-he opened this issue Oct 7, 2019 · 4 comments · Fixed by #4216
Closed

thead-variant primary, info, ... don't work with b-table #4215

oussama-he opened this issue Oct 7, 2019 · 4 comments · Fixed by #4216

Comments

@oussama-he
Copy link

@oussama-he oussama-he commented Oct 7, 2019

I use b-table in an application that I'm building and want to change the table head using thead-variant. When I set the value dark or light to thead-variant it works fine, but when I use the other variants like primary, info, danger, ... they don't work for me.

the versions that I use are:

Bootstrap: 4.3.1
Bootstrap-vue: 2.0.3
Vue: 2.6.10

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Oct 7, 2019

head-variant light or dark are the only supported Bootstrap variants on the <head> and <foot> elements, which are mainly used for controlling the text of the header.

To get a header row variant applied, you currently need to set thead-tr-class to table-info (etc) (for non dark table or not head-variant="dark"), or bg-info (etc) (for dark table or head-variant="dark").

@oussama-he

This comment has been minimized.

Copy link
Author

@oussama-he oussama-he commented Oct 7, 2019

Thank you for your help. Could you please tell me how can I change text color in the table head?
Thank you in advance.

@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Oct 7, 2019

Set thead-tr-class to have text-danger etc., or use the thClass property in the field's definition (https://bootstrap-vue.js.org/docs/components/table#field-definition-reference) to set the <th> class to, say, text-danger.

@oussama-he oussama-he closed this Oct 7, 2019
tmorehouse added a commit that referenced this issue Oct 15, 2019
…sses #4215) (#4216)
@tmorehouse

This comment has been minimized.

Copy link
Member

@tmorehouse tmorehouse commented Nov 13, 2019

BootstrapVue v2.1.0 has been released, which has added support for this feature.

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