How to display the index of an array using the vuetify data table?

Question

I have a response from server which has the array of data passing to my vue instance. I have completed the data table using that array.But all i need to know how can I display the index of my array for serial no.

here i am attaching my component code My response is ok and table is ok too.I just need to increase a column more and display the index value there.

My array name is customers.

<v-data-table
  v-bind:headers="headers"
  v-bind:items="customers"
  v-bind:search="search"
  v-cloak
  >
  <template slot="items" scope="props">
  <td class="text-xs-center">@{{ props.item.id }}</td>
  <td class="text-xs-center">
    <v-edit-dialog
      lazy
      @{{ props.item.name }}
      >
      <v-text-field
        slot="input"
        label="Edit"
        v-model="props.item.name"
        single-line
        counter
        :rules="[max25chars]"
        ></v-text-field>
    </v-edit-dialog>
  </td>
  <td class="text-xs-center">@{{ props.item.email }}</td>
  <td class="text-xs-center">@{{ props.item.email }}</td>
  <td class="text-xs-center">@{{ props.item.created_at }}</td>
  <td class="text-xs-center">
    <v-btn small outline fab class="red--text" @click="showWarning(props.item.id)">
      <v-icon>mdi-account-remove</v-icon>
    </v-btn>
    <v-btn small outline fab class="green--text" @click="showWarning(props.item.id)">
      <v-icon>mdi-account-off</v-icon>
    </v-btn>
  </td>
  </template>
  <template slot="pageText" scope="{ pageStart, pageStop }">
    From @{{ pageStart }} to @{{ pageStop }}
  </template>
</v-data-table>

Solution 1

EDIT 7/30/19 As @titou10 mentioned, there is no index field within Vuetify 2.0.

After looking around for a bit I was able to achieve this by utilizing the item.<name> slot. This slot will return me an item. I created an array of IDs based on the object id and called indexOf(item.id) to get the index position.

Code pen HERE.

---

Vuetify 1.x

Each one of your props object contains two keys: item and index. You can access the index for each item by doing props.index. Adding a new header is as easy as adding a new item to your headers array.

Here is a codepen as an example. I am changing the first column of the data-table to the index position.

https://codepen.io/potatogopher/pen/eGBpVp

Solution 2

Another approach that can be used is using computed properties to insert the index to each element in the data. This can be useful if you need to update the table later on as computed properties are updated automatically.

For example, say the item data is stored in items.

data() {
  return {
    items: [{
      fruit_name: 'Banana',
      calories: 30
    }, {
      fruit_name: 'Apples',
      calories: 40
    }]
  }
}

Here, every element to be itself plus additional attribute, i.e. index. Element addition is achieved using spread operator. All mapped elements are combined into single array using functional-programming style of map function.

computed: {
  itemsWithIndex: () {
    return this.items.map(
      (items, index) => ({
        ...items,
        index: index + 1
      }))
  }
}

Note: index: index+1 will make the numbering start from 1.

Then, inside headers data needed for v-data-table, you can make reference to index item data for numbering.

data() {
  return {
    items: {
      ...
    },
    headers: [{
        text: 'Num',
        value: 'index',
      },
      {
        text: 'Fruit Name',
        value: 'fruit_name',
      },
      {
        text: 'Calories',
        value: 'calories',
      }
    ]
  }
}

Codepen example: https://codepen.io/72ridwan/pen/NWPMxXp

Solution 3

Super simple , Use indexOf {{items.indexOf(props)}}

Solution 4

You can use this:

{{props.index}}

Solution 5

<v-data-table
  :headers="dessertHeaders"
  :items="desserts"
  single-expand
  :expanded.sync="expanded"
  item-key="name"
  show-expand
  class="elevation-1"
>
  <template v-slot:item.sn="{ index }">
    {{ index + 1 }}
  </template>
</v-data-table>

Where sn is the header you want to replace the index with.

Check this screenshot:

View more solutions

Comments

[milo526]

Properly formatted code will help us debug your code as it allows others to copy and paste your code more easily.

[Sakil]

ooo ok tnks :) :)

[Sakil]

thank you brother.Googled few times but couldnt find according to my satisfaction.Perfectly works fyn :) :) @nick-rucci

[tnishada]

When you are using pagination, props.index will provide the item index relative to the current showing page. In such a scenario you need to calculate the correct array index using following method (currentPagenumber -1 )*pageSize + props.index

[titou10]

it seems that index is not there anymore in vuetify 2.0...vuetifyjs.com/en/components/data-tables#api

[Nick Rucci]

@titou10 I've updated my answer with the new information that you've shared. Thank you.

[titou10]

@NickRucci thx for your answer but it looks more like a workaround to me. Too bad they removed this feature in Vuetify v2.x as IMHO getting the index of the row being processed is something that is frequently needed

[Phemieny007]

Thank you for this answer, i was able to solve use this in vue-tables-2 in a situation where my data is an array of objects.

[Piotr Żak]

In vuetify 2.3.13 it's {{ items.indexOf(props.item) }}

[doox911]

@PiotrŻak +1) {{ items.indexOf(item) }}

[Fernando Torres]

It is not a good idea do it as this solution. The fact that you need to map 1 million records until get the right position will be take down the site

[Nick Rucci]

@FernandoTorres Do you have an alternative solution that handles loading 1 million records with the Vuetify 2.0 table?