angularprimengprimeng-datatable

Multiline textbox in editable DataTable?


I use PrimeNG DataTable in editable mode. By default there is a single line text box in each cell.

I use word-wrap: break-word; style in my datatable, the result is the following: enter image description here

However, when I enter editing mode there is only one line: enter image description here

The question is how do I make it look like in the 1 picture (multiline) to make it more convenient for user?


Solution

  • You can override the editor template for that column and replace the basic input with a textarea for instance :

    <p-column field="vin" header="Vin" [editable]="true">
      <ng-template let-col let-car="rowData" pTemplate="editor">
            <textarea [(ngModel)]="car[col.field]" appendTo="body"></textarea>
        </ng-template>
    </p-column>
    

    Have you tried something like this ?