Handsontable: how to get instance by container?

Question

I need to create a function that does some data updates and re-rendering to a rendered instance of handsontalbe (var ht = new Handsontable(el,options)). What I can easily get in my case is el (the element which is used as a container of the instance). Is it possible to get ht by only knowing el? Or I have to "remember" ht somewhere to access it later?

(I've tried Handsontable(el) and it creates a new table, it doesn't return an already created instance)

Sterculiaceous

Answer 1

You can't get the handsontable object from the DOM Element from which it has been constructed. The handsontable instance is just a wrapper, which controls DOM Element for viewing, and that element does not have reference to its wrapper.

That means you indeed need to store your reference to ht somewhere, just like you would another variable.

If your problem is the scope, make the table a property of window object, and it will be accessible from everywhere in your page. This can be done simply using:

window.ht = new Handsontable(el,options)

However, if possible avoid making such global variables and keep it in the proper scope.

Cle

So there's no method like Handsontable.getInstances(element) to achieve this, right? – Sterculiaceous

Answer 2

If you use jQuery, you should be able to do so:

// Instead of creating a new Handsontable instance
// with the container element passed as an argument,
// you can simply call .handsontable method on a jQuery DOM object.
var $container = $("#example1");

$container.handsontable({
    data: getData(),
    rowHeaders: true,
    colHeaders: true,
    contextMenu: true
});

// This way, you can access Handsontable api methods by passing their names as an argument, e.g.:
var hotInstance = $("#example1").handsontable('getInstance');

Here is the documentation link: https://docs.handsontable.com/pro/1.13.0/demo-jquery.html

Hysterical

Answer 3

When you create the Handsontable - add a reference to the div - in this example the hot property

function loadSheet() {
  var container = document.getElementById('example_table')
  container.hot = new Handsontable(container, {
    licenseKey: 'non-commercial-and-evaluation',
    rowHeaders: true,
    colHeaders: true,
    height: 'auto',
    data: [
      ['', 'Tesla', 'Volvo', 'Toyota', 'Ford'],
      ['2019', 10, 11, 12, 13],
      ['2020', 20, 11, 14, 13],
      ['2021', 30, 15, 12, 13]
    ]
  })
}

Then when you need to get back to it later

function onClickAddRowToSheet() {
  var container = document.getElementById('example_table')
  var data = container.hot.getData()
  data.push(['2022', 40, 16, 13, 14])
  container.hot.updateData(data)
}

Rencontre

Sounds sane, have you tested this? I mean, on the long run, not just in a quick test – Sterculiaceous

Yep..works for me – Rencontre

Answer 4

Each instance has a rootElement you can test it here https://jsfiddle.net/zhfLboym/ so for a

const container = document.querySelector('#example1');
const hot = new Handsontable(container, settings)

the rootElement will be div#example1.hot.handsontable.htColumnHeaders or just rootElement.id for example1.

But there is no API for altering data nor settings based on the element, it has to be the reference to the instance. So I would recommend preparing an object that holds element and instance and use it for a reference.

Bornu