Handsontable Issue Order

Full configuration applied to HT.

by Gabriel Vazquez

HTML

<div>
  <div id="example1" class="hot handsontable htRowHeaders htColumnHeaders"></div>
</div>

CSS

</style><!-- Ugly Hack due to jsFiddle issue-->

<script src="https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/gh/handsontable/handsontable@release/8.0.0-beta.1/dist/handsontable.full.css">

JavaScript

function patchHOTCountSourceCols(tableInstance) {
  if (tableInstance._originalCountSourceCols) {
    return;
  }

  tableInstance._originalCountSourceCols = tableInstance.countSourceCols;

  tableInstance.countSourceCols = function countSourceCols() {
    var len = 0;
    var settings = tableInstance.getSettings();

    if (settings && settings.columns) {
      len = settings.columns.length;
    } else {
      len = tableInstance._originalCountSourceCols();
    }

    return len || 0;
  };
}

document.addEventListener("DOMContentLoaded", function() {

  const example1 = document.getElementById('example1');
  const headers = ['A', 'B', 'C', 'D', 'E'];
  const createColumns = () => {
    const cols = [];
    headers.forEach((header) => {
      cols.push({
        data: function(dataObject) {
          return dataObject[header];
        }
      });
    });
    return cols;
  };
  const data = [{
    A: "A1",
    B: "B1"
  },
  {
    A: "A2",
    B: "B2",
    C: "C2",
    D: "D2",
    E: "E2"
  }];

  const hot = new Handsontable(example1, {
    // data: data,
    colHeaders: function(id) {
      return `ID-${id}`
    },
    columns: createColumns(),
    rowHeaders: true,
    manualColumnMove: [0, 2, 1, 4, 3],
    manualColumnResize: [50, 50, 100, 100, 150],
  });
  // patchHOTCountSourceCols(hot);
  hot.loadData(data);
});