docs(VDataTable): add slot-loading example to basics

packages/docs/src/examples/v-data-table/slot-loading.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="text-center">
+    <v-btn
+      :disabled="loading"
+      append-icon="mdi-refresh"
+      text="Refresh"
+      variant="outlined"
+      @click="onClick"
+    ></v-btn>
+  </div>
+
+  <v-data-table :loading="loading" :items="items">
+    <template v-slot:loading>
+      <v-skeleton-loader type="table-row@6"></v-skeleton-loader>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+  import { shallowRef } from 'vue'
+
+  const loading = shallowRef(false)
+
+  const items = [
+    { name: 'Chevrolet Camaro', year: 1967, engine: 'V8', horsepower: 375, torque: 415 },
+    { name: 'Ford Mustang', year: 1965, engine: 'V8', horsepower: 271, torque: 312 },
+    { name: 'Dodge Charger', year: 1968, engine: 'V8', horsepower: 425, torque: 490 },
+    { name: 'Pontiac GTO', year: 1964, engine: 'V8', horsepower: 350, torque: 445 },
+    { name: 'Plymouth Barracuda', year: 1964, engine: 'V8', horsepower: 330, torque: 425 },
+    { name: 'Chevrolet Chevelle SS', year: 1970, engine: 'V8', horsepower: 450, torque: 500 },
+    { name: 'Oldsmobile 442', year: 1971, engine: 'V8', horsepower: 340, torque: 440 },
+    { name: 'Dodge Challenger', year: 1970, engine: 'V8', horsepower: 425, torque: 490 },
+    { name: 'AMC Javelin', year: 1968, engine: 'V8', horsepower: 315, torque: 425 },
+    { name: 'Mercury Cougar', year: 1967, engine: 'V8', horsepower: 335, torque: 427 },
+  ]
+
+  function onClick () {
+    loading.value = true
+    setTimeout(() => {
+      loading.value = false
+    }, 2000)
+  }
+</script>
+
+<script>
+  import { shallowRef } from 'vue'
+
+  export default {
+    data () {
+      return {
+        loading: false,
+        items: [
+          { name: 'Chevrolet Camaro', year: 1967, engine: 'V8', horsepower: 375, torque: 415 },
+          { name: 'Ford Mustang', year: 1965, engine: 'V8', horsepower: 271, torque: 312 },
+          { name: 'Dodge Charger', year: 1968, engine: 'V8', horsepower: 425, torque: 490 },
+          { name: 'Pontiac GTO', year: 1964, engine: 'V8', horsepower: 350, torque: 445 },
+          { name: 'Plymouth Barracuda', year: 1964, engine: 'V8', horsepower: 330, torque: 425 },
+          { name: 'Chevrolet Chevelle SS', year: 1970, engine: 'V8', horsepower: 450, torque: 500 },
+          { name: 'Oldsmobile 442', year: 1971, engine: 'V8', horsepower: 340, torque: 440 },
+          { name: 'Dodge Challenger', year: 1970, engine: 'V8', horsepower: 425, torque: 490 },
+          { name: 'AMC Javelin', year: 1968, engine: 'V8', horsepower: 315, torque: 425 },
+          { name: 'Mercury Cougar', year: 1967, engine: 'V8', horsepower: 335, torque: 427 },
+        ],
+      }
+    },
+    methods: {
+      onClick () {
+        this.loading = true
+        setTimeout(() => {
+          this.loading = false
+        }, 2000)
+      },
+    },
+  }
+</script>

packages/docs/src/pages/en/components/data-tables/basics.md

@@ -196,6 +196,12 @@ When using the **group-by** prop, you can customize the group header with the `g
 
 <example file="v-data-table/slot-group-header" />
 
+#### Loading slot
+
+The `loading` slot allows you to customize your table's display state when fetching data. In this example we utilize the [v-skeleton-loader](/components/skeleton-loaders) component to display a loading animation.
+
+<example file="v-data-table/slot-loading" />
+
 ## Examples
 
 The following are a collection of examples that demonstrate more advanced and real world use of the `v-data-table` component.