@muraai/mnl-form 0.0.1-alpha-70e67fe → 0.0.1-alpha-6687844

package/fesm2022/muraai-mnl-form.mjs

@@ -838,61 +838,126 @@ class FormlyFieldTableComponent extends FieldArrayType {
         this.displayedColumns = [];
         this.columnsToDisplay = [];
         this.data = new MatTableDataSource([]);
+        this.columnConfigs = [];
+        this.enableSort = true;
+        this.enablePaginator = true;
     }
     ngAfterViewInit() {
-        this.data.paginator = this.paginator;
-        this.data.sort = this.sort;
+        if (this.enablePaginator) {
+            this.data.paginator = this.paginator;
+        }
+        if (this.enableSort) {
+            this.data.sort = this.sort;
+        }
     }
     ngOnInit() {
-        this.data = new MatTableDataSource(this.field.props['gridOptions']?.data);
-        this.displayedColumns = this.field.props['gridOptions']?.columnDefs;
+        const gridOptions = this.field.props?.['gridOptions'] || {};
+        this.enableSort = gridOptions.enableSort !== undefined ? gridOptions.enableSort : true;
+        this.enablePaginator = gridOptions.enablePaginator !== undefined ? gridOptions.enablePaginator : true;
+        const cols = gridOptions.columnDefs || [];
+        this.columnConfigs = cols.map((col) => {
+            if (typeof col === 'string') {
+                return { field: col, headerName: col };
+            }
+            return col;
+        });
+        this.displayedColumns = this.columnConfigs.map(c => c.field);
         this.columnsToDisplay = this.displayedColumns.slice();
+        this.data.data = gridOptions.data || [];
+    }
+    onButtonClick(action, row) {
+        if (action.onClick && typeof action.onClick === 'function') {
+            action.onClick(row);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: FormlyFieldTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.4", type: FormlyFieldTableComponent, isStandalone: true, selector: "mu-table", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        
-        <table mat-table [dataSource]="data" matSort class="mat-elevation-z8">
-        @for (column of displayedColumns; track column) {
-            <ng-container [matColumnDef]="column">
-            <th mat-header-cell mat-sort-header *matHeaderCellDef> {{column}} </th>
-            <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
-            </ng-container>
-        }
+    <table mat-table [dataSource]="data" matSort class="mat-elevation-z8 mu-table">
+      @for (column of columnConfigs; track column.field) {
+        <ng-container [matColumnDef]="column.field">
+          <th mat-header-cell *matHeaderCellDef 
+              [mat-sort-header]="enableSort ? column.field : null" 
+              [disabled]="!enableSort"
+              [style.width]="column.width || '150px'"> 
+            {{ column.headerName || column.field }} 
+          </th>
+          <td mat-cell *matCellDef="let element" 
+              [matTooltip]="column.type !== 'actions' && column.type !== 'button' ? element[column.field] : ''"
+              [style.width]="column.width || '150px'">
+            @if (column.type === 'actions') {
+              <div class="flex gap-2">
+                @for (btn of column.actions; track btn.icon) {
+                  <button mat-icon-button 
+                          (click)="onButtonClick(btn, element)" 
+                          [matTooltip]="btn.tooltip || ''">
+                    <mat-icon>{{ btn.icon }}</mat-icon>
+                  </button>
+                }
+              </div>
+            } @else {
+              {{ element[column.field] }}
+            }
+          </td>
+        </ng-container>
+      }
 
-        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
-        <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
-        </table>
-        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: FormlyMaterialModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+      <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
+    </table>
+    @if (enablePaginator) {
+      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of items"></mat-paginator>
+    }
+  `, isInline: true, styles: [".mu-table{width:100%;table-layout:fixed}.mu-table th.mat-mdc-header-cell{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mu-table td.mat-mdc-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mu-table th.mat-header-cell ::ng-deep .mat-sort-header-button{font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: FormlyMaterialModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.4", ngImport: i0, type: FormlyFieldTableComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'mu-table',
-                    standalone: true,
-                    imports: [
+            args: [{ selector: 'mu-table', standalone: true, imports: [
+                        CommonModule,
                         MatTableModule,
                         FormlyMaterialModule,
                         FormlyModule,
                         MatSortModule,
-                        MatPaginatorModule
-                    ],
-                    template: `
-        
-        <table mat-table [dataSource]="data" matSort class="mat-elevation-z8">
-        @for (column of displayedColumns; track column) {
-            <ng-container [matColumnDef]="column">
-            <th mat-header-cell mat-sort-header *matHeaderCellDef> {{column}} </th>
-            <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
-            </ng-container>
-        }
+                        MatPaginatorModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatTooltipModule
+                    ], template: `
+    <table mat-table [dataSource]="data" matSort class="mat-elevation-z8 mu-table">
+      @for (column of columnConfigs; track column.field) {
+        <ng-container [matColumnDef]="column.field">
+          <th mat-header-cell *matHeaderCellDef 
+              [mat-sort-header]="enableSort ? column.field : null" 
+              [disabled]="!enableSort"
+              [style.width]="column.width || '150px'"> 
+            {{ column.headerName || column.field }} 
+          </th>
+          <td mat-cell *matCellDef="let element" 
+              [matTooltip]="column.type !== 'actions' && column.type !== 'button' ? element[column.field] : ''"
+              [style.width]="column.width || '150px'">
+            @if (column.type === 'actions') {
+              <div class="flex gap-2">
+                @for (btn of column.actions; track btn.icon) {
+                  <button mat-icon-button 
+                          (click)="onButtonClick(btn, element)" 
+                          [matTooltip]="btn.tooltip || ''">
+                    <mat-icon>{{ btn.icon }}</mat-icon>
+                  </button>
+                }
+              </div>
+            } @else {
+              {{ element[column.field] }}
+            }
+          </td>
+        </ng-container>
+      }
 
-        <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
-        <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
-        </table>
-        <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of users"></mat-paginator>
-    `
-                }]
+      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+      <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
+    </table>
+    @if (enablePaginator) {
+      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page of items"></mat-paginator>
+    }
+  `, styles: [".mu-table{width:100%;table-layout:fixed}.mu-table th.mat-mdc-header-cell{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mu-table td.mat-mdc-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mu-table th.mat-header-cell ::ng-deep .mat-sort-header-button{font-weight:600}\n"] }]
         }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]