DataTable reorder data automatically in Vuetify v0.12 - vue.js

Question

Project features:
- VueJS
- Vuetify v0.12
I have an Object Json that I get from the backend already ordered, only to show it in a table. However, v-data-table automatically reorders the JSON and does not show the order I want.
This is my code in my component Table:
<v-data-table :headers="headers" :items="items" :loading="loading" class="elevation-1" hide-actions>
<template slot="headers" scope="props">
<span v-if="props.item.value!='actions'">
{{ props.item.text }}
</span>
</template>
<template slot="items" scope="props">
<td>
<span>props.item.value</span>
</td>
<td>
<v-btn floating small class="green darken-2 mt-0" #click.native="onEdit(props.item)">
<v-icon light>edit</v-icon>
</v-btn>
</td>
</template>
</v-data-table>
export default {
props: ['compName', 'headers', 'items', 'pageCount',
'recordCount', 'loading', 'paginationOpts', 'applyFilters',
'onAdd', 'onEdit', 'onDelete', 'getAmountPerClient'],
methods: {
[...]
},
mounted() {
},
data() {
return {
expanded: false,
pagination: {},
gridRowsPerPageItems: process.env.GRIDS_ROWS_PER_PAGE_ITEMS,
collapsibleFields: {},
}
}
}
My items parameter has a value similar to the following::
[
{
"id": "93d22f3b-8af8-4920-a828-121ecc0e8abe",
"name": "Christhian",
"is_default": false,
"description": null,
"reference_code": null
},
{
"id": "167f32c7-0d84-4ec8-b5a4-fffbb42e293f",
"name": "Client 2",
"is_default": false,
"description": null,
"reference_code": null
},
{
"id": "0ee8f89b-aa5f-45f2-8cfd-5acc94171eba",
"name": "Client Test",
"is_default": false,
"description": null,
"reference_code": null
},
{
"id": "06e79101-8808-49d4-8b4e-41ec6120ed18",
"name": "DEFAULT",
"is_default": false,
"description": null,
"reference_code": null
}
]
But in table, this data has been reorded and show in this other order:
[
{
"id": "06e79101-8808-49d4-8b4e-41ec6120ed18",
"name": "DEFAULT",
"is_default": false,
"description": null,
"reference_code": null
},
{
"id": "0ee8f89b-aa5f-45f2-8cfd-5acc94171eba",
"name": "Client Test",
"is_default": false,
"description": null,
"reference_code": null
},
{
"id": "167f32c7-0d84-4ec8-b5a4-fffbb42e293f",
"name": "Client 2",
"is_default": false,
"description": null,
"reference_code": null
},
{
"id": "93d22f3b-8af8-4920-a828-121ecc0e8abe",
"name": "Christhian",
"is_default": false,
"description": null,
"reference_code": null
}
]
I do not know why it is automatically reordered. I do not have a sort method. The sort is done before the data reaches the datatable.

Answer 1

You can just use the disable-initial-sort directive.
<v-data-table disable-initial-sort ... >