[Vuejs]-Vue Bootstrap Table add different classes to columns

by

2👍

✅

You can configure a class on your td column using the tdClass property on your fields list. Here is a link to a working fiddle

Relevant code:

new Vue({
    el: '#app',
      data() {
        return {
          // Note 'isActive' is left out and will not appear in the rendered table
          fields: [
            {
              key: 'last_name',
              sortable: true
            },
            {
              key: 'first_name',
              sortable: false
            },
            {
              key: 'age',
              label: 'Person age',
              sortable: true,
              // 'my-class' will be applied to all the <td> elements for this column
              tdClass: 'my-class'
            }
          ],
          items: [
            { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
            { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
            { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
            { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
          ]
        }
      }
    })

<div id="app">
  <div>
      <b-table striped hover :items="items" :fields="fields"></b-table>
    </div>
</div>

Read more at the docs: https://bootstrap-vue.org/docs/components/table#field-definition-reference

👤Hazza

2👍

You can add classes to columns via the fields array that you already pass to the table, if you make each one an object.

You can add the property tdClass to add a class to each cell inside <tbody>, thClass for the headers in <thead> or just class for both.

https://bootstrap-vue.org/docs/components/table#field-definition-reference

new Vue({
  el: "#app",
  data() {
    return {
      fields: [
        { key: "isActive", tdClass: "text-left" },
        { key: "first_name", tdClass: "text-center" },
        { key: "last_name", tdClass: "text-center" },
        { key: "age", tdClass: "text-right" }
      ],
      items: [
        { isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
        { isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
        { isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
        { isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
      ]
    }
  }
})
<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>

<div id="app" class="p-3">
  <b-table :items="items" :fields="fields" bordered></b-table>
</div>
👤Hiws

Leave a comment