30

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>
Improve this question
2
  • Properly formatted code will help us debug your code as it allows others to copy and paste your code more easily. Commented Sep 23, 2017 at 15:12
  • ooo ok tnks :) :) Commented Sep 23, 2017 at 17:45

9 Answers 9

Reset to default
39

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

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

thank you brother.Googled few times but couldnt find according to my satisfaction.Perfectly works fyn :) :) @nick-rucci
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
it seems that index is not there anymore in vuetify 2.0...vuetifyjs.com/en/components/data-tables#api
@titou10 I've updated my answer with the new information that you've shared. Thank you.
@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
|
9

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

Improve this answer

Comments

7

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

Improve this answer

2 Comments

In vuetify 2.3.13 it's {{ items.indexOf(props.item) }}
@PiotrŻak +1) {{ items.indexOf(item) }}
7 
<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:

enter image description here

Improve this answer

1 Comment

Best answer, de structure index from the slotted item.
3

You can use this:

{{props.index}}
Improve this answer

Comments

2

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

Improve this answer

Comments

2

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
]
Improve this answer

Comments

2

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>
Improve this answer

Comments

1

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>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.