Page 1 of 1

Editing while filtering becomes extremely slow (unusable) on 3000 rows

Posted: 05 Jul 2020, 01:55
by n4zroth
After changing some code from the example to make editing while filtering work, editing becomes so slow it's unusable. I'm guessing it's because state update happens on every key press which is necessary because the value of the edit InputText is bound to the state. What can I do to improve performance or do differently altogether? My editing code looks as follows:

Code: Select all

    onEditorValueChange = (props, value) => {
        let entries= [...this.state.entries];
        let index = entries.findIndex(p => p.id === props.rowData.id);
        if (index !== -1) {
            entries[index][props.field] = value;
        }
        this.setState({entries: entries});
    }

    yearEditor = props => {
        return <InputText type={"text"}
                          value={this.state.entries[this.state.entries.findIndex(p => p.id === props.rowData.id)]["year"]}
                          onChange={(e) => this.onEditorValueChange(props, e.target.value)}/>;
    }
and setting editor={this.yearEditor} on the appropriate column.

Re: Editing while filtering becomes extremely slow (unusable) on 3000 rows

Posted: 05 Jul 2020, 02:16
by n4zroth
Actually I was able to fix it via a workaround: I'm binding not value but defaultValue of the InputText to the current state and switched from onChange to onKeypress and then only change the state on "Enter".

Re: Editing while filtering becomes extremely slow (unusable) on 3000 rows

Posted: 11 Oct 2020, 00:42
by mert.sincan
Glad to hear, thanks a lot for the update! Also, maybe you can use lazy property with onFilter event;
https://www.primefaces.org/primereact/s ... table/lazy

Best Regards,