Page 1 of 1

Filters does not work with lazy loading - datatable

Posted: 18 Mar 2019, 12:17
by sajjanhubale
Hi Team,

I am not able to filter the data with lazy loading in datatable.

can you please help how can we do this?

Appreciate your response!

Regards,
Sajjan Hubale

Re: Filters does not work with lazy loading - datatable

Posted: 22 Mar 2019, 05:34
by sajjanhubale
can you please help to solve the problem of filter issue?

Re: Filters does not work with lazy loading - datatable

Posted: 13 Apr 2019, 11:23
by sajjanhubale
Hi Team,

It would be grate if you can implement this feature.

Regards,
Sajjan

Re: Filters does not work with lazy loading - datatable

Posted: 02 Aug 2019, 04:57
by janishaik
Even we also facing same issue, let us know if we have any solution for this issue.

Re: Filters does not work with lazy loading - datatable

Posted: 10 Sep 2019, 12:40
by aragorn
Hi all,

You need to implement it by yourself using onFilter method.Exp;

Code: Select all

onFilter(event) {
        //event.filters -> Collection of active filters.
        
        this.setState({
            loading: true
        });

        //imitate delay of a backend call
        setTimeout(() => {    
            this.setState({
                first: 0,
                cars: // the returned value from backend,
                totalRecords: // the returned value's length
                loading: false,
                filters: event.filters
            });
        }, 1000);
    }

Code: Select all

<DataTable value={this.state.cars} paginator={true} rows={this.state.rows} totalRecords={this.state.totalRecords}
                        lazy={true} first={this.state.first} onPage={this.onPage} loading={this.state.loading} filters={this.state.filters} onFilter={this.onFilter}>
                        <Column field="vin" header="Vin" filter={true}/>
                        <Column field="year" header="Year" />
                        <Column field="brand" header="Brand" />
                        <Column field="color" header="Color" />
                    </DataTable>
Best Regards,