@vaadin/grid 23.0.6 → 23.1.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/grid",
-  "version": "23.0.6",
+  "version": "23.1.0-alpha3",
   "publishConfig": {
     "access": "public"
   },
@@ -41,19 +41,19 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/checkbox": "^23.0.6",
-    "@vaadin/component-base": "^23.0.6",
-    "@vaadin/text-field": "^23.0.6",
-    "@vaadin/vaadin-lumo-styles": "^23.0.6",
-    "@vaadin/vaadin-material-styles": "^23.0.6",
-    "@vaadin/vaadin-themable-mixin": "^23.0.6"
+    "@vaadin/checkbox": "23.1.0-alpha3",
+    "@vaadin/component-base": "23.1.0-alpha3",
+    "@vaadin/text-field": "23.1.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.0.6",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
     "lit": "^2.0.0",
-    "sinon": "^9.2.0"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "82ca8522e24a63343fb28bcb4c686e55d25c8858"
+  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
 }

package/src/vaadin-grid-column-group.js

@@ -88,6 +88,7 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       '_updateVisibleChildColumns(_childColumns)',
       '_childColumnsChanged(_childColumns)',
       '_groupFrozenChanged(frozen, _rootColumns)',
+      '_groupFrozenToEndChanged(frozenToEnd, _rootColumns)',
       '_groupHiddenChanged(hidden, _rootColumns)',
       '_visibleChildColumnsChanged(_visibleChildColumns)',
       '_colSpanChanged(_colSpan, _headerCell, _footerCell)',
@@ -135,6 +136,16 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
       // Don’t unfreeze the frozen group because of a non-frozen child
       this._lastFrozen = this._lastFrozen || value;
     }
+
+    if (path === 'frozenToEnd') {
+      // Don’t unfreeze the frozen group because of a non-frozen child
+      this.frozenToEnd = this.frozenToEnd || value;
+    }
+
+    if (path === 'firstFrozenToEnd') {
+      // Don’t unfreeze the frozen group because of a non-frozen child
+      this._firstFrozenToEnd = this._firstFrozenToEnd || value;
+    }
   }
 
   /** @private */
@@ -239,6 +250,18 @@ class GridColumnGroup extends ColumnBaseMixin(PolymerElement) {
     }
   }
 
+  /** @private */
+  _groupFrozenToEndChanged(frozenToEnd, rootColumns) {
+    if (rootColumns === undefined || frozenToEnd === undefined) {
+      return;
+    }
+
+    // Don’t propagate the default `false` value.
+    if (frozenToEnd !== false) {
+      Array.from(rootColumns).forEach((col) => (col.frozenToEnd = frozenToEnd));
+    }
+  }
+
   /** @private */
   _groupHiddenChanged(hidden, rootColumns) {
     if (rootColumns && !this._preventHiddenCascade) {

package/src/vaadin-grid-column-reordering-mixin.js

@@ -317,7 +317,10 @@ export const ColumnReorderingMixin = (superClass) =>
       if (column1 && column2) {
         const differentColumns = column1 !== column2;
         const sameParent = column1.parentElement === column2.parentElement;
-        const sameFrozen = column1.frozen === column2.frozen;
+        const sameFrozen =
+          (column1.frozen && column2.frozen) || // both columns are frozen
+          (column1.frozenToEnd && column2.frozenToEnd) || // both columns are frozen to end
+          (!column1.frozen && !column1.frozenToEnd && !column2.frozen && !column2.frozenToEnd);
         return differentColumns && sameParent && sameFrozen;
       }
     }
@@ -351,7 +354,7 @@ export const ColumnReorderingMixin = (superClass) =>
       const _order = column1._order;
       column1._order = column2._order;
       column2._order = _order;
-      this._updateLastFrozen();
+      this._updateFrozenColumn();
       this._updateFirstAndLastColumn();
     }
 

package/src/vaadin-grid-column-resizing-mixin.js

@@ -53,6 +53,7 @@ export const ColumnResizingMixin = (superClass) =>
             .pop();
         }
 
+        const eventX = e.detail.x;
         const columnRowCells = Array.from(this.$.header.querySelectorAll('[part~="row"]:last-child [part~="cell"]'));
         const targetCell = columnRowCells.filter((cell) => cell._column === column)[0];
         // Resize the target column
