Skip to content

fix(VDataTable): respect disableSort prop for mobile display mode#22999

Open
hohanov wants to merge 1 commit into
vuetifyjs:v3-stablefrom
hohanov:fix-1
Open

fix(VDataTable): respect disableSort prop for mobile display mode#22999
hohanov wants to merge 1 commit into
vuetifyjs:v3-stablefrom
hohanov:fix-1

Conversation

@hohanov

@hohanov hohanov commented Jul 9, 2026

Copy link
Copy Markdown
Contributor

Description

fixes #22998

  1. Prevents the VSelect "Sort by" from rendering in the mobile header under either of the following conditions:
    • When the disable-sort prop is active.
    • When all columns have sortable: false configured.
  2. Moves the "Select all" VCheckboxBtn into a standalone input component (from VSelect "Sort by" append slot).

inspired by commit c0bdb9c

Markup:

<template>
  <v-app>
    <v-container>
      <v-data-table
        disable-sort
        :headers="headers"
        :items="desserts"
        mobile
        show-select
      ></v-data-table>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data() {
      return {
        headers: [
          {
            title: 'Dessert (100g serving)',
            align: 'start',
            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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant