CODEWITHSUNDEEP
vue.jsvuejs2vue-componentvuetify.js
user12140833
user12140833

Reputation: 179

Select options or drop-down menu in a column in v-data-table

I wanted to create a drop-down menu options in v-data-table 

<v-data-table
      :headers="headers"
      :items="res"
      :options.sync="options"
      :server-items-length="totalRes"
      :loading="loading"
      loading-text="Loading ..... Please wait"
      :footer-props="{
        itemsPerPageOptions: [5, 10, 20, 40],
        itemsPerPageText: 'Res per page',
      }"
      class="elevation-23"
    >
    </v-data-table>

data () {
    return {
        res: [],
        totalRes: 0,
        search: '',
        loading: false,
        options: {
          page: 1,
          itemsPerPage: 40,
        },
        headers: [
      { text: 'Name', value: 'fullName' },
      { text: 'Med', value: 'med' },
      { text: 'Start Date', value: 'startDate' },
      { text: 'Create  ', value: '' },
    ],
    }
},

Here I have a field in header Create in that field I want to show a list of drop-down say for now ['A', 'B', 'C'] and on clicking on any options among the list I wanted to route to certain routes. How do I do it ?

Upvotes: 3

Views: 15391

Answers (2)

user1296829
user1296829

Reputation: 21

Vuetify v-data-table provides a slot for each of the values. I updated your example by giving the last column the name path so that it may be used in the item slot.

I added the v-select so that you get the drop down effect.

Codepen

    <v-data-table
      :headers="headers"
      :items="res"
      item-key="Name"
      class="elevation-23"
    >
      <template v-slot:item.path="{ item }">
        <v-select
          v-model="cSel"
          :items="item.path"
      ></v-select>
      </template>    
    </v-data-table>


   data () {
    return {
      expanded: [],
      singleExpand: false,
      cSel: 'A',
      res: [
        {
          fullName: 'name 1',
          med: 'med 1',
          startDate: 'start  date 1',
          path:  ['A', 'B', 'C', 'D'],
        },
       ],
       totalRes: 0,
        search: '',
        loading: false,
        options: {
          page: 1,
          itemsPerPage: 40,
        },
        headers: [
      { text: 'Name', value: 'fullName' },
      { text: 'Med', value: 'med' },
      { text: 'Start Date', value: 'startDate' },
      { text: 'Create  ', value: 'path', width: '200' },
     ],      
   }

For what you are trying to do the expanded row would work to place the links, but if you wanted to have custom data display (the data is in rows, or are other conversions needed) then you may want to consider the named slot.

Regards! ;-J

Upvotes: 2

Paurakh Sharma Humagain
Paurakh Sharma Humagain

Reputation: 785

Have you tried Expandable row: https://vuetifyjs.com/en/components/data-tables#expandable-rows ?

Upvotes: 1

Related Questions