@@ -66,11 +67,19 @@ export const ColumnResizingMixin = (superClass) =>
             parseInt(style.borderRightWidth) +
             parseInt(style.marginLeft) +
             parseInt(style.marginRight);
-          const maxWidth =
-            targetCell.offsetWidth +
-            (this.__isRTL
-              ? targetCell.getBoundingClientRect().left - e.detail.x
-              : e.detail.x - targetCell.getBoundingClientRect().right);
+
+          let maxWidth;
+
+          const cellWidth = targetCell.offsetWidth;
+          const cellRect = targetCell.getBoundingClientRect();
+
+          // For cells frozen to end, resize handle is flipped horizontally.
+          if (targetCell.hasAttribute('frozen-to-end')) {
+            maxWidth = cellWidth + (this.__isRTL ? eventX - cellRect.right : cellRect.left - eventX);
+          } else {
+            maxWidth = cellWidth + (this.__isRTL ? cellRect.left - eventX : eventX - cellRect.right);
+          }
+
           column.width = Math.max(minWidth, maxWidth) + 'px';
           column.flexGrow = 0;
         }
@@ -86,6 +95,18 @@ export const ColumnResizingMixin = (superClass) =>
             }
           });
 
+        const cellFrozenToEnd = this._frozenToEndCells[0];
+
+        // When handle moves below the cell frozen to end, scroll into view.
+        if (cellFrozenToEnd && this.$.table.scrollWidth > this.$.table.offsetWidth) {
+          const frozenRect = cellFrozenToEnd.getBoundingClientRect();
+          const offset = eventX - (this.__isRTL ? frozenRect.right : frozenRect.left);
+
+          if ((this.__isRTL && offset <= 0) || (!this.__isRTL && offset >= 0)) {
+            this.$.table.scrollLeft += offset;
+          }
+        }
+
         if (e.detail.state === 'end') {
           this.$.scroller.toggleAttribute('column-resizing', false);
           this.dispatchEvent(

package/src/vaadin-grid-column.d.ts

@@ -32,6 +32,17 @@ export declare class ColumnBaseMixinClass<TItem> {
    */
   frozen: boolean;
 
+  /**
+   * When true, the column is frozen to end of grid.
+   *
+   * When a column inside of a column group is frozen to end, all of the sibling columns
+   * inside the group will get frozen to end also.
+   *
+   * Column can not be set as `frozen` and `frozenToEnd` at the same time.
+   * @attr {boolean} frozen-to-end
+   */
+  frozenToEnd: boolean;
+
   /**
    * When set to true, the cells for this column are hidden.
    */

package/src/vaadin-grid-column.js

@@ -45,6 +45,21 @@ export const ColumnBaseMixin = (superClass) =>
           value: false
         },
 
+        /**
+         * When true, the column is frozen to end of grid.
+         *
+         * When a column inside of a column group is frozen to end, all of the sibling columns
+         * inside the group will get frozen to end also.
+         *
+         * Column can not be set as `frozen` and `frozenToEnd` at the same time.
+         * @attr {boolean} frozen-to-end
+         * @type {boolean}
+         */
+        frozenToEnd: {
+          type: Boolean,
+          value: false
+        },
+
         /**
          * When set to true, the cells for this column are hidden.
          */
@@ -79,6 +94,15 @@ export const ColumnBaseMixin = (superClass) =>
           value: false
         },
 
+        /**
+         * @type {boolean}
+         * @protected
+         */
+        _firstFrozenToEnd: {
+          type: Boolean,
+          value: false
+        },
+
         /** @protected */
         _order: Number,
 
@@ -176,10 +200,12 @@ export const ColumnBaseMixin = (superClass) =>
       return [
         '_widthChanged(width, _headerCell, _footerCell, _cells.*)',
         '_frozenChanged(frozen, _headerCell, _footerCell, _cells.*)',
+        '_frozenToEndChanged(frozenToEnd, _headerCell, _footerCell, _cells.*)',
         '_flexGrowChanged(flexGrow, _headerCell, _footerCell, _cells.*)',
         '_textAlignChanged(textAlign, _cells.*, _headerCell, _footerCell)',
         '_orderChanged(_order, _headerCell, _footerCell, _cells.*)',
         '_lastFrozenChanged(_lastFrozen)',
+        '_firstFrozenToEndChanged(_firstFrozenToEnd)',
         '_onRendererOrBindingChanged(_renderer, _cells, _cells.*, path)',
         '_onHeaderRendererOrBindingChanged(_headerRenderer, _headerCell, path, header)',
         '_onFooterRendererOrBindingChanged(_footerRenderer, _footerCell)',
@@ -314,6 +340,23 @@ export const ColumnBaseMixin = (superClass) =>
       this._grid && this._grid._frozenCellsChanged && this._grid._frozenCellsChanged();
     }
 
+    /** @private */
+    _frozenToEndChanged(frozenToEnd) {
+      if (this.parentElement && this.parentElement._columnPropChanged) {
+        this.parentElement._columnPropChanged('frozenToEnd', frozenToEnd);
+      }
+
+      this._allCells.forEach((cell) => {
+        // Skip sizer cells to keep correct scrollWidth.
+        if (this._grid && cell.parentElement === this._grid.$.sizer) {
+          return;
+        }
+        cell.toggleAttribute('frozen-to-end', frozenToEnd);
+      });
+
+      this._grid && this._grid._frozenCellsChanged && this._grid._frozenCellsChanged();
+    }
+
     /** @private */
     _lastFrozenChanged(lastFrozen) {
       this._allCells.forEach((cell) => cell.toggleAttribute('last-frozen', lastFrozen));
@@ -323,6 +366,22 @@ export const ColumnBaseMixin = (superClass) =>
       }
     }
 
