Lazy DataTable onFilter does not work

[harry12345]

It seems onFilter method has not called.
Could you give an example how can we filter lazy datatable?

Code: Select all

import React, {Component} from 'react';
import {DataTable} from 'primereact/datatable';
import {Column} from 'primereact/column'
// import {Button} from 'primereact/button';
import {InputText} from 'primereact/inputtext';
import {PermissionService} from '../service/PermissionService';

export class PermissionGrid extends Component {

	constructor() {
        super();
        // setting initial state values
        this.state = { items: [], 
        		loading: false,
        	      first: 0,
        	      rows: 10,
        	      totalRecords: 0,
        	      sortOrder: null,
        	      filters:null};
        this.permissionService = new PermissionService();
        this.onPage = this.onPage.bind(this);
        this.onFilter = this.onFilter.bind(this);
        this.sort = this.sort.bind(this);        
    }
	
	componentDidMount() {
	    setTimeout(() => {
	      this.permissionService.find().then(data => {
	        this.setState({
	          totalRecords: data.totalRecords,
	          items: data.items,
	          loading: false
	        });
	      });
	    }, 1000);
	}
	
	sort(event) {
	    console.log(event.field);
	}
	
	onFilter(event) {
		console.log(event);
        
        this.setState({
        	filters: event.target.value
        });
	}
	
	onPage(event) {
	    this.setState({
	      loading: true
	    }); 

	      this.permissionService.find(event).then(data => {
	    	  	  this.setState({
		          totalRecords: data.totalRecords,
		          items: data.items,
		          loading: false,
		          first: 0
		        });
	  });
	}
	
    render() {
        let keyFilter = <InputText style={{ width: '100%' }} className="ui-column-filter" />

        let tableHeader = <div/>
      
        let datatable = <DataTable value={this.state.items}
            lazy={true} first={this.state.first} responsive={true} selectionMode="single" 
        onPage={this.onPage} onFilter={this.onFilter} filters={this.state.filters}
        loading={this.state.loading}
            paginator={true} rows={this.state.rows} rowsPerPageOptions={[5, 10, 20]} totalRecords={this.state.totalRecords}
            header={tableHeader} 
            >
            <Column field="key" header="Key" 
                filter={true} filterElement={keyFilter} />
            <Column field="name" header="Name" />
        </DataTable>;

        return (
            <div>
                {datatable}
            </div>
        );
    }

}