Handsontable Basic Example (100x10)

HTML

<script src="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.js"></script>
<link rel="stylesheet" href="https://handsontable.com/bower_components/handsontable/dist/handsontable.full.css">
<div id="example" class="handsontable"></div>
<button id="button">
  Server side columns
</button>

CSS

.handsontable .wrapped {
  width: 60px;
}

.handsontable .truncated {
  width: 60px;
  height: 13px;
  overflow: hidden;
}

.handsontable thead tr th {
  white-space: normal;
}

.handsontable thead tr th:not([colspan]) span {
  width: 100%;
  max-width: 95px;
}

JavaScript

var data = [{
    col0: 0,
    col1: 1,
    col2: 'A'
  },
  {
    col0: 0,
    col1: 1,
    col2: 'B'
  },
  {
    col0: 0,
    col1: 1,
    col2: 'C'
  },
  {
    col0: 0,
    col1: 1,
    col2: 'D'
  },
]

var columns = [{
    data: 'col0',
    readOnly: true,
  },
  {
    data: 'col1',
    readOnly: true,
  },
  {
    data: 'col2',
    readOnly: true,
  },
]


var container = document.getElementById('example');

var hot = new Handsontable(container, {
  licenseKey: 'non-commercial-and-evaluation',
  data: data,
  colWidths: 60,
  columns: columns,
  rowHeaders: true,
  colHeaders: true,
  nestedHeaders: [
    [{label: 'static column', colspan: 3 }],
    ['<div class="truncated">Col 0 very long column name</div>', 'Col 1', 'Col 2']
  ],
});

var button = document.getElementById('button')
  .addEventListener('click', function(event) {
    event.preventDefault()
    var serverSideData = {
      fields: ['Server Side Col 0 very long name', 'Server Side Col 1'],
      data: [
      	{col0: 0,col1: 1,col2: 3,ss0: 4,ss1: 5},
      	{col0: 0,col1: 1,col2: 3,ss0: 4,ss1: 5},
      	{col0: 0,col1: 1,col2: 3,ss0: 4,ss1: 5},
      	{col0: 0,col1: 1,col2: 3,ss0: 4,ss1: 5},
      	{col0: 0,col1: 1,col2: 3,ss0: 4,ss1: 5},
      ],
      columns: [
      	{ data: 'col0', readOnly: true },
        { data: 'col1', readOnly: true },
        { data: 'col2', readOnly: true },
        { data: 'ss0',  readOnly: true },
        { data: 'ss1',  readOnly: true },
      ]
    }
    hot.updateSettings({
      columns: serverSideData.columns,
      nestedHeaders: [
        [
        	{ label: 'static column',colspan: 3 },
        	{ label: 'server side', colspan: serverSideData.fields.length}
        ],
        [
        	'Col 0 very long column name', 'Col 1', 'Col 2',
        	...serverSideData.fields
        ]
      ]
    })
    
    hot.loadData(JSON.parse(JSON.stringify(serverSideData.data)))
    
    hot.render()
  });