CODEWITHSUNDEEP
cssvue.jsbootstrap-4bootstrap-tablebootstrap-vue
Raven
Raven

Reputation: 41

Vue.js : How to modify color of selected-variant in table of BootstrapVue?

I'm using bootstrap-vue table row select support. I want to modify the color of selected-variant prop of b-table. In the code, info is the selected-variant color of selected row in the table. I want to customize it and make it color #91c27d.

Below is the code and screenshot.

This is the table html code:

    <b-table 
       sticky-header="450px" 
       striped 
       hover 
       :items="items" 
       :fields="fields"
       ref="selectableTable"
       selectable
       :select-mode="selectMode"
       selected-variant="info"
       @row-selected="onRowSelected">   
    </b-table>

This is the whole script:

    import axios from 'axios';
    export default {
       name: "Canvassing",
       data() {
          return {
             fields: [
                { key: 'userId', label: 'User ID', thStyle: {background: '#0074a5', color: '#ffffff'} }, 
                { key: 'id', label: 'ID', thStyle: {background: '#0074a5', color: '#ffffff'} },
                { key: 'title', label: 'Title', thStyle: {background: '#0074a5', color: '#ffffff'} },
                { key: 'completed', label: 'Completed', thStyle: {background: '#0074a5', color: '#ffffff'} }
              ],
              items: []
           }
        },
        created() {
           axios 
            .get('https://jsonplaceholder.typicode.com/todos')
            .then(res => this.items = res.data)
            .catch(e => {
               this.errors.push(e)
             });
        },
        methods: {
           onRowSelected(items) {
              this.selected = items
           }
        }
    }

This is the screenshot of output: This is the screenshot of output

Upvotes: 1

Views: 5354

Answers (1)

Troy Morehouse
Troy Morehouse

Reputation: 5435

Ypu need to create a new variant name that uses your value. Basically you need to add a new theme color to Bootstrap's SCSS them color table: https://bootstrap-vue.js.org/docs/reference/theming/ and https://bootstrap-vue.js.org/docs/reference/color-variants/

OR, set the seleted variant to "" (empty string), and target the selected row with custom CSS targetting .table > tbody > tr.b-row-selected

<style scoped>
/deep/ .table > tbody > tr.b-table-row-selected,
/deep/ .table > tbody > tr.b-table-row-selected > td,
/deep/ .table > tbody > tr.b-table-row-selected > th {
  background-color: #91c27d;
}
</style>

Upvotes: 3

Related Questions