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

UI Components for React
Post Reply
Posts: 3
Joined: 03 Jul 2020, 19:04

05 Jul 2020, 01:55

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.

Posts: 3
Joined: 03 Jul 2020, 19:04

05 Jul 2020, 02:16

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

Posts: 4638
Joined: 29 Jun 2013, 12:38

11 Oct 2020, 00:42

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,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests