I'm using primeng table.Each table has its own columns. Example of a table:
annexOneTable: any[] = [
{ name: 'N0.', field: 'declarationOrder', width: '2rem' },
//other fields
];
isDateField(value: any, fieldName: string): boolean {
//return true when date otherwise false
}
isNumberField(value: any, fieldName: string): boolean {
//return true when numberotherwise false
}
trackRecord(index: number, record: any) {
return record.id;
}
formatValue(value: any, fieldName: string): string {
//return the wanted format as string for specific fields
}
<p-table
[value]="declarationList"
styleClass="p-datatable-gridlines"
[tableStyle]="{ 'min-width': '50rem' }"
[columns]="[tableColumns]" //which is dynamic
#dt2
[rowTrackBy]="trackRecord"
>
<ng-template pTemplate="header">
<tr>
<ng-container *ngFor="let col of tableColumns">
<th [style.width]="col.width">
{{ t(col.name) }}
</th>
</ng-container>
</tr>
</ng-template>
<ng-template
pTemplate="body"
let-line
let-rowIndex="rowIndex"
>
<tr>
<ng-container *ngFor="let col of tableColumns">
<td
[style.width]="col.width"
[pEditableColumn]="col.field"
>
<ng-container
*ngIf="
isNumberField(
line[col.field],
col.field
);
else nonEditable
"
>
<p-cellEditor>
<ng-template pTemplate="input">
<ng-container
*ngIf="
isDateField(
line[col.field],
col.field
);
else textInput
"
>
<p-calendar
[(ngModel)]="
line[col.field]
"
dateFormat="yy-mm-dd"
class="p-inputtext-sm"
style="width: 100%"
></p-calendar>
</ng-container>
<ng-template #textInput>
<input
pInputText
[(ngModel)]="
line[col.field]
"
class="p-inputtext-sm"
pKeyFilter="num"
[style.font-size]="
'0.75rem'
"
[style.font-weight]="
'500'
"
style="float: right"
/>
</ng-template>
</ng-template>
<ng-template pTemplate="output">
<span
[ngStyle]="{
'font-size': '0.75rem',
'font-weight': '500',
float: isNumeric(
line[col.field]
)
? 'right'
: 'none'
}"
>
{{
formatValue(
line[col.field],
col.field
)
}}
</span>
</ng-template>
</p-cellEditor>
</ng-container>
<ng-template #nonEditable>
<span
[ngStyle]="{
'font-size': '0.75rem',
'font-weight': '500',
float: isNumeric(
line[col.field]
)
? 'right'
: 'none'
}"
>
{{
formatValue(
line[col.field],
col.field
)
}}
</span>
</ng-template>
</td>
</ng-container>
</tr>
</ng-template>
</p-table>
Every thing works fine until I select a cell of type number to edit, when typing any symbol I lose focus on input and that input can't be focused again. No errors in console and after searching I expect problem will be solved by trackBy. But it didn't work for me.
I add a property to my array annexOneTable wich is isEditable of type boolean.
{ name: 'N0.', field: 'declarationOrder', width: '2rem',editable:true }//the added property is editable
And i change the condition in the ng-container that was making the unexpected behaviour.
<ng-container *ngIf="(col.isEditable);else nonEditable">REST OF MY CODE</ng-container>
And it worked for me.