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="example1" class="hot handsontable htColumnHeaders"></div>

CSS

body {
  background: white;
  margin: 0;
  padding: 0;
  font-size: 0.9em
}

JavaScript

function getCarData() {
  return [{
      id: 454,
      name: 'Jane',
      surname: 'Smith',
      telephone: '999-999-999',
      email: '[email protected]'
    },
    {
      id: 664,
      name: 'John',
      surname: 'Palmer',
      telephone: '999-999-998',
      email: '[email protected]'
    },
    {
      id: 223,
      name: 'Andy',
      surname: 'Garcia',
      telephone: '999-999-997',
      email: '[email protected]'
    },
    {
      id: 611,
      name: 'Brandon',
      surname: 'May',
      telephone: '999-999-996',
      email: '[email protected]'
    },
    {
      id: 331,
      name: 'Diana',
      surname: 'Sampson',
      telephone: '999-999-995',
      email: '[email protected]'
    },
    {
      id: 217,
      name: 'Mike',
      surname: 'Keeny',
      telephone: '999-999-994',
      email: '[email protected]'
    },
    {
      id: 995,
      name: 'Matilda',
      surname: 'May',
      telephone: '999-999-993',
      email: '[email protected]'
    },
    {
      id: 887,
      name: 'Tom',
      surname: 'Ween',
      telephone: '999-999-992',
      email: '[email protected]'
    },
    {
      id: 522,
      name: 'John',
      surname: 'Loose',
      telephone: '999-999-991',
      email: '[email protected]'
    }
  ];
}

var
  container = document.getElementById('example1'),
  hot = new Handsontable(container, {
    data: getCarData(),
    licenseKey: 'non-commercial-and-evaluation',
    colHeaders: ['ID', 'Name', 'Surname', 'Telephone', 'E-mail'],
    colWidths: [45, 120, 120, 150, 300],
    columnSorting: true,
    columns: [{
        data: 'id',
        type: 'numeric',
        readOnly: true,
      },
      {
        data: 'name',
        readOnly: true,
      },
      {
        data: 'surname',
        readOnly: true,
      },
      {
        data: 'telephone'
      },
      {
        data: 'email'
      }
    ]
  });