Max cell size support.

Author: Templarian

src/pg/table/__examples__/basic/basic.ts

@@ -7,7 +7,7 @@ import style from './basic.css';
 import template from './basic.html';
 
 const IconStar = 'M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z';
-    const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
+const IconStarOutline = 'M12,15.39L8.24,17.66L9.23,13.38L5.91,10.5L10.29,10.13L12,6.09L13.71,10.13L18.09,10.5L14.77,13.38L15.76,17.66M22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27L18.18,21L16.54,13.97L22,9.24Z';
 
 @Component({
   selector: 'x-pg-table-basic',
@@ -32,7 +32,7 @@ export default class XPgTableBasic extends HTMLElement {
       label: 'Name',
       key: 'name',
       editable: true,
-      maxWidth: 100,
+      maxWidth: '12rem',
     }, {
       label: 'Age',
       key: 'age'
@@ -49,6 +49,7 @@ export default class XPgTableBasic extends HTMLElement {
         favorite: {
           type: PgTableCellButtonIcon,
           icon: IconStarOutline,
+          value: false,
         }
       }),
       createTableItem({
@@ -58,6 +59,7 @@ export default class XPgTableBasic extends HTMLElement {
         favorite: {
           type: PgTableCellButtonIcon,
           icon: IconStarOutline,
+          value: false,
         }
       })
     ];

src/pg/tableCellText/tableCellText.ts

@@ -14,6 +14,7 @@ export default class PgTableCellText extends HTMLElement {
   @Prop() value: string = '';
   @Prop() key: string = '';
   @Prop() editable: boolean = false;
+  @Prop() maxWidth: number | string | null = null;
 
   @Part() $input: PgInputText;
 
@@ -47,5 +48,15 @@ export default class PgTableCellText extends HTMLElement {
     if (changes.editable) {
       this.$input.readOnly = !this.editable;
     }
+    if (changes.maxWidth) {
+      if (this.maxWidth === null) {
+        this.$input.style.removeProperty('--pg-input-text-max-width');
+      } else {
+        this.$input.style.setProperty(
+          '--pg-input-text-max-width',
+          `${typeof this.maxWidth === 'string' ? this.maxWidth : this.maxWidth + 'px'}`
+        );
+      }
+    }
   }
 }

src/pg/tableRow/tableRow.ts

@@ -36,10 +36,13 @@ export default class PgTableRow extends HTMLElement {
           : types.get(typeof item.value);
       },
       create: ($item: any, item) => {
-        const { editable } = this.columns.find(i => i.key === item.key) ?? {};
+        const { editable, maxWidth } = this.columns.find(i => i.key === item.key) ?? {};
         if (editable) {
           $item.editable = editable;
         }
+        if (maxWidth) {
+          $item.maxWidth = maxWidth;
+        }
         $item.addEventListener('action', (e: any) => {
           e.stopPropagation();
           this.dispatchEvent(new CustomEvent('action', {