packages/docs/src/examples/v-data-table/prop-multi-sort.vue - master - githubmirror/vuetify

packages/docs/src/examples/v-data-table/prop-multi-sort.vue
75 строк3 KB
J-Sek
feat(VDataTable): multi-sort mode and keyboard modifiers (#22133)
05 окт 2025, 23:08
05 окт 2025, 23:0854bbc84
<template>
  <div>
    <v-alert class="mb-2" density="compact" variant="outlined">
      <strong>Hint:</strong> Hold  <v-kbd>Alt</v-kbd> to prepend new columns to <v-code>sort-by</v-code> array
    </v-alert>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :multi-sort="{ mode: 'append', modifier: 'alt' }"
      :sort-by="[{ key: 'calories', order: 'asc' }, { key: 'fat', order: 'desc' }]"
    ></v-data-table>
  </div>
</template>

<script setup>
  const headers = [
    {
      title: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      key: 'name',
    },
    { title: 'Calories', key: 'calories' },
    { title: 'Fat (g)', key: 'fat' },
    { title: 'Carbs (g)', key: 'carbs' },
    { title: 'Protein (g)', key: 'protein' },
    { title: 'Iron (%)', key: 'iron' },
  ]
  const desserts = [
    { name: 'Frozen Yogurt', calories: 200, fat: 6, carbs: 24, protein: 4, iron: 1 },
    { name: 'Ice cream sandwich', calories: 200, fat: 9, carbs: 37, protein: 4.3, iron: 1 },
    { name: 'Eclair', calories: 300, fat: 16, carbs: 23, protein: 6, iron: 7 },
    { name: 'Cupcake', calories: 300, fat: 3.7, carbs: 67, protein: 4.3, iron: 8 },
    { name: 'Gingerbread', calories: 400, fat: 16, carbs: 49, protein: 3.9, iron: 16 },
    { name: 'Jelly bean', calories: 400, fat: 0, carbs: 94, protein: 0, iron: 0 },
    { name: 'Lollipop', calories: 400, fat: 0.2, carbs: 98, protein: 0, iron: 2 },
    { name: 'Honeycomb', calories: 400, fat: 3.2, carbs: 87, protein: 6.5, iron: 45 },
    { name: 'Donut', calories: 500, fat: 25, carbs: 51, protein: 4.9, iron: 22 },
    { name: 'KitKat', calories: 500, fat: 26, carbs: 65, protein: 7, iron: 6 },
  ]
</script>

<script>
  export default {
    data () {
      return {
        headers: [
          {
            title: 'Dessert (100g serving)',
            align: 'start',
            sortable: false,
            key: 'name',
          },
          { title: 'Calories', key: 'calories' },
          { title: 'Fat (g)', key: 'fat' },
          { title: 'Carbs (g)', key: 'carbs' },
          { title: 'Protein (g)', key: 'protein' },
          { title: 'Iron (%)', key: 'iron' },
        ],
        desserts: [
          { name: 'Frozen Yogurt', calories: 200, fat: 6.0, carbs: 24, protein: 4.0, iron: 1 },
          { name: 'Ice cream sandwich', calories: 200, fat: 9.0, carbs: 37, protein: 4.3, iron: 1 },
          { name: 'Eclair', calories: 300, fat: 16.0, carbs: 23, protein: 6.0, iron: 7 },
          { name: 'Cupcake', calories: 300, fat: 3.7, carbs: 67, protein: 4.3, iron: 8 },
          { name: 'Gingerbread', calories: 400, fat: 16.0, carbs: 49, protein: 3.9, iron: 16 },
          { name: 'Jelly bean', calories: 400, fat: 0.0, carbs: 94, protein: 0.0, iron: 0 },
          { name: 'Lollipop', calories: 400, fat: 0.2, carbs: 98, protein: 0, iron: 2 },
          { name: 'Honeycomb', calories: 400, fat: 3.2, carbs: 87, protein: 6.5, iron: 45 },
          { name: 'Donut', calories: 500, fat: 25.0, carbs: 51, protein: 4.9, iron: 22 },
          { name: 'KitKat', calories: 500, fat: 26.0, carbs: 65, protein: 7, iron: 6 },
        ],
      }
    },
  }
</script>