diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index 85eb36ffeed..bfedbe8a44b 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html @@ -40,8 +40,9 @@ @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) { @@ -59,7 +60,8 @@ @for (prop of propList; track prop.name; let i = $index) { implements OnChanges, AfterViewIn @Input() recordsTotal!: number; @Input() set actionsColumnWidth(width: number) { - this.setColumnWidths(width ? Number(width) : undefined); + this._actionsColumnWidth.set(width ? Number(width) : undefined); } @Input() actionsTemplate?: TemplateRef; @@ -117,14 +120,24 @@ export class ExtensibleTableComponent implements OnChanges, AfterViewIn hasAtLeastOnePermittedAction: boolean; - readonly columnWidths!: number[]; - readonly propList: EntityPropList; readonly actionList: EntityActionList; readonly trackByFn: TrackByFunction> = (_, item) => item.name; + // Signal for actions column width + private readonly _actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH); + + readonly columnWidths = computed(() => { + const actionsColumn = this._actionsColumnWidth(); + const widths = [actionsColumn]; + this.propList.forEach(({ value: prop }) => { + widths.push(prop.columnWidth); + }); + return widths; + }); + constructor() { const extensions = this.#injector.get(ExtensionsService); const name = this.#injector.get(EXTENSIONS_IDENTIFIER); @@ -136,15 +149,6 @@ export class ExtensibleTableComponent implements OnChanges, AfterViewIn this.permissionService.filterItemsByPolicy( this.actionList.toArray().map(action => ({ requiredPolicy: action.permission })), ).length > 0; - this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH); - } - - private setColumnWidths(actionsColumn: number | undefined) { - const widths = [actionsColumn]; - this.propList.forEach(({ value: prop }) => { - widths.push(prop.columnWidth); - }); - (this.columnWidths as any) = widths; } private getIcon(value: boolean) { @@ -212,6 +216,7 @@ export class ExtensibleTableComponent implements OnChanges, AfterViewIn return record; }); + } isVisibleActions(rowData: any): boolean {