Custom FilterElement with FilterFunction, how to

UI Components for React
Post Reply
KaneNo1
Posts: 2
Joined: 29 Mar 2019, 11:18

29 Mar 2019, 11:27

Hi, how to make simple filterElement as two InputText like from...to... and filter DataTable for all digits between those two filters??? Have tried separately filterELement and FilterFunction but both together does not working?? Any ideas, advice??


aragorn
Posts: 3765
Joined: 29 Jun 2013, 12:38

10 Sep 2019, 13:55

Hi,

You can use filter method for this issue. Please examine the following code;

Code: Select all

...
    yearFilter(value, filter) {
        // your custom method. I think you can use val1 and val2.
    }

    renderYearElements() {
        return(
            <React.Fragment>
                <InputText onInput={(e)=> this.setState({val1: e.target.value}, () => this.dt.filter(this.state.val1, 'year', 'custom'))}></InputText>
                <InputText onInput={(e)=> this.setState({val2: e.target.value}, () => this.dt.filter(this.state.val2, 'year', 'custom'))}></InputText>
            </React.Fragment>
        );
    }

    render() {
        return (
            <DataTable value={this.state.cars} ref={(el)=> this.dt = el}>
                <Column field="vin" header="Vin" filter={true} />
                <Column field="year" header="Year" filter={true} filterElement={this.renderYearElements()} filterMatchMode="custom" filterFunction={this.yearFilter}/>
                <Column field="brand" header="Brand" filter={true} />
                <Column field="color" header="Color" filter={true}  />
            </DataTable>
        );
    }
Best Regards,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest