<commit_before><div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Edit</span></h1>
        <span>Cell and Row editing provides a rapid and user friendly way to manipulate data.</span>
    </div>
</div>

<div class="content-section implementation p-fluid">
    <p-toast></p-toast>

    <div class="card">
        <h5>Cell Editing</h5>
        <p-table [value]="products1" dataKey="id">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Price</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.code">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.code}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.name" required>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.name}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <p-dropdown [options]="statuses" [(ngModel)]="product.inventoryStatus" [style]="{'width':'100%'}"></p-dropdown>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.inventoryStatus}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.price">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.price | currency: 'USD'}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
    <h5>Row Editing</h5>
        <p-table [value]="products2" dataKey="id" editMode="row">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Price</th>
                    <th style="width:8rem"></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product let-editing="editing" let-ri="rowIndex">
                <tr [pEditableRow]="product">
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.code">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.code}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.name" required>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.name}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <p-dropdown [options]="statuses" [(ngModel)]="product.inventoryStatus" [style]="{'width':'100%'}"></p-dropdown>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.inventoryStatus}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.price">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.price | currency: 'USD'}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td style="text-align:center">
                        <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button>
                        <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
                        <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tableedit-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Cell Editing&lt;/h5&gt;
    &lt;p-table [value]="products1" dataKey="id"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td pEditableColumn&gt;
                    &lt;p-cellEditor&gt;
                        &lt;ng-template pTemplate="input"&gt;
                            &lt;input pInputText type="text" [(ngModel)]="product.code"&gt;
                        &lt;/ng-template&gt;
                        &lt;ng-template pTemplate="output"&gt;
                            &#123;&#123;product.code&#125;&#125;
                        &lt;/ng-template&gt;
                    &lt;/p-cellEditor&gt;
                &lt;/td&gt;
                &lt;td pEditableColumn&gt;
                    &lt;p-cellEditor&gt;
                        &lt;ng-template pTemplate="input"&gt;
                            &lt;input pInputText type="text" [(ngModel)]="product.name" required&gt;
                        &lt;/ng-template&gt;
                        &lt;ng-template pTemplate="output"&gt;
                            &#123;&#123;product.name&#125;&#125;
                        &lt;/ng-template&gt;
                    &lt;/p-cellEditor&gt;
                &lt;/td&gt;
                &lt;td pEditableColumn&gt;
                    &lt;p-cellEditor&gt;
                        &lt;ng-template pTemplate="input"&gt;
                            &lt;p-dropdown [options]="statuses" [(ngModel)]="product.inventoryStatus" [style]="&#123;'width':'100%'&#125;"&gt;&lt;/p-dropdown&gt;
                        &lt;/ng-template&gt;<commit_msg>Replace dropdown with input text<commit_after><div class="content-section introduction">
    <div class="feature-intro">
        <h1>Table <span>Edit</span></h1>
        <span>Cell and Row editing provides a rapid and user friendly way to manipulate data.</span>
    </div>
</div>

<div class="content-section implementation p-fluid">
    <p-toast></p-toast>

    <div class="card">
        <h5>Cell Editing</h5>
        <p-table [value]="products1" dataKey="id">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Price</th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product>
                <tr>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.code">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.code}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.name" required>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.name}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText [(ngModel)]="product.inventoryStatus">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.inventoryStatus}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td pEditableColumn>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.price">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.price | currency: 'USD'}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>

    <div class="card">
    <h5>Row Editing</h5>
        <p-table [value]="products2" dataKey="id" editMode="row">
            <ng-template pTemplate="header">
                <tr>
                    <th>Code</th>
                    <th>Name</th>
                    <th>Category</th>
                    <th>Price</th>
                    <th style="width:8rem"></th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-product let-editing="editing" let-ri="rowIndex">
                <tr [pEditableRow]="product">
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.code">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.code}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.name" required>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.name}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <p-dropdown [options]="statuses" [(ngModel)]="product.inventoryStatus" [style]="{'width':'100%'}"></p-dropdown>
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.inventoryStatus}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td>
                        <p-cellEditor>
                            <ng-template pTemplate="input">
                                <input pInputText type="text" [(ngModel)]="product.price">
                            </ng-template>
                            <ng-template pTemplate="output">
                                {{product.price | currency: 'USD'}}
                            </ng-template>
                        </p-cellEditor>
                    </td>
                    <td style="text-align:center">
                        <button *ngIf="!editing" pButton pRipple type="button" pInitEditableRow icon="pi pi-pencil" (click)="onRowEditInit(product)" class="p-button-rounded p-button-text"></button>
                        <button *ngIf="editing" pButton pRipple type="button" pSaveEditableRow icon="pi pi-check" (click)="onRowEditSave(product)" class="p-button-rounded p-button-text p-button-success p-mr-2"></button>
                        <button *ngIf="editing" pButton pRipple type="button" pCancelEditableRow icon="pi pi-times" (click)="onRowEditCancel(product, ri)" class="p-button-rounded p-button-text p-button-danger"></button>
                    </td>
                </tr>
            </ng-template>
        </p-table>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/table/" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-tableedit-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Cell Editing&lt;/h5&gt;
    &lt;p-table [value]="products1" dataKey="id"&gt;
        &lt;ng-template pTemplate="header"&gt;
            &lt;tr&gt;
                &lt;th&gt;Code&lt;/th&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Category&lt;/th&gt;
                &lt;th&gt;Quantity&lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-product&gt;
            &lt;tr&gt;
                &lt;td pEditableColumn&gt;
                    &lt;p-cellEditor&gt;
                        &lt;ng-template pTemplate="input"&gt;
                            &lt;input pInputText type="text" [(ngModel)]="product.code"&gt;
                        &lt;/ng-template&gt;
                        &lt;ng-template pTemplate="output"&gt;
                            &#123;&#123;product.code&#125;&#125;
                        &lt;/ng-template&gt;
                    &lt;/p-cellEditor&gt;
                &lt;/td&gt;
                &lt;td pEditableColumn&gt;
                    &lt;p-cellEditor&gt;
                        &lt;ng-template pTemplate="input"&gt;
                            &lt;input pInputText type="text" [(ngModel)]="product.name" required&gt;
                        &lt;/ng-template&gt;
                        &lt;ng-template pTemplate="output"&gt;
                            &#123;&#123;product.name&#125;&#125;
                        &lt;/ng-template&gt;
                    &lt;/p-cellEditor&gt;
                &lt;/td&gt;
                &lt;td pEditableColumn&gt;
                    &lt;p-cellEditor&gt;
                        &lt;ng-template pTemplate="input"&gt;
                            &lt;input pInputText [(ngModel)]="product.inventoryStatus"&gt;
                        &lt;/ng-template&gt;
{'fraction_non_alphanumeric': 0.13560679750529267, 'fraction_numerical': 0.005378497453796418, 'mean_word_length': 1.1260187325142927, 'pattern_counts': {'":': 0, '<': 310, '<?xml version=': 0, '>': 310, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4735203', 'n_tokens_mistral': 4791, 'n_tokens_neox': 4486, 'n_words': 691}