Skip to content

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

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.

Sign up for GitHub

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

Jump to bottom
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
Labels
Status: Workaround Available Type: Feature request

Comments

@oussama-he
Copy link

oussama-he commented Oct 7, 2019 •
edited
Loading

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
Copy link
Member

tmorehouse commented Oct 7, 2019 •
edited
Loading

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").

@tmorehouse tmorehouse mentioned this issue Oct 7, 2019
Merged
19 tasks
@oussama-he
Copy link
Author

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
Copy link
Member

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.

@tmorehouse tmorehouse mentioned this issue Oct 15, 2019
Merged
tmorehouse added a commit that referenced this issue Oct 15, 2019
@tmorehouse
feat(b-table, b-table-lite): add in head/foot row variant prop (addre…
b222c7c 
…sses #4215) (#4216)
@tmorehouse
Copy link
Member

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

@snyk-bot snyk-bot mentioned this issue Nov 21, 2019
Merged
@snyk-bot snyk-bot mentioned this issue Dec 12, 2019
Merged
This was referenced Jan 17, 2020
Merged
Merged
@snyk-bot snyk-bot mentioned this issue Feb 25, 2020
Closed
@snyk-bot snyk-bot mentioned this issue Mar 4, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Status: Workaround Available Type: Feature request
Projects
None yet
Milestone
No milestone
2 participants
@tmorehouse @oussama-he