By default, the component's content will be in read-only mode (that is, we can't edit the content). An UI will be more interactive with the cell editing feature. The cell editing feature is enabled just by setting the editable property on both table and column levels. When a cell is clicked on, the edit mode will be activated. Clicking on the outside of a cell or hitting the Enter key switches back to the view mode after updating the value. The cell editing feature would be written as follows:

<p-dataTable [value]="browsers" [editable]="true">
  <p-column field="browser" header="Browser" [editable]="true">
  </p-column>
  <p-column field="platfrom" header="Platform" [editable]="false">
  </p-column>
  <p-column field="engine" header="Engine" [editable]="true">
    <ng-template let-col let-browser="rowData" pTemplate="editor">
      <p-dropdown [(ngModel)]="browser[col.field]" [options]="engines"  
        [autoWidth]="false" required="true"></p-dropdown>
    </ng-template>
  </p-column>
  <p-column field="grade" header="Grade" [editable]="true">
  </p-column>
</p-dataTable>

The following screenshot shows a snapshot result with the cell editing feature on the engine field as an example:

By default, the editable mode enables the input component on the click of a particular cell. We can also use other input components such as DropDown, MultiSelect, Calendar, and so on, for a customized input editing. In the preceding example, we can edit the cells using Input and Dropdown components.