Handsontable example

by handsoncode

HTML

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

<div id="example1" class="hot "></div>

CSS

.handsontable span.colHeader {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 75% !important;
}

JavaScript

const container = document.querySelector('#example1');

const colHeaderLabel = [
  'Some value',
  'Some header',
  'Wider column here',
  'Medium col',
  'Narrow',
];

let hot = new Handsontable(container, {
  contextMenu: true,
  manualColumnResize: true,
  filters: true,
  dropdownMenu: true,
  colHeaders: colHeaderLabel,
  licenseKey: 'non-commercial-and-evaluation',
});