CODEWITHSUNDEEP
angularprimengprimeng-turbotable
canpan14
canpan14

Reputation: 1273

Primeng Editable Rows - NullInjectorError: No provider for EditableRow

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.

Upvotes: 4

Views: 10149

Answers (3)

sabinemuc
sabinemuc

Reputation: 1

I just forgot to add ttEditableColumn

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

Upvotes: 0

Mouhsine Elachbi
Mouhsine Elachbi

Reputation: 41

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">

Upvotes: 2

canpan14
canpan14

Reputation: 1273

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.

Upvotes: 4

Related Questions