Handsontable example

by handsoncode

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>
<div id="example" class="hot handsontable htColumnHeaders"></div>

CSS

body {
  background: #ffffff;
  padding: 0;
  margin: 0;
}

th,
td {
  font: 12px sans-serif
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  function getMyData() {
    return [{
      name: {
        first: "Chris",
        last: "Right"
      },
      password: "1"
    }, {
      name: {
        first: "John",
        last: "Honest"
      },
      password: "11"
    }, {
      name: {
        first: "Greg",
        last: "Well"
      },
      password: "111"
    }, {
      name: {
        first: "Marta",
        last: "Pine"
      },
      password: "1111"
    }, {
      name: {
        first: "Ester",
        last: "Mime"
      },
      password: "111122"
    }, {
      name: {
        first: "Rick",
        last: "Sanchez"
      },
      password: "11112222113"
    }, ];
  }

  var example = document.getElementById('example'),
    hot;

  hot = new Handsontable(example, {
    data: getMyData(),
    licenseKey: 'non-commercial-and-evaluation',
    colWidths: 148,
    colHeaders: ['First name', 'Last name', 'Password <br> (same length)', 'Password <br> (real length)', 'Password <br> (unmasked editor)'],
    columns: [{
      data: 'name.first'
    }, {
      data: 'name.last'
    }, {
      data: 'password',
      type: 'password',
      hashLength: 15,
      hashSymbol: '&#8226;'
    }, {
      data: 'password',
      type: 'password',
      hashSymbol: '&#8226;'
    }, {
      data: 'password',
      type: 'password',
      editor: 'text'
    }]
  });

});