Create Handsontable grid with custom settings

by Oski Krawczyk

HTML

var example = document.getElementById('example1');
  var hot1 = new Handsontable(example, {
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: 100,
    width: '100%',
    height: 320,
    rowHeaders: true,
    colHeaders: true,
    placeholder: '...', // grid level
    columns: [{
        title: 'First',
        placeholder: 'First column' // column level
      },
      {
        title: 'Second'
      },
      {
        title: 'Third'
      }
    ],
    cell: [
      {row: 1, col: 1, placeholder: 'Single cell'} // cell level
    ],
    cells: function(row, col, prop) {
      var cellProperties = {}

      if (row % 2 === 0 && col === 2) {
        cellProperties.placeholder = 'Odd cell'; // cell level
      }

      return cellProperties;
    }
  });

JavaScript

var example = document.getElementById('example1');
  var hot1 = new Handsontable(example, {
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: 100,
    width: '100%',
    height: 320,
    rowHeaders: true,
    colHeaders: true,
    placeholder: '...', // grid level
    columns: [{
        title: 'First',
        placeholder: 'First column' // column level
      },
      {
        title: 'Second'
      },
      {
        title: 'Third'
      }
    ],
    cell: [
      {row: 1, col: 1, placeholder: 'Single cell'} // cell level
    ],
    cells: function(row, col, prop) {
      var cellProperties = {}

      if (row % 2 === 0 && col === 2) {
        cellProperties.placeholder = 'Odd cell'; // cell level
      }

      return cellProperties;
    }
  });