Vue Bootstrap Table add different classes to columns

Question

I'm using a Vue Bootstrap Table component and I want to add different CSS classes to different columns. I want my first column to have text-left, all the others text-center and the last one (right end one) to have text-right. Here is the current version of the b-table;

    <div class="table-responsive mb-0">
      <b-table
        :items="tableData"
        :fields="displayColumn"
        responsive="sm"
        :per-page="perPage"
        :current-page="currentPage"
        :sort-by.sync="sortBy"
        :sort-desc.sync="sortDesc"
        :filter="filter"
        :filter-included-fields="filterOn"
        @filtered="onFiltered"
        hover
      >
    <template #cell(detail)="row">
      <button @click="toggleRightBar(); changeRightBarContent(row.index)" class="btn btn-outline-primary toggle-right">
        <i class="bx bx-detail toggle-right"></i>
      </button>
    </template>
      </b-table>

Is there any way to add classes to specific columns or rows? Thanks in advance.

Hazza · Accepted Answer · 2021-06-14 12:52:53Z

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

Hiws · Accepted Answer · 2021-06-14 09:48:19Z

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

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

answered Jun 14, 2021 at 9:48

Hiws

10.7k2 gold badges24 silver badges39 bronze badges

1 Comment

Yasin Demirkaya Over a year ago

Thank you for the detailed explanation! It helped a lot

Collectives™ on Stack Overflow

Vue Bootstrap Table add different classes to columns

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related