docs: add data-table-select example

lzl0304 · May 23, 2024 · 407585d · 407585d
1 parent 963f853
commit 407585d
Show file tree

Hide file tree

Showing 2 changed files with 206 additions and 0 deletions.
diff --git a/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue b/packages/docs/src/examples/v-data-table/slot-item-data-table-select.vue
@@ -0,0 +1,200 @@
+<template>
+  <v-data-table
+    :items="desserts"
+    item-value="name"
+    show-select
+  >
+    <template v-slot:header.data-table-select="{ allSelected, selectAll, someSelected }">
+      <v-checkbox-btn
+        :indeterminate="someSelected && !allSelected"
+        :model-value="allSelected"
+        color="primary"
+        @update:model-value="selectAll(!allSelected)"
+      ></v-checkbox-btn>
+    </template>
+
+    <template v-slot:item.data-table-select="{ internalItem, isSelected, toggleSelect }">
+      <v-checkbox-btn
+        :model-value="isSelected(internalItem)"
+        color="primary"
+        @update:model-value="toggleSelect(internalItem)"
+      ></v-checkbox-btn>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup>
+  const desserts = [
+    {
+      name: 'Frozen Yogurt',
+      calories: 159,
+      fat: 6,
+      carbs: 24,
+      protein: 4,
+      iron: 1,
+    },
+    {
+      name: 'Ice cream sandwich',
+      calories: 237,
+      fat: 9,
+      carbs: 37,
+      protein: 4.3,
+      iron: 1,
+    },
+    {
+      name: 'Eclair',
+      calories: 262,
+      fat: 16,
+      carbs: 23,
+      protein: 6,
+      iron: 7,
+    },
+    {
+      name: 'Cupcake',
+      calories: 305,
+      fat: 3.7,
+      carbs: 67,
+      protein: 4.3,
+      iron: 8,
+    },
+    {
+      name: 'Gingerbread',
+      calories: 356,
+      fat: 16,
+      carbs: 49,
+      protein: 3.9,
+      iron: 16,
+    },
+    {
+      name: 'Jelly bean',
+      calories: 375,
+      fat: 0,
+      carbs: 94,
+      protein: 0,
+      iron: 0,
+    },
+    {
+      name: 'Lollipop',
+      calories: 392,
+      fat: 0.2,
+      carbs: 98,
+      protein: 0,
+      iron: 2,
+    },
+    {
+      name: 'Honeycomb',
+      calories: 408,
+      fat: 3.2,
+      carbs: 87,
+      protein: 6.5,
+      iron: 45,
+    },
+    {
+      name: 'Donut',
+      calories: 452,
+      fat: 25,
+      carbs: 51,
+      protein: 4.9,
+      iron: 22,
+    },
+    {
+      name: 'KitKat',
+      calories: 518,
+      fat: 26,
+      carbs: 65,
+      protein: 7,
+      iron: 6,
+    },
+  ]
+</script>
+
+<script>
+  export default {
+    data () {
+      return {
+        desserts: [
+          {
+            name: 'Frozen Yogurt',
+            calories: 159,
+            fat: 6.0,
+            carbs: 24,
+            protein: 4.0,
+            iron: 1,
+          },
+          {
+            name: 'Ice cream sandwich',
+            calories: 237,
+            fat: 9.0,
+            carbs: 37,
+            protein: 4.3,
+            iron: 1,
+          },
+          {
+            name: 'Eclair',
+            calories: 262,
+            fat: 16.0,
+            carbs: 23,
+            protein: 6.0,
+            iron: 7,
+          },
+          {
+            name: 'Cupcake',
+            calories: 305,
+            fat: 3.7,
+            carbs: 67,
+            protein: 4.3,
+            iron: 8,
+          },
+          {
+            name: 'Gingerbread',
+            calories: 356,
+            fat: 16.0,
+            carbs: 49,
+            protein: 3.9,
+            iron: 16,
+          },
+          {
+            name: 'Jelly bean',
+            calories: 375,
+            fat: 0.0,
+            carbs: 94,
+            protein: 0.0,
+            iron: 0,
+          },
+          {
+            name: 'Lollipop',
+            calories: 392,
+            fat: 0.2,
+            carbs: 98,
+            protein: 0,
+            iron: 2,
+          },
+          {
+            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,
+          },
+          {
+            name: 'KitKat',
+            calories: 518,
+            fat: 26.0,
+            carbs: 65,
+            protein: 7,
+            iron: 6,
+          },
+        ],
+      }
+    },
+  }
+</script>
diff --git a/packages/docs/src/pages/en/components/data-tables/data-and-display.md b/packages/docs/src/pages/en/components/data-tables/data-and-display.md
@@ -80,6 +80,12 @@ Use the **item-selectable** prop to designate a property on your items that cont
 
 <ExamplesExample file="v-data-table/prop-item-selectable" />
 
+### Custom select column
+
+Use the **item.data-table-select** slot alongside `v-checkbox-btn` to customize the checkbox used for row selection. You can also use the **header.data-table-select** slot to customize the select-all checkbox in the header of the column.
+
+<ExamplesExample file="v-data-table/slot-item-data-table-select" />
+
 ### Select strategies
 
 Data-tables support three different select strategies.