feat(VDataTableHeaders): Add event to datatable when a header is clicked

[NotCarlosSerrano]

Description

resolves: 13672

Markup:

<template>
  <v-app>
    <v-container>
      <v-data-table
        :headers="headers"
        :items="desserts"
        item-value="name"
        class="elevation-1"
        @click:columHeader="handleColumnHeaderClick"
      ></v-data-table>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    setup () {
      return {
        headers: [
          {
            title: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            key: 'name',
          },
          { title: 'Calories', align: 'end', key: 'calories' },
          { title: 'Fat (g)', align: 'end', key: 'fat' },
          { title: 'Carbs (g)', align: 'end', key: 'carbs' },
          { title: 'Protein (g)', align: 'end', key: 'protein' },
          { title: 'Iron (%)', align: 'end', key: 'iron' },
        ],
        desserts: [
          {
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1',
          },
          {
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0',
          },
          {
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6',
          },
          {
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7',
          },
          {
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16',
          },
          {
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1',
          },
          {
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2',
          },
          {
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8',
          },
          {
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45',
          },
          {
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22',
          },
        ]
      }
    },
    methods: {
      handleColumnHeaderClick(event, column) {
        console.log('Column clicked')
        console.log(event)
        console.log(column)
      }
    }
  }
</script>

[nekosaur]

The only thing I'm hesitant on is the name of the event. column might be misinterpreted as clicking anywhere in the column, not just the header. (I know the component is called VDataTableColumn but that's my bad)

[NotCarlosSerrano]

The only thing I'm hesitant on is the name of the event. column might be misinterpreted as clicking anywhere in the column, not just the header. (I know the component is called VDataTableColumn but that's my bad)

How about changing the name to "columnHeader"?

[NotCarlosSerrano]

@nekosaur How about changing the name to "columnHeader"?

It would then be as follows: "@click:columHeader"