Primeng database numeric edition

Question

NOTE: I'm using primeng 4.3.0

I've an Array<AlignedQuote> where AlignedQuote is:

interface AlignedQuote {
    hour: number;
    day: number;
    month: number;
    year: number;
}

My current related html code is:

<p-dataTable [value]="quotes" [editable]="true">
  <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"
    [editable]="col.editable">
  </p-column>
</p-dataTable>

Where my cols is:

this.cols = [
  { field: "hour",  header: 'Hora', editable: true  },
  { field: "day",   header: 'Día',  editable: true  },
  { field: "month", header: 'Mes',  editable: true  },
  { field: "year",  header: 'Any',  editable: true  }
];

The problem is that I'm able to type string values on each cell editor, and I need to only able to type number values:

Is it able to constraint it?

It would be nice to wrap each cell edition using an specific numeric cell editor.

NOTE: I'm using primeng 4.3.0

Dino · Answer 1 · 2019-08-22T14:50:58.610

There is a custom editor template which you can use.

<p-dataTable [value]="quotes" [editable]="true">
      <p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header" [editable]="true">
         <ng-template let-item="rowData" pTemplate="editor">
            <input [(ngModel)]="item[col.field]" type="number">
         </ng-template>
      </p-column>
</p-dataTable>

This will allow only number inputs. As you can see it can be easily customized. You can put any content within <ng-template let-item="rowData" pTemplate="editor">

Stackblitz

More examples: PrimeNG Editable DataTables

Primeng database numeric edition

1 Answers1