External DataTable

[vhc]

I am looking into using DataTable with Filters. However, there is a requirement to have filtering on certain columns with the filters outside the table. In other words, instead of having a filter on the column header, filters need to be outside the table; even be able to be filters for multiple DataTable. Is this even possible?

I've been trying a few things but nothing. Here's what I am trying - simple button outside my DataTable to filter on name column when clicked:

Code: Select all

    <button class="btn btn-outline-primary" (click)="dt.filter('A','name','startsWith')">Filter on A</button>

and my DataTable looks like this:

Code: Select all

 
 <p-dataTable [value]="organizations" [globalFilter]="orgFilter" selectionMode="single" dataKey="name" #dt>
                        <p-column field="name" header="Name" [filter]="true" filterMatchMode="startsWith">
                            <template let-col let-organization="rowData" pTemplate="body">
                                <img src="/dist/assets/images/{{organization.type.replace(' ', '').toLowerCase()}}.png" class="type-icon" /><strong>{{organization[col.field]}}</strong>
                            </template>
                        </p-column
                 </p-dataTable>

[sudheer]

Have you tried it? Mostly we do filtering on header places and good for view port usage too.For external filter you should be in a situation to provide all required fields for filter function.

[vhc]

I am using Angular 2, if that makes a difference(?); waiting on this to get resolved before I can upgrade to using Angular 4: https://github.com/aspnet/JavaScriptServices/issues/800.

The error that I get is trying to reference the DataTable outside of it. Basically, what I am trying to accomplish is the following:

• User clicks alphabet filter

• DataTable records are filter

This is my UI: https://drive.google.com/file/d/0B5t626 ... sp=sharing

The problem is that I cannot reference the DataTable object unless the button(or any filter) is created inside the DataTable within a template. Is there a workaround for this? Is there a way I can call a function where I can save a reference to the DataTable?

Otherwise, all I get is this error: " - inline template:7:8 caused by: Cannot read property 'filter' of undefined"

Thanks! I've been trying all sorts of things for days, but can't seem to get anything.

[sudheer]

Not only datatable reference you should get each column reference as well. That makes the implementation bit harder. May be you can try to get through PRO support on possibility.

[Primaryw]

Any update on this one? I have a similar issue...

[paulswan]

The solution I provided in the following post may do what you need:
viewtopic.php?f=35&t=52591