React Data Grid does not keep changes after un-filtering

Question

I am new to ReactJS and I am trying to work with React Data Grid. When I filter my table, make a change to a cell, then unfilter the table, the change reverts back to its previous value. If I change const rows = this.state.rows.slice(0); to const rows = Selectors.getRows(this.state); my changes stay, but then I can not unfilter the table.

Here is how I am handling Grid Rows to Update:

  handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    const rows = this.state.rows.slice(0);
    // const rows = Selectors.getRows(this.state);
    
    for (let i = fromRow; i <= toRow; i++) {
      const rowToUpdate = rows[i];
      const updatedRow = update(rowToUpdate, { $merge: updated });
      rows[i] = updatedRow;
      if (!rows[i].Date) {
        const index = this.state.counter;
        newRows[index] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ newRows });
      } else {
        updatedRows[rows[i].Date] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ updatedRows });
      }
    }
    this.setState({ originalRows: rows });
  };

I have looked at the RDG docs and examples. In their filter example, they don't allow you to edit cells.

Thanks in advance!

I'm trying to put together an example on codepen, but I can not get a react data grid with a filter to work. — Devin Tyler Cunningham, Oct 10 '18 at 17:40

score 0 · Answer 1 · answered Oct 10 '18 at 15:53

0

the state is unmutable, its a bad idea to keep slicing data as that, before you need to make a copy and then manipulate it, thus you can do

const rows = Object.assign([],this.state.rows)

btw a living example or the type of data your holding on rows will be a great help

answered Oct 10 '18 at 15:53

D3Portillo

324
2
6

Thanks for the quick reply! I gave this a try, but I am getting the same results. I'm not sure how to get a living example out to you guys, I'm working in a private repo and the web app is hosted on an internal web server. I can paste in my entire table code if needed. – Devin Tyler Cunningham Oct 10 '18 at 16:29

score 0 · Accepted Answer · answered Oct 11 '18 at 15:27

I figured out a solution, I used the npm library Lodash and their function _.unionBy.

This solution merges the updated rows array with the original states' rows array, on the SN key for each object, into a variable then sets the state with the result:

 handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    const rows = Selectors.getRows(this.state);
    const rowsTwo = Object.assign([], this.state.rows);
    
    for (let i = fromRow; i <= toRow; i++) {
      const rowToUpdate = rows[i];
      const updatedRow = update(rowToUpdate, { $merge: updated });
      rows[i] = updatedRow;
      if (!rows[i].Date) {
        const index = this.state.counter;
        newRows[index] = rows[i];
        this.handleUpdate(rows[i]);
        this.setState({ newRows });
      } else {
        updatedRows[i] = rows[i];
        this.handleUpdate(rows[i]);
      }
    }
    const result = _.unionBy(updatedRows, rowsTwo, 'SN');
    
    this.setState({ rows: result });
  };

React Data Grid does not keep changes after un-filtering

2 Answers2