HandsOnTable: How to indicate previously changed values upon loading

I’ve found a few examples for assigning a certain color to a cell as soon as the value in that cell is changed.

In my scenario, a user makes changes to a number of cells (in the form of 2-D array similar to Excel) and saves the changes. Then another user needs to load that dataset as saved by the previous user. And when the data is loaded, the values that were changed by the first user needs to be highlighted.

Additionally, the dataset gets saved as a JSON object that is structured as follows:

[
  {
    "attr1":"123",
    "attr2":"456",
    ...
    "attr3":"abc"
  },
  ...
  // more stuff inbetween
  ...
  {
    "attr1":"786",
    "attr2":"234",
    ...
    "attr3":"def"
  }
]

In the context of the HOT APIs, I’ve been trying to figure out:

  1. What is the best way to keep track of the changed values and/or the position of the changed cells within the JSON object. I thought of two approaches: a) Keep two versions of JSON objects (before/after save) and compare them, or b) Create a mapping of the location (e.g., (2, 5)) of the changed values within the JSON object
  2. How to actually highlight the changed cells based on the approach. I’d think I need to dynamically construct a string that needs to be assigned to the “columns” property. My head is still murky on how this can be done dynamically

Any tips or pointers will be much appreciated.


Source: stackoverflow-javascript