Handsontable example

HTML

<script src="https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div>
  <button type="button" id="btn1">
  Delete widths
  </button>
</div>
<div class="parent1">
  <div id="container"></div>
</div>

CSS

#container {
  width: 450px;
  height: 170px;
  overflow: auto;
}

JavaScript

var container = document.getElementById('container'),
  btn1 = document.getElementById("btn1");

function txt() {
  return 'Abc def ghi jkl mon pqr stuv wxyz';
}

function row() {
  return [txt(), txt(), txt(), txt(), txt(), txt(), txt(), txt(), txt(), txt()];
}

function data1() {
  return [row(), row(), row(), row(), row(), row(), row(), row(), row(), row()];
}

container.hot = new Handsontable(container, {
  data: data1(),
  minCols: 10,
  minRows: 10,
  columns: Array(10).fill({ width: 75 }),
  colHeaders: true,
  manualColumnResize: true,
  beforeValueRender: function(value, _cellProperties) {
    var TRUNCATE_LENGTH = 15;
    if (value.length > TRUNCATE_LENGTH) {
      return value.substring(0, TRUNCATE_LENGTH) + '...';
    } else {
      return value;
    }
  },
});

function btn1Click() {
  var newColumns = Array(10).fill( {} );
  container.hot.updateSettings( { columns: newColumns } );
  btn1.setAttribute("disabled", true);
  }

document.getElementById("btn1").addEventListener("click", btn1Click);