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

[lucasbedout]

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.

[eungkyu]

I can't find this feature anymore. Merged code is not exists in current code.

[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.

[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

[paladin2005]

It's possible sort by multiple columns?

[johnleider]

The issue board is strictly for bugs. Please direct all questions to the official Discord server.

[hughsaunders]

For anyone wondering.. sorting by multiple columns is not supported until #3833 merges.

[jpldev]

@mchugh19 Thanks!

My question: Is it possible to do that but with pagination? (Not hiding actions below the datatable)

[JThinkable]

@jpldev It works fine for me without hide-actions.

[jpldev]

Thanks, it works! @JThinkable

[longrunningprocess]

fwiw, the docs have it too: https://vuetifyjs.com/en/components/data-tables#example-sort