Vuetify v-data-table header customization

Question

I have customized the v-data-table header with text-field for searching to make the function compact. But I can not prevent the sort click function on text-field.

Step to Reproduce:

<div id="app">
    <v-app>
      <v-main>
        <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
  >
    <template v-slot:header.calories="{ header }">
          <v-text-field label="search calories"></v-text-field>
    </template>
  </v-data-table>
      </v-main>
    </v-app>
  </div>

Please click this Codepen link Please click on search calories one to two times, it sorts asc or desc.

I want to stop the sort function only on the header text or custom text-field, because there is a sort icon right side of it.

Moritz Ringler · Accepted Answer · 2023-01-26 14:40:47Z

1

Put a @click.stop on the v-text-field:

<template v-slot:header.calories="{ header }">
  <v-text-field label="search calories" @click.stop />
</template>

This will stop the click event from propagating into the header.

answered Jan 26, 2023 at 14:40

Moritz Ringler

16.4k10 gold badges29 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sharif Over a year ago

hello @moritz-ringler but there are some selective areas still @click.stop is not working. I have shared a link with the image so that you can take a look. Also many many thanks for your contribution. image link

Moritz Ringler Over a year ago

@Sharif Hard to say, could be margins on the input. Try wrapping it in a div and catch the event there: ´<div @click.stop><v-text-field label="search calories" /></div>

. That should give clearer boundaries. Finally, you could provide your own header through the [header slot](https://vuetifyjs.com/en/api/v-data-table/#slots-header), where sort is not triggered on the whole

th`. Let me know if that helps

Collectives™ on Stack Overflow

Vuetify v-data-table header customization

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related