CODEWITHSUNDEEP
vue.jsvuetify.js
Nszz
Nszz

Reputation: 145

how to create a dropdown select in one of the headers of vuetify table

I have component which renders a vuetify table and it receives a its header props from an interface: export const tableData: TableData = { headers: { text: 'Name', value: 'name', }, { text: 'Details', value: 'details', }, the listComponent.vue is `

<table-component
    :tableData="tableData"
    :tableItems="tableItems"
    @tableRowClick="onOfferClicked($event)"
    @tableActionClick="onActionItemClicked($event)"
    :loadingCount="offersLoadingCount"
    sort-by="updatedAt"
    sort-desc>
</table-component>

and the tableComponent is 

<v-data-table
    :headers="$props.tableData.headers"
    :items="$props.tableItems"
    :sort-by="$props.sortBy"
    :sort-desc="$props.sortDesc"
    >
</v-dta-table>

`

I want this 'Details' header to be a dropdown menu and not just a string "Details" How could I achieve this ? Thank you in advance for your help

Upvotes: 1

Views: 985

Answers (1)

Lyde Su
Lyde Su

Reputation: 180

<v-data-table
  :headers="$props.tableData.headers"
  :items="$props.tableItems"
  :sort-by="$props.sortBy"
  :sort-desc="$props.sortDesc"
>
  <template v-slot:header="{ props: { headers } }">
    <thead>
      <tr>
        <th 
          v-for="item in headers" 
          :key="item.text"
        >
          <v-menu v-if="item.text === 'Details'">
            …… your menu ……
          </v-menu>
          <b v-else>{{ item.text }}</b>
        </th>
      </tr>
    </thead>
  </template>
</v-data-table>

Upvotes: 1

Related Questions