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

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

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

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

<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:

You can use this:

{{props.index}}

Thanks to this sandbox, I was able to show index in each row using the code below:

<v-data-table
  :headers="headers"
  :items="items"
>
  <template slot="item.rank" scope="props">
    {{ props.index + 1 }}
  </template>
</v-data-table>

where the headers section is like this:

headers: [
  { name: 'rank', value: 'rank' },
  // other headers
]

Just need to do this:

    <template #item.serialNo="{item}">
    <td >
    {{ArrayName.indexOf(item) + 1}}
    </td>
    </template>
    

ArrayName: the array we use in ':items' of

serialNo: the value to select the column

Easy peasy :)

<template>
    <v-data-table
          :headers="headers"
          :items="items"
          sort-by="calories"
          hide-default-footer
          class="elevation-1"
    >

        <template v-slot:item.count="{item, index}">
            {{index+1}}
        </template>

    </v-data-table>
</template>

<script>

export default {
    data: () => ({
    headers: [
      {
            text: "#",
            sortable: false,
            value: "count",
          },]
        })
}

</script>

Be careful to handle page 2, 3...

@Hosien's answer worked form me, however I needed to modify the index to handle pagination - on subsequent pages the index was always starting from 0 again.

In your data(), define

  pagination: {
    page: 1,
    itemsPerPage: 15
  }

... add this for your table:

    <v-data-table
      :items="items"
      :headers="headers"
      :page.sync="pagination.page"
      :itemsPerPage.sync="pagination.itemsPerPage">

... and put this in for the index field.

   <!-- remember to populate the count field as per Hosien's example! -->
   <template #[`item.count`]="{ index }">
     {{ (pagination.page - 1) * pagination.itemsPerPage + index + 1}}
   </template>