0

I want to show the columns filters when I do click a text or button using DataTable of primeng of Angular.

This is the initial status for my table.

enter image description here

When I do click in the text "Enabled", I will see this:

enter image description here

If I do click on button "Disable" the filters again will be hidden.

The initial status for the filters is hidden by default:

<p-dataTable [value]="registers" expandableRows="true" [rows]="4" [paginator]="true" [pageLinks]="50" [rowsPerPageOptions]="[10]">
    <p-column styleClass="col-icon"></p-column>
    <p-column field="time" header="Timestamp" [filter]="false"></p-column>
    <p-column field="name" header="Name" [filter]="false"></p-column>
    <p-column field="surname" header="Surname" [filter]="false"></p-column>
    <p-column field="city" header="City" [filter]="false"></p-column>
</p-dataTable>
Aravind
  • 40,391
  • 16
  • 91
  • 110
Eladerezador
  • 1,277
  • 7
  • 25
  • 48
  • 1
    You can try having the "Enable filter" checkbox or switch button down in the `p-footer` or somewhere. Bind the `[filter]` to a `boolean` that can be toggled back and forth with that checkbox/switchButton. – Chau Tran Oct 06 '17 at 13:54
  • I resolved it with a button and a styleClass by each column – Eladerezador Oct 09 '17 at 15:53
  • 1
    Glad you found you solution. Anyway, here's a plunker (http://plnkr.co/edit/M0nzj9?p=preview) to my comment. If it's something more readable or easier to maintain for you, then feel free to take a look :) – Chau Tran Oct 09 '17 at 17:30
  • Your solution is better ;), I going to use it, thanks – Eladerezador Oct 11 '17 at 08:41

0 Answers0