The HandsonTable document describes the data source:
Handsontable.com/docs/7.1.1/…

In official documentation, the supported data source structures support the following:

  • Array data source
  • Array data source with hidden columns
  • Object data source
  • Object data source with column as a function
  • Object data source with column mapping (nested)
  • Object data source with custom data schema
  • Function data source and schema


The first two data structures are officially recommended:

data = [
    [' '.'Tesla'.'Nissan'.'Toyota'.'Honda'.'Mazda'.'Ford'],
    ['2017', 10, 11, 12, 13, 15, 16]'2018', 10, 11, 12, 13, 15, 16]'2019', 10, 11, 12, 13, 15, 16]'2020', 10, 11, 12, 13, 15, 16]'2021', 10, 11, 12, 13, 15, 16]Copy the code

Each subarray in a two-dimensional array represents a row, and each subarray represents a column; However, this data structure does not meet our requirements. We want each item of data to be an object, so that we can store style information in the data.

By reading other Object data structures, it is found that the official way is that an Object represents a row of tables:

This doesn’t match my expectation that the data in an object represents a cell, not an entire row:

[
  [{ name: ' ' }, { name: 'Ford' }, { name: 'Tesla' }, { name: 'Toyota' }, { name: 'Honda' }],
  [{ name: '2017' }, { name: 10 }, { name: 11 }, { name: 12 }, { name: 13 }],
  [{ name: '2018' }, { name: 20 }, { name: 11 }, { name: 14 }, { name: 13 }],
  [{ name: '2019' }, { name: 30 }, { name: 15 }, { name: 12 }, { name: 13 }]
]Copy the code

This is what happens when you use it directly… (High energy coming)

To render the table properly, we can manually modify the innerHTML of the table using the Renderer hook:

renderer: (instance, TD, row, col, prop, value, cellProperties) => {
  TD.innerHTML = value.name
}Copy the code

At this point, the effect is normal, but if you edit the table, the energy will come again…

The obvious reason for this is that the cell holds data of reference type rather than base type. Double-clicking the table executes the toString() method. Is there a way to modify the contents of the source data when double-clicking the table?

Of course, in the instance of honsontable, through handsontable. Editors. BaseEditor can obtain a constructor, in its prototype has two hooks, prepare before the edit form and form saveValue after editing, We can reset the value of value when preparing.

const CustomEditor = Handsontable.editors.BaseEditor
CustomEditor.prototype.prepare = function(row, col, prop, td, value, cellProperties) {
  this.originalValue = value.name
}Copy the code

Double-click the table and the content is displayed as normal, but after editing the text, it is restored to its original style, where saveValue comes in handy:

CustomEditor.prototype.saveValue = function(value, ctrlDown) {// Edit the table and insert the new values into the original array object _this.originData[this.row][this.col]['name'_this.hot.render()}}Copy the code

The first parameter of saveValue is the modified value of the saveValue method. We only need to change the value of the source data name to the value of the passed parameter. However, it is important to note that changing the value does not trigger the table rendering, which is the renderer hook mentioned earlier, so the displayed value will not change