Handsontable example

by garethrwilliams

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/handsontable.full.min.js"></script>
<div id="example1"></div>

CSS

.pink { color: pink; }

JavaScript

const myFirstRow = {
  header1: {
    edited: false,
    value: 'edit me'
  },
  header2: {
    edited: false,
    value: 'to make me'
  },
  header3: {
    edited: false,
    value: 'pink!'
  },
  header4: {
    edited: true,
    value: "I'm already pink?"
  },
}

// Adds a "pink" class if the metadata "edited" is true
customRenderer = function(instance, td, row, col, prop, value, cellProperties) {
	td.textContent = value;
  if (cellProperties.edited === true) {
    td.classList.add('pink');
  }

  return td;
};

// Sets "edited" metadata whenever a cell is edited
class UpdateTrackerEditor extends Handsontable.editors.TextEditor {
  saveValue(value, ctrlDown) {
    this.instance.setCellMeta(this.row, this.col, 'edited', true);
    super.saveValue(value, ctrlDown);
  }
}

var example = document.getElementById('example1');
var hot = new Handsontable(example, {
  data: myFirstRow,
  columns: [{
      data: `header1.value`,
      renderer: customRenderer,
      editor: UpdateTrackerEditor,
    },
    {
      data: `header2.value`,
      renderer: customRenderer,
      editor: UpdateTrackerEditor,
    },
    {
      data: `header3.value`,
      renderer: customRenderer,
      editor: UpdateTrackerEditor,
    },
    {
      data: `header4.value`,
      renderer: customRenderer,
      editor: UpdateTrackerEditor,
    }
  ],
  rowHeaders: true,
  colHeaders: true,
  // Enabling cells option to init cell metadata with my complexe objects `myFirstRow`.
  // It won't work anymore because before each render, this method resets my metadata from my original objects (the source data). So 'edited' becauses `false` again!

  cells: function(row, col, prop) {
  console.log(prop)
    const { value, ...meta } = this.instance.getSourceDataAtRow(row)[prop.replace('.value', '')];
  console.log(value, meta)
      return meta;
  } 
});