Handsontable getSelected function not working

Question

I'm using handsontable 13.1 and js. I have some data in a table and I have set up checkboxes in the row header. My table settings are:

  const hotSettings = {
      licenseKey: "non-commercial-and-evaluation",
      data: treatedData,
      colHeaders: Object.keys(treatedData[highestItem]),
      rowHeaders: function (index) {
        return '<input type="checkbox">';
      },
      stretchH: "all",
      autoWrapRow: true,
      height: 300,
      selectionMode: 'multiple', // 'single', 'range' or 'multiple',
      cells: function (row, col, prop) {
        if (prop === "AAlink") {
          this.renderer = function (
            instance,
            td,
            row,
            col,
            prop,
            value,
            cellProperties
          ) {
            const link = document.createElement("a");
            link.href = value;
            link.textContent = value;
            link.target = "_blank";
            Handsontable.dom.empty(td);
            td.appendChild(link);
          };
        }
      },
    };

    hotContainer.hot = new Handsontable(hotContainer, hotSettings);

I have added a button to my html to trigger the following function:

 function getSelectedRow() {

    const hotContainer = document.getElementById("hot-container");
    const selectedRow = hotContainer.hot.getSelected();
    console.log(selectedRow);
    ...
  }

selectedRow is being returned as undefined. What am I doing wrong?

Answer 1

You need to set up the handler for the checkboxes to select the applicable row in the Handsontable.

Check out this example provided by the HOT folks: Handsontable Code Sandbox

They use this property:

afterOnCellMouseDown: changeCheckboxCell

to set up a click handler on the row headers.