Liens

PrimeNG

Table Edit

src/app/app.module.ts

import { InputTextModule } from 'primeng/inputtext';
import { ButtonModule } from 'primeng/button';
import { TableModule } from 'primeng/table';
import { DialogModule } from 'primeng/dialog';

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    InputTextModule,
    ButtonModule,
    TableModule,
    DialogModule,
    FormsModule
  ]
})
export class AppModule { }

<p-table [value]="items" class="table table-striped table-bordered">
    <ng-template pTemplate="header">
        <tr>
            <th>Titre1</th>
            <th>Titre2</th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-item>
        <tr>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input type="text" [(ngModel)]="item.property1">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{ item.property1 }}
                    </ng-template>
                </p-cellEditor>
            </td>
            <td pEditableColumn>
                <p-cellEditor>
                    <ng-template pTemplate="input">
                        <input type="date" [(ngModel)]="item.property2">
                    </ng-template>
                    <ng-template pTemplate="output">
                        {{ item.property2 | date: 'EEEE dd' }}
                    </ng-template>
                </p-cellEditor>
            </td>
        </tr>
    </ng-template>
</p-table>

p-table {
  border: 0;
}
p-table th {
  padding: 12px !important;
}
p-table td {
  padding: 12px;
}

Installation

yarn add primeng primeicons

angular.json

{
  "projects": {
    "ClientApp": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/primeng.min.css"
            ],