DataTable reorder data automatically in Vuetify v0.12

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.

Not sure what you are attempting in the header template. I have copied a bunch of this into a codepen and it seems to be working when based off a vueitfy example. codepen.io/anon/pen/MQZezm. When adding your specific code it shows you are using a prop that is not defined in item, it doesn't seem the template for headers has item available like the other templates. — Martin Calvert

t-MURO t-MURO · Accepted Answer · 2018-11-29T01:44:43

You can just use the disable-initial-sort directive.

<v-data-table disable-initial-sort ... >

DataTable reorder data automatically in Vuetify v0.12

1 Answers