feat(VDataTable): index prop in item* slots

[jacekkarczmarczyk]

Description

Adds index to item, item.<name>, expanded-item slots

Motivation and Context

fixes #10646

How Has This Been Tested?

playground

Markup:

<template>
  <v-container>
    <h2>#item.&lt;name&gt;</h2>

    <v-data-table
      :headers="tableHeaders"
      :items="tableData"
    >
      <template #item.index="{ index }">
        {{ index }}
      </template>
      <template #item.name="{ item }">
        {{ item.name }}
      </template>
    </v-data-table>

    <h2>#item</h2>

    <v-data-table
      :headers="tableHeaders"
      :items="tableData"
    >
      <template #item="{ index, item }">
        <tr><td>{{ index }}</td><td>{{ item.name }}</td></tr>
      </template>
    </v-data-table>

    <v-data-iterator :items="tableData">
      <template #item="{ index, item }">
        <div>{{ index }}: {{ item.name }}</div>
      </template>
    </v-data-iterator>
  </v-container>
</template>

<script>
  export default {
    data () {
      return {
        tableHeaders: [
          {
            text: 'No',
            sortable: false,
            value: 'index',
          },
          {
            text: 'Name',
            sortable: true,
            value: 'name',
          },
        ],
        tableData: Array(50).fill(null).map((_, index) => ({ name: `Data ${index}` })),
      }
    },
  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[KaelWD]

Is this the index in the table, or the index in items? Index in items would be more useful but conflicts with #8283.

[jacekkarczmarczyk]

in items (look at playground, first page has indices 0-9, next one 10-19)
does it make sense to leave index as index in table and add other prop for index in items?

[KaelWD]

That's a breaking change then, although the current behaviour seems pretty useless so I don't know if it would even affect anyone.

first page has indices 0-9, next one 10-19

Does it account for sorting?

[jacekkarczmarczyk]

Does it account for sorting?

No, I'm not sure if it's even possible (especially with server side data). I think if someone wants to take sorting/filtering into account he should just put index as a property of item

That's a breaking change then

So is "Reset/clear on inputs" already in 2.4, which imho may have bigger impact than this. As I mentioned before it would be safe to add another property (globalIndex?), but I feel like it's not worth it
@vuetifyjs/core-team thoughts?

[KaelWD]

especially with server side data

More so that you can do something like items.splice(index, 1) (#11850, #12122)
You do get item in the slot though so I guess an indexOf isn't that hard.

Looking at #10646 and #8199 it seems like they would want what you've done here, but maybe without the pagination? "select the first item on the table" and "specify tabindex" probably want the index in the page, "a column with row index" could be either really.