feat(VDataTable): Add item.prepend slot

[4very]

Description

Add a slot item.prepend to add content before each item in a VDataTable. The use case is for alerts/notifications for rows. I refrained from adding a item.append since it would be weird with expanded rows, but if symmetry is requested then I will happily add it.

Some considerations:

• Should it be item.data-table-prepend to prevent any conflicts with the item.${key} slots?

Markup:

<template>
  <v-data-table :headers="headers" :items="tools">
    <template #item.prepend="{item}">
      <v-alert text="Alert!" type="error" v-if="item.alert" />
    </template>
  </v-data-table>
</template>

<script setup>
const headers = [
  { title: 'Tool Name', align: 'start', sortable: false, key: 'name' },
  { title: 'Weight(kg)', key: 'weight', align: 'end' },
  { title: 'Length(cm)', key: 'length', align: 'end' },
  { title: 'Price($)', key: 'price', align: 'end' },
]

const tools = [
  { name: 'Hammer', weight: 0.5, length: 30, price: 10, type: 'hand', alert: true },
  { name: 'Screwdriver', weight: 0.2, length: 20, price: 5, type: 'hand' },
  { name: 'Drill', weight: 1.5, length: 25, price: 50, type: 'power' },
  { name: 'Saw', weight: 0.7, length: 50, price: 15, type: 'hand' },
  { name: 'Tape Measure', weight: 0.3, length: 10, price: 8, type: 'measuring' },
  { name: 'Level', weight: 0.4, length: 60, price: 12, type: 'measuring' },
  { name: 'Wrench', weight: 0.6, length: 25, price: 10, type: 'hand' },
  { name: 'Pliers', weight: 0.3, length: 15, price: 7, type: 'hand' },
  { name: 'Sander', weight: 2.0, length: 30, price: 60, type: 'power' },
  { name: 'Multimeter', weight: 0.5, length: 15, price: 30, type: 'measuring' },
]
</script>