Datatable - Default sorting (or no sort at all) / manual sorting

It would be nice to be able to sort / keep items in order when loading the data.

Feature

I need to display the datatable sorted DESC using a field (which is the last one in the header list). I can’t find a way to do it (maybe I’m wrong). It’s an issue especially as the API returns everything in order and Vuetify sorts everything using the first column.

I think it’s not a edge case for my project, sorting is really important and at least it would be great to be able to keep the result sorted even if we want to have sortable columns.

Implementation I’m thinking about

Having a default-sort prop in the datatable component using the name property of the header and a direction.

<v-data-table :headers="headers" :items="results" default-sort="somefield:desc"></v-data-table>

or

<v-data-table :headers="headers" :items="results" sort-field="field" sort-desc="true"></v-data-table>

I could probably implement it if you think it’s good.

[mchugh19]

In case it helps anyone else looking for default sorting in a data table:

Create a data-table. Use hide-actions to not show the pagination tools at the bottom and bind pagination.sync to an object in your dataset.

<v-data-table
:items="items"
:headers="headers"
v-bind:pagination.sync="pagination"
hide-actions
item-key="items.key"
>

In your data, create a pagination key with a object. To display all rows, use the rowsPerPage value of -1.

pagination = {'sortBy': 'column2', 'descending': true, 'rowsPerPage': -1}

This will sort by column2 ascending and display all items

[nekosaur]

Take a look at example 7 in the docs to see how you could do manual sorting and/or default sorting. You need to use the pagination.sync prop.