Custom Editor for DataTable cell? #360

ishara opened this Issue May 14, 2016 · 5 comments


None yet

3 participants

ishara commented May 14, 2016

How can Add custom cell editor for DataTable ?


Do you need something like this ?

ishara commented May 17, 2016

Yes , but I need to add Calendar , Dropdown and myOwnCell Editor component to DataTable cell.


Then take a look at this one please

ishara commented May 24, 2016

It seems for custom cell rendering solution, I need to add 'p-calendar' component in to the table cell.

@cagataycivici cagataycivici self-assigned this Dec 30, 2016
@cagataycivici cagataycivici added this to the 2.0 milestone Dec 30, 2016
cagataycivici commented Jan 5, 2017 edited

screen shot 2017-01-05 at 22 50 58

Ready for 2.0, used such as;

<p-dataTable [value]="cars" [editable]="true">
    <p-column field="vin" header="Vin" [editable]="true"></p-column>
    <p-column field="year" header="Year" [editable]="true"></p-column>
    <p-column field="brand" header="Brand" [editable]="true" [style]="{'overflow':'visible'}">
        <template let-col let-car="rowData" pTemplate="editor">
            <p-dropdown [(ngModel)]="car[col.field]" [options]="brands" [autoWidth]="false" [style]="{'width':'100%'}" required="true"></p-dropdown>
    <p-column field="color" header="Color" [editable]="true"></p-column>
    <p-column field="saleDate" header="Sale Date" [editable]="true" [style]=" {'overflow':'visible' }">
        <template let-col let-car="rowData" pTemplate="body">
             { {car[col.field]|date } }
        <template let-col let-car="rowData" pTemplate="editor">
            <p-calendar [(ngModel)]="car[col.field]"></p-calendar>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment