Handsontable example

by handsoncode

HTML

<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">

Babel + JSX

const myJSON = JSON.stringify([
	{
  	'_id': 0,
    'guid': 'a56f0d46',
    'isActive': false,
    'balance': 1325.23,
    'picture': 'https://i.pravatar.cc/32?u=a042581f4e29026704d',
    'age': 27,
  }
]);

const example = document.getElementById('example');
const hot = new Handsontable(example, {
  data: JSON.parse(myJSON),
  licenseKey: 'non-commercial-and-evaluation',
  colWidths: 100,
  colHeaders: true,
  columns: [
  	{
    	data: 'guid',
    	title: 'GUID',
    },
    {
    	data: 'picture',
    	title: 'Avatar',
      renderer(hotInstance, td, row, column, prop, value, cellProperties) {
      	const modifiedValue = `<img src="${value}" alt="avatar"/>`
      
      	Handsontable.renderers.HtmlRenderer.apply(this, [
        	hotInstance,
          td,
          row,
          column,
          prop,
          modifiedValue,
          cellProperties,
        ]);
      }
    },
    {
    	data: 'age',
    	title: 'Age',
      readOnly: true,
    },
    {
    	data: 'balance',
    	title: 'Balance',
      type: 'numeric',
      numericFormat: {
      	pattern: {
        	output: 'currency',
          mantissa: 2,
        }
      }
    },
    {
    	data: 'isActive',
    	title: 'Is active?',
      type: 'checkbox',
    },
  ]
});