feat(VDataTable): support fixed: 'end' columns (#21665)

resolves #20020
resolves #21153

Author: J-Sek

packages/api-generator/src/locale/en/VDataTableHeaders.json

@@ -4,8 +4,9 @@
     "sortAscIcon": "Icon used for ascending sort button.",
     "sortDescIcon": "Icon used for descending sort button.",
     "sticky": "Deprecated, use `fixed-header` instead.",
-    "fixedHeader": "Sticks the header to the top of the table. From the left",
-    "lastFixed": "Sticks the header to the top of the table. From the right.",
+    "fixedHeader": "Sticks the header to the top of the table.",
+    "lastFixed": "**FOR INTERNAL USE ONLY** Applies right border to the last column fixed to the left.",
+    "firstFixedEnd": "**FOR INTERNAL USE ONLY** Applies left border to the first column fixed to the right.",
     "multiSort": "Sort on multiple columns at the same time.",
     "headerProps": "Additional props to be be passed to the default header"
   },

packages/docs/src/data/new-in.json

@@ -62,8 +62,7 @@
   },
   "VDataTable": {
     "props": {
-      "headerProps": "3.5.0",
-      "lastFixed": "3.9.0"
+      "headerProps": "3.5.0"
     }
   },
   "VExpansionPanels": {

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

@@ -77,17 +77,27 @@
                 height: fit-content
 
   .v-data-table-column--fixed,
+  .v-data-table-column--fixed-end,
   .v-data-table__th--sticky
     background: $table-background
     position: sticky !important
     left: 0
     z-index: 1
 
+  .v-data-table-column--fixed-end
+    left: unset
+    right: 0
+
   .v-data-table-column--last-fixed
     border-right: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
 
-  .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr > th.v-data-table-column--fixed
-    z-index: 2
+  .v-data-table-column--first-fixed-end
+    border-left: 1px solid rgba(var(--v-border-color), var(--v-border-opacity))
+
+  .v-data-table.v-table--fixed-header > .v-table__wrapper > table > thead > tr
+    > th.v-data-table-column--fixed,
+    > th.v-data-table-column--fixed-end
+      z-index: 2
 
   .v-data-table-group-header-row
     td

packages/vuetify/src/components/VDataTable/VDataTableColumn.tsx

@@ -9,24 +9,37 @@ export const VDataTableColumn = defineFunctionalComponent({
     type: String as PropType<'start' | 'center' | 'end'>,
     default: 'start',
   },
-  fixed: Boolean,
+  fixed: {
+    type: [Boolean, String] as PropType<boolean | 'start' | 'end'>,
+    default: false,
+  },
   fixedOffset: [Number, String],
+  fixedEndOffset: [Number, String],
   height: [Number, String],
   lastFixed: Boolean,
+  firstFixedEnd: Boolean,
+
   noPadding: Boolean,
   tag: String,
   width: [Number, String],
   maxWidth: [Number, String],
   nowrap: Boolean,
 }, (props, { slots }) => {
   const Tag = props.tag ?? 'td'
+
+  const fixedSide = typeof props.fixed === 'string' ? props.fixed
+    : props.fixed ? 'start'
+    : 'none'
+
   return (
     <Tag
       class={[
         'v-data-table__td',
         {
-          'v-data-table-column--fixed': props.fixed,
+          'v-data-table-column--fixed': fixedSide === 'start',
+          'v-data-table-column--fixed-end': fixedSide === 'end',
           'v-data-table-column--last-fixed': props.lastFixed,
+          'v-data-table-column--first-fixed-end': props.firstFixedEnd,
           'v-data-table-column--no-padding': props.noPadding,
           'v-data-table-column--nowrap': props.nowrap,
         },
@@ -36,7 +49,8 @@ export const VDataTableColumn = defineFunctionalComponent({
         height: convertToUnit(props.height),
         width: convertToUnit(props.width),
         maxWidth: convertToUnit(props.maxWidth),
-        left: convertToUnit(props.fixedOffset || null),
+        left: fixedSide === 'start' ? convertToUnit(props.fixedOffset || null) : undefined,
+        right: fixedSide === 'end' ? convertToUnit(props.fixedEndOffset || null) : undefined,
       }}
     >
       { slots.default?.() }

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

@@ -61,7 +61,6 @@ export const makeVDataTableHeadersProps = propsFactory({
   color: String,
   disableSort: Boolean,
   fixedHeader: Boolean,
-  lastFixed: Boolean,
   multiSort: Boolean,
   sortAscIcon: {
     type: IconValue,
@@ -95,12 +94,16 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
     const { loaderClasses } = useLoader(props)
 
     function getFixedStyles (column: InternalDataTableHeader, y: number): CSSProperties | undefined {
-      if (!(props.sticky || props.fixedHeader) && !(column.fixed || column.lastFixed)) return undefined
+      if (!(props.sticky || props.fixedHeader) && !column.fixed) return undefined
+
+      const fixedSide = typeof column.fixed === 'string' ? column.fixed
+        : column.fixed ? 'start'
+        : 'none'
 
       return {
         position: 'sticky',
-        left: column.fixed || column.lastFixed ? convertToUnit(column.fixedOffset) : undefined,
-        right: column.lastFixed ? convertToUnit(column.fixedOffset ?? 0) : undefined,
+        left: fixedSide === 'start' ? convertToUnit(column.fixedOffset) : undefined,
+        right: fixedSide === 'end' ? convertToUnit(column.fixedEndOffset) : undefined,
         top: (props.sticky || props.fixedHeader) ? `calc(var(--v-table-header-height) * ${y})` : undefined,
       }
     }
@@ -169,6 +172,7 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
           fixed={ column.fixed }
           nowrap={ column.nowrap }
           lastFixed={ column.lastFixed }
+          firstFixedEnd={ column.firstFixedEnd }
           noPadding={ noPadding }
           tabindex={ column.sortable ? 0 : undefined }
           onClick={ column.sortable ? () => toggleSort(column) : undefined }

packages/vuetify/src/components/VDataTable/VDataTableRow.tsx

@@ -130,7 +130,9 @@ export const VDataTableRow = genericComponent<new <T>(
               }}
               fixed={ column.fixed }
               fixedOffset={ column.fixedOffset }
+              fixedEndOffset={ column.fixedEndOffset }
               lastFixed={ column.lastFixed }
+              firstFixedEnd={ column.firstFixedEnd }
               maxWidth={ !mobile.value ? column.maxWidth : undefined }
               noPadding={ column.key === 'data-table-select' || column.key === 'data-table-expand' }
               nowrap={ column.nowrap }

packages/vuetify/src/components/VDataTable/composables/headers.ts

@@ -100,21 +100,37 @@ function getDepth (item: InternalDataTableHeader, depth = 0): number {
 
 function parseFixedColumns (items: InternalDataTableHeader[]) {
   let seenFixed = false
-  function setFixed (item: InternalDataTableHeader, parentFixed = false) {
+
+  function setFixed (
+    item: InternalDataTableHeader,
+    side: 'start' | 'end',
+    parentFixedSide: 'start' | 'end' | 'none' = 'none'
+  ) {
     if (!item) return
 
-    if (parentFixed) {
-      item.fixed = true
+    if (parentFixedSide !== 'none') {
+      item.fixed = parentFixedSide
     }
 
-    if (item.fixed) {
-      if (item.children) {
-        for (let i = item.children.length - 1; i >= 0; i--) {
-          setFixed(item.children[i], true)
+    // normalize to simplify logic below
+    if (item.fixed === true) {
+      item.fixed = 'start'
+    }
+
+    const orderedChildren = side === 'start'
+      ? item.children?.toReversed()
+      : item.children
+
+    if (item.fixed === side) {
+      if (orderedChildren) {
+        for (const child of orderedChildren) {
+          setFixed(child, side, side)
         }
       } else {
-        if (!seenFixed) {
+        if (!seenFixed && side === 'start') {
           item.lastFixed = true
+        } else if (!seenFixed && side === 'end') {
+          item.firstFixedEnd = true
         } else if (isNaN(Number(item.width))) {
           consoleError(`Multiple fixed columns should have a static width (key: ${item.key})`)
         } else {
@@ -123,40 +139,65 @@ function parseFixedColumns (items: InternalDataTableHeader[]) {
         seenFixed = true
       }
     } else {
-      if (item.children) {
-        for (let i = item.children.length - 1; i >= 0; i--) {
-          setFixed(item.children[i])
+      if (orderedChildren) {
+        for (const child of orderedChildren) {
+          setFixed(child, side)
         }
       } else {
         seenFixed = false
       }
     }
   }
 
-  for (let i = items.length - 1; i >= 0; i--) {
-    setFixed(items[i])
+  for (const item of items.toReversed()) {
+    setFixed(item, 'start')
   }
 
-  function setFixedOffset (item: InternalDataTableHeader, fixedOffset = 0) {
-    if (!item) return fixedOffset
+  for (const item of items) {
+    setFixed(item, 'end')
+  }
+
+  function setFixedOffset (item: InternalDataTableHeader, offset = 0) {
+    if (!item) return offset
 
     if (item.children) {
-      item.fixedOffset = fixedOffset
+      item.fixedOffset = offset
       for (const child of item.children) {
-        fixedOffset = setFixedOffset(child, fixedOffset)
+        offset = setFixedOffset(child, offset)
       }
-    } else if (item.fixed) {
-      item.fixedOffset = fixedOffset
-      fixedOffset += parseFloat(item.width || '0') || 0
+    } else if (item.fixed && item.fixed !== 'end') {
+      item.fixedOffset = offset
+      offset += parseFloat(item.width || '0') || 0
     }
 
-    return fixedOffset
+    return offset
   }
 
   let fixedOffset = 0
   for (const item of items) {
     fixedOffset = setFixedOffset(item, fixedOffset)
   }
+
+  function setFixedEndOffset (item: InternalDataTableHeader, offset = 0) {
+    if (!item) return offset
+
+    if (item.children) {
+      item.fixedEndOffset = offset
+      for (const child of item.children) {
+        offset = setFixedEndOffset(child, offset)
+      }
+    } else if (item.fixed === 'end') {
+      item.fixedEndOffset = offset
+      offset += parseFloat(item.width || '0') || 0
+    }
+
+    return offset
+  }
+
+  let fixedEndOffset = 0
+  for (const item of items.toReversed()) {
+    fixedEndOffset = setFixedEndOffset(item, fixedEndOffset)
+  }
 }
 
 function parse (items: InternalDataTableHeader[], maxDepth: number) {

packages/vuetify/src/components/VDataTable/types.ts

@@ -12,7 +12,7 @@ export type DataTableHeader<T = Record<string, any>> = {
   value?: SelectItemKey<T>
   title?: string
 
-  fixed?: boolean
+  fixed?: boolean | 'start' | 'end'
   align?: 'start' | 'end' | 'center'
 
   width?: number | string
@@ -36,7 +36,9 @@ export type InternalDataTableHeader = Omit<DataTableHeader, 'key' | 'value' | 'c
   value: SelectItemKey | null
   sortable: boolean
   fixedOffset?: number
+  fixedEndOffset?: number
   lastFixed?: boolean
+  firstFixedEnd?: boolean
   nowrap?: boolean
   colspan?: number
   rowspan?: number