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

[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.

[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".

[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,