CODEWITHSUNDEEP
cssvue.jsvuetify.js
user12763413
user12763413

Reputation: 1349

Add style to first row of v-data-table in vuetify

I have defined the table as below using vuetify data table component. The issue I am facing here is I not able to figure out how can I make the first row of the table bold. The first item record to be bold. Please help find a solution. I am using vuetify 1.0.5.

   <v-data-table>
    :headers="headers"
    :items="agents"
    hide-actions
    class="agent-table"
  >
  <template slot="items" slot-scope="props">
    <td>{{ props.item.name }}</td>
    <td>{{ props.item.address }}</td>
  </template>
  </v-data-table>

Upvotes: 1

Views: 2272

Answers (3)

user12763413
user12763413

Reputation: 1349

<template slot="items" slot-scope="props">
 <tr v-bind:class="getClass(props.item.name)">
  <td>{{ props.item.name }}</td>
  <td>{{ props.item.address }}</td>
 </tr>
</template>

<script>
  export default {
   methods: {
      getClass: function (name) {
        if (name == 'XYZ') return 'header2';
      },
    }
  }
</script>

<style>
 .header2 {
   // added style here
 }
<style>

Upvotes: 0

Manoj
Manoj

Reputation: 831

use v-if to search for first row index or something unique about first row and bind it to style or class. Few more ways listed here reference

<template slot="items" slot-scope="props">
  <tr v-if="unique condition" v-bind:style="{ 'font-weight': 'bold'}>
   <td>{{ props.item.name }}</td>
   <td>{{ props.item.address }}</td>
  </tr>
  <tr v-else>
   <td>{{ props.item.name }}</td>
   <td>{{ props.item.address }}</td>     
  </tr>
 </template>

Upvotes: 1

Hamza Rashid
Hamza Rashid

Reputation: 1387

Another approach that can be used is using computed properties to insert the index to each element in the data. This can be useful if you need to update the table later on as computed properties are updated automatically.

For example, say the item data is stored in items.

data() {
  return {
    items: [{
      fruit_name: 'Banana',
      calories: 30
    }, {
      fruit_name: 'Apples',
      calories: 40
    }]
  }
}

Here, every element to be itself plus additional attribute, i.e. index. Element addition is achieved using spread operator. All mapped elements are combined into single array using functional-programming style of map function.

computed: {
  itemsWithIndex: () {
    return this.items.map(
      (items, index) => ({
        ...items,
        index: index + 1
      }))
  }
}

Note: index: index+1 will make the numbering start from 1.

Then, inside headers data needed for v-data-table, you can make reference to index item data for numbering.

data() {
  return {
    items: {
      ...
    },
    headers: [{
        text: 'Num',
        value: 'index',
      },
      {
        text: 'Fruit Name',
        value: 'fruit_name',
      },
      {
        text: 'Calories',
        value: 'calories',
      }
    ]
  }
}

Codepen example: https://codepen.io/72ridwan/pen/NWPMxXp

Reference

Upvotes: 0

Related Questions