Page 1 of 1

Custom FilterElement with FilterFunction, how to

Posted: 29 Mar 2019, 11:27
by KaneNo1
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??

Re: Custom FilterElement with FilterFunction, how to

Posted: 30 Jul 2019, 17:24
by dumarcey

Re: Custom FilterElement with FilterFunction, how to

Posted: 10 Sep 2019, 13:55
by aragorn
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,