Primeng
De Banane Atomic
Aller à la navigationAller à la recherche
Liens
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"
],
|
