Getting the cell values for a selected row

I'm trying to work out how to select the data (cell values) from a row. The docs don't seem to be that clear and the examples for adding hooks seems to be somewhat overwhelming.

https://docs.handsontable.com/0.34.4/Hooks.html

This what I've tried.

var data = [
        ["", "Ford", "Volvo", "Toyota", "Honda"],
        ["2014", 10, 11, 12, 13],
        ["2015", 20, 11, 14, 13],
        ["2016", 30, 15, 12, 13]
    ];

    var container = document.getElementById('example');
    var hot = new Handsontable(container, {
        data: data,
        minSpareRows: 1,
        rowHeaders: true,
        colHeaders: true,
        contextMenu: true
    });
    
    //This is where I think I should add something like this but this is where I'm lost.
    
    hot.addHook('getCell');

<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet"/>
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="./node_modules/handsontable/dist/handsontable.full.js"></script>
    <script src="bundle.js"></script>
    <link rel="stylesheet" media="screen" href="./node_modules/handsontable/dist/handsontable.full.css">


</head>
<body>

<div id="example"></div>
</body>



</html>

Solution

I think this is what you're looking for. From reading the docs looks like you need to give the hook a callback. Since you want to get the row when a cell is clicked the event you want to register is afterSelection. This callback is fired after one or more cells are selected (e.g. during mouse move), when that happens you get access to the parameters of the callback. Then you can just use the Handsontable core api to pull the cell/row/col/etc data

var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2014", 10, 11, 12, 13],
  ["2015", 20, 11, 14, 13],
  ["2016", 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true
});


// create a hook with an event from Handstable core events 
hot.addHook('afterSelection', function(row,column){
  const selectedCell = hot.getDataAtCell(row,column); 
  const selectedCol = hot.getDataAtCol(column);
  const selectedRow = hot.getDataAtRow(row);
  
  console.log(`selected cell [${row}][${column}] with value [${selectedCell}]`)
  console.log(`column values: ${JSON.stringify(selectedCol)}`);
  console.log(`row values: ${JSON.stringify(selectedRow)}`)
});

<link href="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.css" rel="stylesheet" />
<script src="https://docs.handsontable.com/0.34.4/bower_components/handsontable/dist/handsontable.full.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <script src="./node_modules/handsontable/dist/handsontable.full.js"></script>
  <script src="bundle.js"></script>
  <link rel="stylesheet" media="screen" href="./node_modules/handsontable/dist/handsontable.full.css">


</head>

<body>

  <div id="example"></div>
</body>



</html>