CODEWITHSUNDEEP
vue.jsbuefy
developer9
developer9

Reputation: 126

How to apply the background color to buefy table?

I have a table like this and would like to append bulma class "has-background-color-dark" 

<b-table :data="data" :columns="columns"></b-table>

Thanks in advance.

Upvotes: 3

Views: 4524

Answers (2)

Allkin
Allkin

Reputation: 1098

You can define a class property in your data option like this

export default {
  data() {
     return {
       tableClassList: ['some-class']
     }
  }
  computed: {
  },
  created() {
  },
  mounted() {
  },
};

Then in your template you bind that prop to your class attribute like this

<b-table :data="data" :class="tableClassList" :columns="columns"></b-table>

Then, let's say you want to append the has-background-color-dark class after an action like clicking a button. For this example user clicks a button and a method appendClass is called like this

export default {
  data() {
     return {
       tableClassList: ['some-class']
     }
  },
  methods: {
      appendClass() {
        this.tableClassList.push('has-background-color-dark')
      }
  },
  computed: {
  },
  created() {
  },
  mounted() {
  },
};

In this example I used an array as a list for classes. You can also use a object for more complex conditional appending. More info on class binding here

Example fiddle

Upvotes: 0

ManUtopiK
ManUtopiK

Reputation: 4714

Just add class to your component:

<b-table class="has-background-color-dark" :data="data" :columns="columns"></b-table>

It will apply class to the top parent element of table component: <div class="b-table has-background-dark">... .
But Bulma set a white background in the <table>, so the whole table is not dark, just pagination. As we can see in the source code of buefy table component, there is no way to change that by attributes. So, we have to go in css with /deep/.
Add your own class like <b-table class="myTable has-background-color-dark" ... and add style bloc to your component:

<style lang="scss" scoped>
.myTable {
  /deep/ table.table {
    background-color: $dark;
  }
}
</style>

Upvotes: 2

Related Questions