Add min-width on the columns

packages/grid/src/vaadin-grid-column-mixin.d.ts

@@ -126,6 +126,15 @@ export declare class GridColumnMixinClass<
    */
   width: string | null | undefined;
 
+  /**
+   * Min-width of the cells for this column.
+   *
+   * Please note that using the `em` length unit is discouraged as
+   * it might lead to misalignment issues if the header, body, and footer
+   * cells have different font sizes. Instead, use `rem` if you need
+   * a length unit relative to the font size.
+   */
+  minWidth: string | null | undefined;
   /**
    * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
    * @attr {number} flex-grow

packages/grid/src/vaadin-grid-column-mixin.js

@@ -268,6 +268,7 @@ export const ColumnBaseMixin = (superClass) =>
     static get observers() {
       return [
         '_widthChanged(width, _headerCell, _footerCell, _cells)',
+        '_minWidthChanged(minWidth, _headerCell, _footerCell, _cells)',
         '_frozenChanged(frozen, _headerCell, _footerCell, _cells)',
         '_frozenToEndChanged(frozenToEnd, _headerCell, _footerCell, _cells)',
         '_flexGrowChanged(flexGrow, _headerCell, _footerCell, _cells)',
@@ -406,6 +407,17 @@ export const ColumnBaseMixin = (superClass) =>
       });
     }
 
+    /** @private */
+    _minWidthChanged(minWidth) {
+      if (this.parentElement && this.parentElement._columnPropChanged) {
+        this.parentElement._columnPropChanged('minWidth');
+      }
+
+      this._allCells.forEach((cell) => {
+        cell.style.minWidth = minWidth;
+      });
+    }
+
     /** @private */
     _frozenChanged(frozen) {
       if (this.parentElement && this.parentElement._columnPropChanged) {
@@ -863,6 +875,18 @@ export const GridColumnMixin = (superClass) =>
           value: '100px',
           sync: true,
         },
+        /**
+         * Min-width of the cells for this column.
+         *
+         * Please note that using the `em` length unit is discouraged as
+         * it might lead to misalignment issues if the header, body, and footer
+         * cells have different font sizes. Instead, use `rem` if you need
+         * a length unit relative to the font size.
+         */
+        minWidth: {
+          type: String,
+          sync: true,
+        },
 
         /**
          * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.

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

@@ -77,8 +77,12 @@ export const ColumnResizingMixin = (superClass) =>
           } else {
             maxWidth = cellWidth + (isRTL ? cellRect.left - eventX : eventX - cellRect.right);
           }
-
-          column.width = `${Math.max(minWidth, maxWidth)}px`;
+          const calculatedWidth = Math.max(minWidth, maxWidth);
+          if (column.minWidth) {
+            column.width = `max(${column.minWidth}, ${calculatedWidth}px)`;
+          } else {
+            column.width = `${calculatedWidth}px`;
+          }
           column.flexGrow = 0;
         }
         // Fix width and flex-grow for all preceding columns

packages/grid/src/vaadin-grid-mixin.js

@@ -409,7 +409,12 @@ export const GridMixin = (superClass) =>
       this.__calculateAndCacheIntrinsicWidths(cols);
 
       cols.forEach((col) => {
-        col.width = `${this.__getDistributedWidth(col)}px`;
+        const calculatedWidth = this.__getDistributedWidth(col);
+        if (col.minWidth) {
+          col.width = `max(${col.minWidth}, ${calculatedWidth}px)`;
+        } else {
+          col.width = `${calculatedWidth}px`;
+        }
       });
     }
 
@@ -507,6 +512,17 @@ export const GridMixin = (superClass) =>
       } else {
         this._recalculateColumnWidths(cols);
       }
+      // update the columns without autowidth and set the min width
+      const noAutoWidthCols = this._getColumns().filter((col) => !col.hidden && !col.autoWidth);
+
+      noAutoWidthCols.forEach((col) => {
+        const calculatedWidth = col.width;
+        if (col.minWidth) {
+          col.width = `max(${col.minWidth}, ${calculatedWidth})`;
+        } else {
+          col.width = `${calculatedWidth}`;
+        }
+      });
     }
 
     /** @private */

packages/grid/test/column-min-width-lit.test.ts

@@ -0,0 +1,3 @@
+import '../theme/lumo/lit-all-imports.js';
+import '../src/lit-all-imports.js';
+import './column-min-width.common.js';

packages/grid/test/column-min-width-polymer.test.ts

@@ -0,0 +1,2 @@
+import '../all-imports.js';
+import './column-min-width.common.js';