Change cell border and background colors

I’d like to do the following:

  • when I change the value of a cell, mark it as dirty (change bg color)… I’m doing this in afterChange and setting an isDirty property on that particular cell
markAsDirty() {
    const [row, col] = this.hot.getSelected();

    this.hot.setCellMeta(row, col, 'isDirty', true);
  }

and with cells method I add a class to that cell.

cells(row, col, field) {
        const cellProps = {};

        if (this.isDirty) {
          cellProps.className = 'htDirty';
        }

        return cellProps;
      },
  • when I save the data, I’d like to be able to remove all isDirty properties from all cells… how would I go about doing that, considering I’d have a lot of data?

Also, I’m bringing some data via ajax, and I’d like to add a class on some (random) rows and columns.

Example: another user changes some of the columns on another computer, saves it, and I get which items have changed attributes from the SourceData, I’d like to be able to mark those rows and columns accordingly. Is this possible, considering I find the correct row number and cell number?

Hi @arthur.kirkosa

I think that there are only two options:

  1. Erasing each cell’s class
  2. Building an array of changed cell coords and then erasing additional class.
    In both examples you’d need to iterate each cell in the array.

In a case where you got an information that you have to change a class for a cell programatically and you have its coordinates just pick the setCellMeta method. Here’s an example inside the afterChange hook http://jsfiddle.net/jpaj2h21/