Handsontable example

by handsoncode

HTML

<button class="comm">Get Comments</button>
<div id="example"></div>
<script src="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable@latest/dist/handsontable.full.min.css">

JavaScript

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: Handsontable.helper.createSpreadsheetData(20, 10),
  licenseKey: 'non-commercial-and-evaluation',
  rowHeaders: true,
  colHeaders: true,
  contextMenu: true,
  comments: true,
  renderAllRows: true,
  cell: [
    {
      row: 1,
      col: 1,
      comment: {
        value: 'Some comment'
      }
    },
    {
      row: 2,
      col: 2,
      comment: {
        value: 'More comments'
      }
    },
    {
      row: 4,
      col: 1,
      comment: {
        value: 'Some comment'
      }
    },
    {
      row: 4,
      col: 2,
      comment: {
        value: 'More comments'
      }
    },
    {
      row: 6,
      col: 1,
      comment: {
        value: 'Some comment'
      }
    },
    {
      row: 7,
      col: 2,
      comment: {
        value: 'More comments'
      }
    },
    {
      row: 9,
      col: 1,
      comment: {
        value: 'Some comment'
      }
    },
    {
      row: 15,
      col: 1,
      comment: {
        value: 'Some comment'
      }
    }
  ]
});


document.querySelector('.comm').addEventListener('click', function() {
  const comments = [];

  for (let row = 0; row < hot.countRows(); row++) {
    const rowCellMetas = hot.getCellMetaAtRow(row);

    for (let column = 0; column < rowCellMetas.length; column++) {
    	const { col, comment } = rowCellMetas[column];
      
      if (comment) {
      	comments.push({
        	row,
          column: col,
          comment: comment.value,
        });
      }
    }
  }
  
  console.log(comments);
})