CODEWITHSUNDEEP
vue.jsvuetify.js
MUHAMMAD Siyab
MUHAMMAD Siyab

Reputation: 446

Applying custom classes on Vuetify Data table columns

I'm using Vuetify in my project. My question is, is there any way to apply custom classes on Vuetify Data table column ?. I actually want to hide these specific columns in print.

data() {
    return {
      salaryId: "",
      search: "",
      paymentModal: false,
      paymentsModal: false,
      editModal: false,
      headers: [
        { text: "S#", value: "sno" },
        { text: "Staff Type", value: "staff_type" },
        { text: "Month", value: "month" },
        { text: "Salary", value: "amount" },
        { text: "Paid", value: "paid" },
        { text: "Balance", value: "balance" },
        { text: "Status", value: "status" },
        { text: "Pay Salary", value: "pay_salary" }, // this should not be in print
        { text: "Payments", value: "payments" },   // this should not be in print
        { text: "Actions", value: "actions" }  // this should not be in print
      ]
    };
  }

Upvotes: 1

Views: 9339

Answers (2)

Vicente Olivert Riera
Vicente Olivert Riera

Reputation: 1220

For Vuetify 3

You can use headerProps and cellProps within headers, for instance:

headers: [
  {
    title: "Name",
    key: "name",
    headerProps: { // it will affect to the rendered <th> element
      class: "myclass", // can also be an array of strings
    },
    cellProps: { // it will affect to the rendered <td> elements
      class: "myclass", // can also be an array of strings
    },
  },
]

Ref: https://vuetifyjs.com/en/api/v-data-table/#props-headers

For Vuetify 2

You can use class and cellClass within headers, for instance:

headers: [
  {
    text: "Name",
    value: "name",
    class: "myclass", // affects to <th> element; can be array of strings
    cellClass: "myclass", // affects to <td> elements; can be array of strings
  },
]

Ref: https://v2.vuetifyjs.com/en/api/v-data-table/#props-headers

Upvotes: 2

Elmar Caixeta
Elmar Caixeta

Reputation: 88

You can use the header properties to add a custom class to the headers:

headers: [{ text: "Pay Salary", value: "pay_salary", class: 'custom-class' }]

and use the slots to add a class to each cell

<v-data-table
  :headers="headers"
  :items="desserts"
>
  <template v-slot:item="{ item }">
    <tr>
      <td class="custom-class">{{ item.name }}</td>
      <td class="custom-class">{{ item.age }}</td>
      <td class="custom-class">{{ item.country }}</td>
    </tr>
  </template>
</v-data-table>

https://vuetifyjs.com/en/components/data-tables/#data-tables

In order to hide a column, I know two solutions:

  1. Filtering the headers array. Random example:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  props: {
    hideColumns: {
      type: Array,
      default: () => [],
    },
  },
  data () {
    return {
      headers: [
        { text: 'Name', value: 'name' },
        { text: 'Age', value: 'age' },
        { text: 'Country', value: 'country' },
      ],
      desserts: [
        { name: 'Lee', age: 45, country: 'EUA' },
        { name: 'Lin', age: 85, country: 'Japan' },
      ],
    }
  },
  computed: {
    newHeaders() {
      return this.headers.filter(({ value }) => !this.hideColumns.includes(value));
    },
  },
})
<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="newHeaders"
      :items="desserts"
    ></v-data-table>
  </v-app>
</div>

  1. Using the bootstrap classes:

https://getbootstrap.com/docs/4.0/utilities/display/#hiding-elements

Upvotes: 2

Related Questions