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

JavaScript

function myData() {
  return Handsontable.helper.createSpreadsheetData(10, 5);
}

const CELLS_META = new Map([
	[
  	0,
    {
      type: 'dropdown',
      source: ['Option 1', 'Option 2', 'Option 3', 'Option 4'],
    },
  ],
  [
  	1,
    {
      type: 'numeric',
      numericFormat: {
      	pattern: {
        	output: 'currency',
          mantissa: 2,
        }
      },
    },
  ],
  [
  	2,
    {
      type: 'date',
      dateFormat: 'ddd DD/MM/YYYY',
    },
  ],
  [3, { type: 'checkbox' }],
  [4, { type: 'text' }],
  [
  	5,
    {
      type: 'handsontable',
      handsontable: {
        colHeaders: true,
        data: myData(),
      },
    },
  ],
  [6, { type: 'password' }],
])

const container = document.getElementById('example');
const hot = new Handsontable(container, {
  data: [
    ['dropdown'],
    [5.5656],
    ['Thu 22/12/2016'],
    [true],
    ['Text'],
    ['Instance under a cell'],
    ['unseen text']
  ],
  licenseKey: 'non-commercial-and-evaluation',
  colHeaders: true,
  cells(row, column) {
    let cellMeta = {};
    
    if (CELLS_META.has(row)) {
    	cellMeta = {
      	...CELLS_META.get(row),
      };
    }

    return cellMeta;
  }
});