Handsontable for limited cell sizes

by tonytlwu

HTML

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

CSS

.cell-wrapper {
	max-height: 100px;
  min-height: 100%;
	overflow: hidden;
}
</style><!-- Ugly Hack due to jsFiddle issue -->

<script src="https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">

JavaScript

function myRender(instance, td, row, col, prop, value, cellProperties) {
	// Custom render for cells 
  Handsontable.renderers.TextRenderer.apply(this, arguments);
  td.innerHTML = '<div class="cell-wrapper">' + td.innerHTML + '</div>'
}

var example = document.getElementById('example1');
var hot = new Handsontable(example, {
  data: Handsontable.helper.createSpreadsheetData(100, 100),
  colWidths: 100,
  rowHeaders: true,
  colHeaders: true,
  manualColumnResize: true,
  renderer: myRender // Custom rendered
});

// Inject long text for testing
  
var longText = "To make the grid scrollable, set constant/maximum width and height to the container holding Handsontable and set the overflow property to hidden in the container's stylesheet. Then, if the table contains enough rows or columns, you can scroll through it. Note, that Handsontable renders only the visible part of the table plus a fixed amount of rows and columns. You can experiment with the viewportColumnRenderingOffset and viewportRowRenderingOffset config options, which define this behavior, to improve the performance of your app."
	
hot.setDataAtCell(2,2, longText)