feat(VPagination, VDataTableFooter): ability to hide last page

[userquin]

Description

Sometimes we don't know the last page.

• extend the existing show-first-last-page prop to enable showing only first page button without the last page button
• adds show-first-last-page to VDataTable

Markup:

Playground

<template>
  <v-app>
    <div>
      <v-text-field v-model="search" label="Search" variant="outlined" />
    </div>

    <h1>header rowspan/colspan</h1>
    <v-data-table
      :headers="complex"
      :items="items"
      show-first-last-page="only-first"
    >
      <template #header.header>
        foo
      </template>
    </v-data-table>
  </v-app>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  const serverItems = Array(1000).fill(0).map((_, i) => ({ id: i, name: `Name ${i}`, one: i, two: Math.random() > 0.5 ? 'foo' : 'bar', three: Math.random() > 0.5 ? 'hello' : 'world', four: i }))

  const items = Array(20).fill(0).map((_, i) => ({ id: i, name: `Name ${i}`, one: i, two: Math.random() > 0.5 ? 'foo' : 'bar', three: Math.random() > 0.5 ? 'hello' : 'world', four: i }))

  const groupItems = [
    { id: 1, name: 'Name 1', two: 'foo', three: 'hello' },
    { id: 2, name: 'Name 2', two: 'foo', three: 'world' },
    { id: 3, name: 'Name 3', two: 'foo', three: 'hello' },
    { id: 4, name: 'Name 4', two: 'bar', three: 'world' },
    { id: 5, name: 'Name 5', two: 'bar', three: 'world' },
    { id: 6, name: 'Name 6', two: 'bar', three: 'hello' },
  ]

  const srcs = {
    1: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
    2: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
    3: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
    4: 'https://cdn.vuetifyjs.com/images/lists/4.jpg',
    5: 'https://cdn.vuetifyjs.com/images/lists/5.jpg',
  }

  export default defineComponent({
    data: () => ({
      people: [
        { name: 'Sandra Adams', group: 'Group 1', avatar: srcs[1] },
        { name: 'Ali Connors', group: 'Group 1', avatar: srcs[2] },
        { name: 'Trevor Hansen', group: 'Group 1', avatar: srcs[3] },
        { name: 'Tucker Smith', group: 'Group 1', avatar: srcs[2] },
        { name: 'Britta Holt', group: 'Group 2', avatar: srcs[4] },
        { name: 'Jane Smith ', group: 'Group 2', avatar: srcs[5] },
        { name: 'John Smith', group: 'Group 2', avatar: srcs[1] },
        { name: 'Sandra Williams', group: 'Group 2', avatar: srcs[3] },
      ],
      groupItems,
      serverItems,
      simple: [
        {
          title: 'Name',
          id: 'name',
        },
        {
          title: 'Two',
          id: 'two',
        },
        {
          title: 'Three',
          id: 'three',
        },
        {
          title: 'Four',
          id: 'four',
          align: 'end',
        },
      ],
      test: [
        [
          {
            title: 'Group 1',
            colspan: 1,
            width: 200,
            fixed: true,
          },
          {
            title: 'Group 2',
            colspan: 1,
            fixed: true,
          },
          {
            title: 'Group 3',
            colspan: 2,
          },
        ],
        [
          {
            title: 'A',
            id: 'one',
            fixed: true,
            width: 200,
          },
          {
            title: 'B',
            id: 'two',
            fixed: true,
            width: 200,
          },
          {
            title: 'C',
            id: 'three',
            width: 200,
          },
          {
            title: 'D',
            id: 'four',
            width: 200,
          },
        ],
      ],
      complex: [
        [
          {
            id: 'data-table-select',
            rowspan: 3,
            fixed: true,
            width: 48,
          },
          {
            title: 'Name',
            id: 'name',
            rowspan: 3,
            fixed: true,
            width: 200,
          },
          {
            title: 'Header',
            colspan: 4,
            id: 'header',
          },
        ],
        [
          {
            title: 'Section',
            colspan: 2,
          },
          {
            title: 'Section',
            colspan: 2,
          },
        ],
        [
          {
            title: 'One',
            id: 'one',
            width: 200,
            fixed: true,
          },
          {
            title: 'Two',
            id: 'two',
            width: 200,
          },
          {
            title: 'Three',
            id: 'three',
          },
          {
            title: 'Four',
            id: 'four',
          },
        ],
      ],
      search: '',
      // headers: [
      //   {
      //     id: 'end',
      //     name: 'Two rows',
      //     maxWidth: '2fr',
      //   },
      //   {
      //     id: 'one',
      //     name: 'One',
      //   },
      //   {
      //     id: 'two',
      //     name: 'Two',
      //   },
      // ],
      items,
      remoteItems: serverItems.slice(0, 10),
      timeout: null as any,
      loading: false,
    }),
    methods: {
      getItems ({ startIndex, stopIndex }: any) {
        this.loading = true
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          this.remoteItems = serverItems.slice(startIndex, stopIndex)
          this.loading = false
        }, 1000)
      },
    },
  })
</script>

[J-Sek]

Those data-test=... look like something to replace. If we exclude *.spec.* files, this is the single file that ships with this attribute, while data-testid=... is used in 3 other components.