Vue.js <v-data-table> - Default sorting( or no sort at all)/manual sorting

Question

I wanna display the numerical data od Vue.js data-table sorted in descending order from the initial state. I wanna make below picture from the initial state.

My Goal screen shot

In descending order is the data on the number of cases people in the middle of picture. I'm having a hard time not knowing what part of the code to modify. Would you please tell me?

 <template>
      <v-data-table
        :headers="headers"
        :items="covidList"
        :items-per-page="5"
        class="elevation-1"
        ></v-data-table>
</template>
<script>
import $axios from 'axios';

export default {

    data(){
        return{
            headers:[
                {
                    text:'area',
                    align:'start',
                    sortable:'false',
                    value:'name_ja',
                },
                {text:'cases',value:'cases'},
                {text:'deaths',value:'deaths'},
            ],
        }
    },
    async asyncData({ $axios }){
        const response = await $axios.get('https://covid19-japan-web-api.now.sh/api/v1/prefectures')
            return{
                covidList:response.data
            }
    }       
}
</script>

have you researched the vuetify docs? Nothing is mentioned anywhere on how to sort v-data-table? — palaѕн
– palaѕн, Commented Jun 10, 2020 at 4:57

Mahamudul Hasan · Accepted Answer · 2020-06-10 05:09:26Z

use this solution:

<template>
      <v-data-table
        :headers="headers"
        :items="covidList"
        :items-per-page="5"
        :sort-by.sync="columnName"
        :sort-desc.sync="isDescending"
        class="elevation-1"
        ></v-data-table>
</template>
<script>
import $axios from 'axios';

export default {

    data(){
        return{
            columnName:'cases',
            isDescending:true,
            headers:[
                {
                    text:'area',
                    align:'start',
                    value:'name_ja',
                },
                {text:'cases',value:'cases'},
                {text:'deaths',value:'deaths'},
            ],
        }
    },
    async asyncData({ $axios }){
        const response = await $axios.get('https://covid19-japan-web-api.now.sh/api/v1/prefectures')
            return{
                covidList:response.data
            }
    }       
}
</script>

Collectives™ on Stack Overflow

Vue.js <v-data-table> - Default sorting( or no sort at all)/manual sorting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related