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

Co-authored-by: John Leider <[email protected]>

Author: jcjp

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

@@ -4,7 +4,8 @@
     "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.",
+    "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.",
     "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,7 +62,8 @@
   },
   "VDataTable": {
     "props": {
-      "headerProps": "3.5.0"
+      "headerProps": "3.5.0",
+      "lastFixed": "3.9.0"
     }
   },
   "VExpansionPanels": {

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

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