CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
mmachenry
mmachenry

Reputation: 1962

How can I sort a v-data-table by default?

I can't seem to get default sorting to work. All I can see for the argument custom-sort in the documentation is that it's a "Function used to sort items", but I don't know in what way. I can imagine many. Is it called for an initial sort? It seems to return a list of items, but when I try to create one, I get an error saying this.customSort is not a function.

<template>
  <v-data-table
    :headers="headers"
    :items="reports"
    hide-default-footer>
    <template v-slot:item.requested="{ item }">
      {{ datetimeToDistance(item.requested) }}
    </template>
  </v-data-table>
</template>
<script>
export default {
name: 'Reports',
data () {
    return {
        customSort: (items,index,isDesc) => console.log("never called"),
        reports: [{name:"a",requested:"2020-01-01T00:00:00Z"}.{name:"b",requested:"2020-02-02T00:00:00"}],
    }
},
computed: {
    headers () {
        return [
            {text: "Name", value: "name"},
            {text: "Report Type", value: "report_type"},
            {text: "Requested", value: "requested", sort: (a,b) => a.localeCompare(b) },
            ];
    },
}
}
</script>

My sorting works if you click on the links. All I really want here is to say: "When the page first loads, sort by 'requested' as though the user clicked that one initially. Then let them change the ordering."

Note: The datetimeToDistance is just a function which calls a library and isn't too important. It's just that the output of that column is not directly in the objects.

Upvotes: 17

Views: 45471

Answers (4)

Wolfobus N
Wolfobus N

Reputation: 1

This works too, it is how i do it:

<v-data-table
          :headers="headersItems"
          :items="items"
          :no-data-text="noData"
          :no-results-text="noResults"
          :sort-desc="true"
          sort-by="timestamp"

        >

Upvotes: 0

Genevi&#232;ve Le Houx
Genevi&#232;ve Le Houx

Reputation: 312

If using Vuetify 3.xx

<template>
    <div>
        <v-data-table
            v-model:sort-by="sortBy"
        ></v-data-table>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                sortBy: [{ key: 'key', order:'asc'}],
        },
    }
</script>

'key' should be the key you specified in the headers array

Upvotes: 6

waspinator
waspinator

Reputation: 6826

Use the sort-by and the sort-desc properties with the .sync option, and set the desired values in data.

<template>
  <div>
    <v-data-table
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
    ></v-data-table>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        sortBy: 'fat',
        sortDesc: false,
    },
  }
</script>

https://vuetifyjs.com/en/components/data-tables/#external-sorting

Upvotes: 20

Samidjo
Samidjo

Reputation: 2355

I usually sort v-datatable in the pagination directive as below:

<template>
    <v-data-table :headers="headers" :items="reports" :pagination.sync="pagination" hide-default-footer>
        <template v-slot:item.requested="{ item }">
            {{ datetimeToDistance(item.requested) }}
        </template>
    </v-data-table>
</template>
<script>
    export default {
        name: 'Reports',
        data() {
            return {
                customSort: (items, index, isDesc) => console.log("never called"),
                reports: [{ name: "a", requested: "2020-01-01T00:00:00Z" }.{ name: "b", requested: "2020-02-02T00:00:00" }],
                pagination: { sortBy: 'requested', descending: true, rowsPerPage: 10 }
            }
        },
        computed: {
            headers() {
                return [
                    { text: "Name", value: "name" },
                    { text: "Report Type", value: "report_type" },
                    { text: "Requested", value: "requested", sort: (a, b) => a.localeCompare(b) },
                ];
            },
        }
    }
</script>

Upvotes: 2

Related Questions