title: Angular 4 - Show/Hide filters using primeng DataTable in Angular
body: <p>I want to show the columns filters when I do click a text or button using DataTable of primeng of Angular.</p>
  
  <p>This is the initial status for my table.</p>
  
  <p><a href="https://i.stack.imgur.com/YQduF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YQduF.png" alt="enter image description here"></a></p>
  
  <p>When I do click in the text "Enabled", I will see this:</p>
  
  <p><a href="https://i.stack.imgur.com/3yP33.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3yP33.png" alt="enter image description here"></a></p>
  
  <p>If I do click on button "Disable" the filters again will be hidden.</p>
  
  <p>The initial status for the filters is hidden by default:</p>
  
  <pre><code>&lt;p-dataTable [value]="registers" expandableRows="true" [rows]="4" [paginator]="true" [pageLinks]="50" [rowsPerPageOptions]="[10]"&gt;
      &lt;p-column styleClass="col-icon"&gt;&lt;/p-column&gt;
      &lt;p-column field="time" header="Timestamp" [filter]="false"&gt;&lt;/p-column&gt;
      &lt;p-column field="name" header="Name" [filter]="false"&gt;&lt;/p-column&gt;
      &lt;p-column field="surname" header="Surname" [filter]="false"&gt;&lt;/p-column&gt;
      &lt;p-column field="city" header="City" [filter]="false"&gt;&lt;/p-column&gt;
  &lt;/p-dataTable&gt;
  </code></pre>