+    /** @private */
+    _firstFrozenToEndChanged(firstFrozenToEnd) {
+      this._allCells.forEach((cell) => {
+        // Skip sizer cells to keep correct scrollWidth.
+        if (this._grid && cell.parentElement === this._grid.$.sizer) {
+          return;
+        }
+
+        cell.toggleAttribute('first-frozen-to-end', firstFrozenToEnd);
+      });
+
+      if (this.parentElement && this.parentElement._columnPropChanged) {
+        this.parentElement._firstFrozenToEnd = firstFrozenToEnd;
+      }
+    }
+
     /**
      * @param {string} path
      * @return {string}
@@ -421,7 +480,7 @@ export const ColumnBaseMixin = (superClass) =>
           }
         );
 
-        this._grid._updateLastFrozen && this._grid._updateLastFrozen();
+        this._grid._updateFrozenColumn && this._grid._updateFrozenColumn();
         this._grid._resetKeyboardNavigation && this._grid._resetKeyboardNavigation();
       }
       this._previousHidden = hidden;

package/src/vaadin-grid-keyboard-navigation-mixin.js

@@ -751,6 +751,7 @@ export const KeyboardNavigationMixin = (superClass) =>
     _detectInteracting(e) {
       const isInteracting = e.composedPath().some((el) => el.localName === 'vaadin-grid-cell-content');
       this._setInteracting(isInteracting);
+      this.__updateHorizontalScrollPosition();
     }
 
     /** @private */
