title: PrimeNG: Editable dataTable column
body: <p>I have a data table and i am trying to make the column careOfferingSpaceAvailableId  editable then once user edits i want to update that row column also in the database.</p>
  
  <p>1.) However for some reason the UI does not render this column as editable </p>
  
  <p>2.) I have a "next" button and once clicked  i do not know how to grab the values that user enters into the spaces available editable column. I need to grab each spaceAvailable input along with its careOfferingSpaceAvailableId to update to the database</p>
  
  <pre><code> &lt;p-dataTable [value]="this.careOfferingSpaceList" [editable]="true" selectionMode="single" rows="25" [responsive]="true"
        [loading]="false"&gt;
        &lt;p-column field="id" [editable]="true" hidden="true"&gt;&lt;/p-column&gt;
        &lt;p-column field="weekNo" [editable]="true" header="Offerings"&gt;
          &lt;ng-template let-careOfferingSpace="rowData" pTemplate="body"&gt;
            &lt;span&gt; Week {{careOfferingSpace.weekNo}} &lt;/span&gt;
          &lt;/ng-template&gt;
        &lt;/p-column&gt;
        &lt;p-column field="startDate" [editable]="true" header="Date"&gt;
          &lt;ng-template let-careOfferingSpace="rowData" pTemplate="body"&gt;
            &lt;span&gt; {{careOfferingSpace.startDate}} - {{careOfferingSpace.endDate}} &lt;/span&gt;
          &lt;/ng-template&gt;
        &lt;/p-column&gt;
        &lt;p-column field="careOfferingSpaceAvailableId" hidden="true" header="Space Available Id" [editable]="true"&gt;
        &lt;/p-column&gt;
        &lt;p-column field="spaceAvailable" header="Spaces Available" [editable]="true"&gt;
        &lt;/p-column&gt;
  
      &lt;/p-dataTable&gt;
  </code></pre>
  
  <p>You can see even if i click space available column i cant type data</p>
  
  <p><a href="https://i.stack.imgur.com/jT9zc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jT9zc.png" alt="You can see"></a></p>