feat(VDataTable): add new lastFixed property (#21153)

[jcjp]

Description

Utilize props lastFixed and make column header fixed on the right.

• Fixes: [Feature Request][VDataTable] Make the last v-table-column fixed #21153

<template>
  <v-app>
    <v-container>
      <v-data-table
        :headers="header"
        :items="items"
        fixed-header
        style="max-width: 300px"
        last-fixed
      >
        <template #item.key5>
          <v-btn>action btn</v-btn>
        </template>
      </v-data-table>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref, computed } from 'vue'

  const items = ref([
    { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 },
    { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 },
    { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 },
    { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 },
    { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 },
    { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 },
    { key1: 1, key2: 2, key3: 3, key4: 4, key5: 5 },
  ])

  const header = computed(() => {
    return [
      {
        title: 'col1',
        key: 'key1',
        sortable: false,
      },
      {
        title: 'col2',
        key: 'key2',
        sortable: false,
        minWidth: '100px',
      },
      {
        title: 'col3',
        key: 'key3',
        sortable: false,
        minWidth: '150px',
      },
      {
        title: 'col4',
        key: 'key4',
        sortable: false,
        minWidth: '100px',
      },
      {
        title: 'col5',
        key: 'key5',
        sortable: false,
        minWidth: '100px',
        fixed: true,
      },
    ]
  })
</script>

[johnleider]

Rebased to dev since this is a true feature.

[KaelWD]

It isn't unused, it adds a border to the last fixed column:

vuetify/packages/vuetify/src/components/VDataTable/VDataTable.sass

Lines 84 to 85 in db9fb77

	.v-data-table-column--last-fixed
	border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))

[Copilot]

Pull Request Overview

This PR introduces a new boolean property, lastFixed, to enable right-fixed column header behavior in VDataTable.

• Adds the lastFixed prop to VDataTableHeaders props.
• Updates the fixed styles logic to account for lastFixed columns by setting proper left/right styles.

Comments suppressed due to low confidence (2)

packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx:98

• [nitpick] The updated condition treats a column with either 'fixed' or 'lastFixed' identically. Verify if a column might inadvertently have both properties set and if their combined effect should be differentiated.

if (!(props.sticky || props.fixedHeader) && !(column.fixed || column.lastFixed)) return undefined

packages/vuetify/src/components/VDataTable/VDataTableHeaders.tsx:103

• Using the same 'fixedOffset' for right-fixed columns may limit flexibility if differing offsets are needed for left versus right positioning. Consider introducing a separate offset for right-fixed columns if applicable.

right: column.lastFixed ? convertToUnit(column.fixedOffset ?? 0) : undefined,

[eesayas]

Is it possible to not change the interface? Like it's still setting fixed: true in the last header not a new prop.

[johnleider]

This needs language in VDataTableHeaders.json, and also newIn.json

[jcjp]

Is it possible to not change the interface? Like it's still setting fixed: true in the last header not a new prop.

I played around with it last time Isias but I could not get it work with the fixed props.

Added entries on the said files John thanks!