@@ -854,7 +855,7 @@ export const KeyboardNavigationMixin = (superClass) =>
      * @protected
      */
     _scrollHorizontallyToCell(dstCell) {
-      if (dstCell.hasAttribute('frozen') || this.__isDetailsCell(dstCell)) {
+      if (dstCell.hasAttribute('frozen') || dstCell.hasAttribute('frozen-to-end') || this.__isDetailsCell(dstCell)) {
         // These cells are, by design, always visible, no need to scroll.
         return;
       }
@@ -870,7 +871,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         if (cell.hasAttribute('hidden') || this.__isDetailsCell(cell)) {
           continue;
         }
-        if (cell.hasAttribute('frozen')) {
+        if (cell.hasAttribute('frozen') || cell.hasAttribute('frozen-to-end')) {
           leftBoundary = cell.getBoundingClientRect().right;
           break;
         }
@@ -880,7 +881,7 @@ export const KeyboardNavigationMixin = (superClass) =>
         if (cell.hasAttribute('hidden') || this.__isDetailsCell(cell)) {
           continue;
         }
-        if (cell.hasAttribute('frozen')) {
+        if (cell.hasAttribute('frozen') || cell.hasAttribute('frozen-to-end')) {
           rightBoundary = cell.getBoundingClientRect().left;
           break;
         }

package/src/vaadin-grid-scroll-mixin.js

@@ -5,6 +5,7 @@
  */
 import { animationFrame, microTask, timeOut } from '@vaadin/component-base/src/async.js';
 import { Debouncer } from '@vaadin/component-base/src/debounce.js';
+import { ResizeMixin } from '@vaadin/component-base/src/resize-mixin.js';
 
 const timeouts = {
   SCROLLING: 500
@@ -14,7 +15,7 @@ const timeouts = {
  * @polymerMixin
  */
 export const ScrollMixin = (superClass) =>
-  class ScrollMixin extends superClass {
+  class ScrollMixin extends ResizeMixin(superClass) {
     static get properties() {
       return {
         /**
@@ -26,6 +27,15 @@ export const ScrollMixin = (superClass) =>
           value: () => []
         },
 
+        /**
+         * Cached array of cells frozen to end
+         * @private
+         */
+        _frozenToEndCells: {
+          type: Array,
+          value: () => []
+        },
+
         /** @private */
         _rowWithFocusedElement: Element
       };
@@ -67,6 +77,15 @@ export const ScrollMixin = (superClass) =>
       this.$.table.addEventListener('scroll', () => this._afterScroll());
     }
 
+    /**
+     * @protected
+     * @override
+     */
+    _onResize() {
+      this._updateOverflow();
+      this.__updateHorizontalScrollPosition();
+    }
+
     /**
      * Scroll to a specific row index in the virtual list. Note that the row index is
      * not always the same for any particular item. For example, sorting/filtering/expanding
@@ -136,6 +155,22 @@ export const ScrollMixin = (superClass) =>
         overflow += ' top';
       }
 
+      const scrollLeft = this.__getNormalizedScrollLeft(table);
+      if (scrollLeft > 0) {
+        overflow += ' start';
+      }
+
+      if (scrollLeft < table.scrollWidth - table.clientWidth) {
+        overflow += ' end';
+      }
+
+      if (this.__isRTL) {
+        overflow = overflow.replace(/start|end/gi, (matched) => {
+          return matched === 'start' ? 'end' : 'start';
+        });
+      }
+
+      // TODO: Remove "right" and "left" values in the next major.
       if (table.scrollLeft < table.scrollWidth - table.clientWidth) {
         overflow += ' right';
       }
@@ -161,13 +196,14 @@ export const ScrollMixin = (superClass) =>
           cell.style.transform = '';
         });
         this._frozenCells = Array.prototype.slice.call(this.$.table.querySelectorAll('[frozen]'));
+        this._frozenToEndCells = Array.prototype.slice.call(this.$.table.querySelectorAll('[frozen-to-end]'));
         this.__updateHorizontalScrollPosition();
       });
-      this._updateLastFrozen();
+      this._updateFrozenColumn();
     }
 
     /** @protected */
-    _updateLastFrozen() {
+    _updateFrozenColumn() {
       if (!this._columnTree) {
         return;
       }
@@ -176,27 +212,66 @@ export const ScrollMixin = (superClass) =>
       columnsRow.sort((a, b) => {
         return a._order - b._order;
       });
-      const lastFrozen = columnsRow.reduce((prev, col, index) => {
+
+      let lastFrozen;
+      let firstFrozenToEnd;
+
+      // Use for loop to only iterate columns once
+      for (let i = 0; i < columnsRow.length; i++) {
+        const col = columnsRow[i];
+
         col._lastFrozen = false;
-        return col.frozen && !col.hidden ? index : prev;
-      }, undefined);
+        col._firstFrozenToEnd = false;
+
+        if (firstFrozenToEnd === undefined && col.frozenToEnd && !col.hidden) {
+          firstFrozenToEnd = i;
+        }
+
+        if (col.frozen && !col.hidden) {
+          lastFrozen = i;
+        }
+      }
+
       if (lastFrozen !== undefined) {
         columnsRow[lastFrozen]._lastFrozen = true;
       }
+
+      if (firstFrozenToEnd !== undefined) {
+        columnsRow[firstFrozenToEnd]._firstFrozenToEnd = true;
+      }
     }
 
     /** @private */
     __updateHorizontalScrollPosition() {
-      this.$.table.style.setProperty('--_grid-horizontal-scroll-position', -this._scrollLeft + 'px');
+      const scrollWidth = this.$.table.scrollWidth;
+      const clientWidth = this.$.table.clientWidth;
+      const scrollLeft = Math.max(0, this.$.table.scrollLeft);
+      const normalizedScrollLeft = this.__getNormalizedScrollLeft(this.$.table);
 
-      if (this.__isRTL) {
-        // Translating the sticky sections using a CSS variable works nicely on LTR.
-        // On RTL, it causes jumpy behavior (on Desktop Safari) so we need to translate manually.
-        const x = this.__getNormalizedScrollLeft(this.$.table) + this.$.table.clientWidth - this.$.table.scrollWidth;
-        const transform = `translate(${x}px, 0)`;
-        for (let i = 0; i < this._frozenCells.length; i++) {
-          this._frozenCells[i].style.transform = transform;
-        }
+      // Position header, footer and items container
+      const transform = `translate(${-scrollLeft}px, 0)`;
+      this.$.header.style.transform = transform;
+      this.$.footer.style.transform = transform;
+      this.$.items.style.transform = transform;
+
+      // Position frozen cells
+      const x = this.__isRTL ? normalizedScrollLeft + clientWidth - scrollWidth : scrollLeft;
+      const transformFrozen = `translate(${x}px, 0)`;
+      for (let i = 0; i < this._frozenCells.length; i++) {
+        this._frozenCells[i].style.transform = transformFrozen;
+      }
+
+      // Position cells frozen to end
+      const remaining = this.__isRTL ? normalizedScrollLeft : scrollLeft + clientWidth - scrollWidth;
+      const transformFrozenToEnd = `translate(${remaining}px, 0)`;
+      for (let i = 0; i < this._frozenToEndCells.length; i++) {
+        this._frozenToEndCells[i].style.transform = transformFrozenToEnd;
+      }
+
+      // Only update the --_grid-horizontal-scroll-position custom property when navigating
+      // on row focus mode to avoid performance issues.
+      if (this.hasAttribute('navigating') && this.__rowFocusMode) {
+        this.$.table.style.setProperty('--_grid-horizontal-scroll-position', -x + 'px');
       }
     }
   };

package/src/vaadin-grid-styles.js

@@ -74,7 +74,6 @@ registerStyles(
 
     #header,
     #footer {
-      transform: translateX(var(--_grid-horizontal-scroll-position));
       display: block;
       position: -webkit-sticky;
       position: sticky;
@@ -102,7 +101,6 @@ registerStyles(
     }
 
     #items {
-      transform: translateX(var(--_grid-horizontal-scroll-position));
       flex-grow: 1;
       flex-shrink: 0;
       display: block;
@@ -164,9 +162,9 @@ registerStyles(
       display: none !important;
     }
 
-    [frozen] {
+    [frozen],
+    [frozen-to-end] {
       z-index: 2;
-      transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));
       will-change: transform;
     }
 
@@ -224,6 +222,26 @@ registerStyles(
       right: 0;
     }
 
+    [frozen-to-end] [part~='resize-handle'] {
+      left: 0;
+      right: auto;
+    }
+
+    [frozen-to-end] [part~='resize-handle']::before {
+      left: 0;
+      right: auto;
+    }
+
+    [first-frozen-to-end] [part~='resize-handle']::before {
+      width: 18px;
+      transform: none;
+    }
+
+    /* Hide resize handle if scrolled to end */
+    :host(:not([overflow~='end'])) [first-frozen-to-end] [part~='resize-handle'] {
+      display: none;
+    }
+
     #scroller[column-resizing] {
       -ms-user-select: none;
       -moz-user-select: none;
@@ -267,10 +285,6 @@ registerStyles(
 
     /* RTL specific styles */
 
-    :host([dir='rtl']) *:is(#items, #header, #footer, [frozen]) {
-      transform: none;
-    }
-
     :host([dir='rtl']) #items,
     :host([dir='rtl']) #header,
     :host([dir='rtl']) #footer {
@@ -296,6 +310,16 @@ registerStyles(
       left: 0;
       right: auto;
     }
+
+    :host([dir='rtl']) [frozen-to-end] [part~='resize-handle'] {
+      right: 0;
+      left: auto;
+    }
+
+    :host([dir='rtl']) [frozen-to-end] [part~='resize-handle']::before {
+      right: 0;
+      left: auto;
+    }
   `,
   { moduleId: 'vaadin-grid-styles' }
 );

package/src/vaadin-grid.d.ts

@@ -302,7 +302,7 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `loading` | Set when the grid is loading data from data provider | :host
  * `interacting` | Keyboard navigation in interaction mode | :host
  * `navigating` | Keyboard navigation in navigation mode | :host
- * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `left`, `right` | :host
+ * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
  * `reordering` | Set when the grid's columns are being reordered | :host
  * `dragover` | Set when the grid (not a specific row) is dragged over | :host
  * `dragging-rows` : Set when grid rows are dragged  | :host

package/src/vaadin-grid.js

@@ -188,7 +188,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * `loading` | Set when the grid is loading data from data provider | :host
  * `interacting` | Keyboard navigation in interaction mode | :host
  * `navigating` | Keyboard navigation in navigation mode | :host
- * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `left`, `right` | :host
+ * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
  * `reordering` | Set when the grid's columns are being reordered | :host
  * `dragover` | Set when the grid (not a specific row) is dragged over | :host
  * `dragging-rows` : Set when grid rows are dragged  | :host
@@ -940,6 +940,7 @@ class Grid extends ElementMixin(
   _resizeHandler() {
     this._updateDetailsCellHeights();
     this.__updateFooterPositioning();
+    this.__updateHorizontalScrollPosition();
   }
 
   /** @private */

package/theme/lumo/vaadin-grid-styles.js

@@ -299,10 +299,18 @@ registerStyles(
       overflow: hidden;
     }
 
-    :host([overflow~='left']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+    :host([overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
       border-right-color: var(--_lumo-grid-border-color);
     }
 
+    [first-frozen-to-end] {
+      border-left: var(--_lumo-grid-border-width) solid transparent;
+    }
+
+    :host([overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
+      border-left-color: var(--_lumo-grid-border-color);
+    }
+
     /* Row stripes */
 
     :host([theme~='row-stripes']) [part~='row']:not([odd]) [part~='body-cell'],
@@ -372,9 +380,18 @@ registerStyles(
       border-left: var(--_lumo-grid-border-width) solid transparent;
     }
 
-    :host([dir='rtl'][overflow~='right']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+    :host([dir='rtl']) [first-frozen-to-end] {
+      border-left: none;
+      border-right: var(--_lumo-grid-border-width) solid transparent;
+    }
+
+    :host([dir='rtl'][overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
       border-left-color: var(--_lumo-grid-border-color);
     }
+
+    :host([dir='rtl'][overflow~='end']) [part~='cell'][first-frozen-to-end]:not([part~='details-cell']) {
+      border-right-color: var(--_lumo-grid-border-color);
+    }
   `,
   { moduleId: 'lumo-grid' }
 );

package/theme/material/vaadin-grid-styles.js

@@ -114,6 +114,10 @@ registerStyles(
       border-right: 1px solid var(--material-divider-color);
     }
 
+    [part~='cell'][first-frozen-to-end] {
+      border-left: 1px solid var(--material-divider-color);
+    }
+
     /* Column resizing */
 
     [part~='cell']:not([last-frozen]) [part='resize-handle'] {
@@ -248,6 +252,11 @@ registerStyles(
       border-left: 1px solid var(--material-divider-color);
     }
 
+    :host([dir='rtl']) [part~='cell'][first-frozen-to-end] {
+      border-left: none;
+      border-right: 1px solid var(--material-divider-color);
+    }
+
     :host([dir='rtl']) [part~='cell']:not([last-frozen]) [part='resize-handle'] {
       border-right: none;
       border-left: 1px solid var(--material-divider-color);