3

I have a working primeng table that I wanted to make the rows editable for and followed their documentation to do so. But it throws me the following error when it tries to load

NullInjectorError: No provider for EditableRow

My p-table definition has the following

<p-table
      [columns]="selectedColumns"
      [value]="tableData"
      [resizableColumns]="true"
      [reorderableColumns]="true"
      [paginator]="true"
      [rows]="10"
      [rowsPerPageOptions]="[5, 10, 25, 50, 100]"
      editMode="row"
>

and since I'm loading in different cases of dynamic data my row definition is (it's a lot but mostly just copy/paste from their template):

      <ng-template *ngIf="canEdit" pTemplate="body" let-rowData let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="rowData">
          <ng-container *ngFor="let col of selectedColumns">
            <td>
              <p-cellEditor>
                <ng-template pTemplate="input">
                  <input pInputText type="text" [(ngModel)]="rowData[col.field]" required />
                </ng-template>
                <ng-template pTemplate="output">
                  {{ rowData[col.field] }}
                </ng-template>
              </p-cellEditor>
            </td>
          </ng-container>
        </tr>
        <td style="text-align:center">
          <button
            *ngIf="!editing"
            pButton
            type="button"
            pInitEditableRow
            (click)="onRowEditInit(rowData)"
          >edit</button>
          <button
            *ngIf="editing"
            pButton
            type="button"
            pSaveEditableRow
            style="margin-right: .5em"
            (click)="onRowEditSave(rowData)"
          >save</button>
          <button
            *ngIf="editing"
            pButton
            type="button"
            pCancelEditableRow
            (click)="onRowEditCancel(rowData, ri)"
          >cancel</button>

But it doesn't like the pInitEditableRow / pSaveEditableRow / pCancelEditableRow

As that's what the errors complain about. I have the Table imported in my app modules and none of the examples have anything else brought in so I'm not sure why it's saying there is no provider for the EditableRow.

canpan14
  • 1,181
  • 1
  • 14
  • 36
  • You are importing primeng module ? ```import {TableModule} from 'primeng/table';``` and added at ```imports: [``` of this component module ? – Vitor Piovezam Jun 19 '19 at 13:36
  • Yup! Otherwise the table itself would never work =) The table worked fine before i started adding the edit stuff. – canpan14 Jun 19 '19 at 13:45

3 Answers3

3

I'm really dumb. The error was just so odd I overthought it.

My closing </tr> is in the wrong place. The buttons are accidentally outside of the row so of course it was never going to work.

Once I wrapped the buttons in the same tr as the rest of the tds it worked fine.

canpan14
  • 1,181
  • 1
  • 14
  • 36
1

I had the same issue and I tried editMode for this primeNG data table

<p-table #dt [value]="..." editMode="row">

but It's not fixed.

And when I added pEditableRow for tr It worked

<ng-template pTemplate="body" let-inventorydetail let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="inventorydetail">
Mouhsine Elachbi
  • 31
  • 4
0

I just forgot to add ttEditableColumn

<td *ngFor="let col of columns; let i = index" ttEditableColumn>
sabinemuc
  • 1