Switch p-table cell programmatically to edit mode in Primeng

Question

I have a primeng table (the new module) with editable cells displaying simple data. Outside the table I have a button to add new empty objects/rows to the table and I would like to jump to edit mode in the new cell programmatically when the button is clicked.

I am able to add the empty row to the table but I have no idea how to switch the new row cell element into edit mode.

I am getting the EditableColumn like this: @ViewChild(EditableColumn) editableColumn: EditableColumn;

...
<td *ngFor="let col of columns" style="width:150px;height: 27px" #td pEditableColumn>
...

On the editableColumn I am able to call the openCell() method but it always jumps to the first generated cell and not to the new generated row cell.

Can anyone help with this? Are there any better approaches to achieve my goal?

Answer 1

The trick to this one is to call onClick(event) on the editable column you would like to open.

editableColumn.onClick(e);

You can get a reference to the column a number of ways, one is using ViewChildren

@ViewChildren(EditableColumn) private editableColumns: QueryList<EditableColumn>;

Answer 2

Having the same problem. I've figured out a solution for my case of columns being generated dynamically. I had to open one specific cell of each row if sibling table fields cells were clicked. Eg. on the click of a city field, I should open Address cell.

I'm aware the solution might look ugly, but it's the only possible solution I could find.

TS:

@ViewChild(EditableColumn) editableColumn: EditableColumn
@ViewChildren(EditableColumn) private editableColumns: QueryList<EditableColumn>

openGoogleAddress(event): void {
  if (event?.path) {
    const currentRowAddressCell = this.editableColumns.filter(
      item => item?.el?.nativeElement === event?.path[3]?.children[1]
    )
    this.editableColumn = currentRowAddressCell[0]

    setTimeout(() => {
      this.editableColumn.openCell()
    }, 0)
  }
}

HTML:

<div *ngSwitchCase="'city'">
  <span class="p-flex" (click)="openGoogleAddress($event)">{{
    (rowData[col.value][col.sublabel] | titlecase) || emptyDash
  }}</span>
</div>

Answer 3

This can be easily done with:

Primeng table:

<p-table #dt [columns]="header" [value]="data">

Typescript:

addRow(dt: Table) { dt.editingCell = document.getElementById('cellId');}