[8.0.0] Column Order is not correctly applied if the first data source row is less than number of columns

#1

I have an issue reproducible in HT 3.0 ahead where in case the first row in the data has less attributes that the table columns, the column order is not applied correctly and in some cases there is a duplication of columns.

If instead I load the data after the table was created, there is not duplicated column, but the order is not applied:

Here are my settings:

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, 1, 4, 2, 3],
  manualColumnResize: [50, 50, 100, 100, 150]
});

Here is the JSFiddle: https://jsfiddle.net/gvazq82/jpbf7yh4/

Let me know if there is any way to fix the issue.

#2

Even in the second case, manualColumnMove is not applied. Column headers are not matching your specified order. Looks like there is some issue with manualColumnMove?

#3

Simple columns and array data https://jsfiddle.net/jsto5hdk/ (works as expected).

Thank you for sharing, I will investigate this case. It looks like updating to 6.2.2 doesn’t change a thing.

#4

Hey @gabriel_vazquez

it looks like the width for the columns is added based on the physical index instead of visible one, plus, sometimes it duplicates the data https://jsfiddle.net/handsoncode/ksfc38t6/
I will look into this a bit closer and share my thought as soon as I discover the pattern

#5

Hey @dev2

I will let you now as soon as the issue gets solved. I have reported it at https://github.com/handsontable/handsontable/issues/4470

#6

Yes, as of version 3.0, that has been always the assumption I had on column resize plugin, the initial size is based on column index and not in visible columns;

Also, this might help, but @tkthompson made a local patch to the “countSourceCols” function to fix the column resize issue, there seems to happening that for some reason the size of the resources is been taken based on the first row data.

I updated the example with the patch, it is commented that you can see the difference:
https://jsfiddle.net/gvazq82/jpbf7yh4/

Here is the code:

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;
  };
}
#7

Thank you for sharing the updates. We’re also open for pull request if you are willing to send one over.

#8

Hey All,

https://github.com/handsontable/handsontable/issues/4470 just got solved in v 8.0.0-beta1

Below are the resources

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

And this is how you can download the beta from NPM

npm i handsontable@beta

I appreciate any feedback. Thank you.

1 Like
#9

Thanks @aleksandra_budnik Yes, seems this is working, at least in the JSFiddle demo I created, once the version is officially released, I will upgrade my application and let you know in case of any error.

#10

Hey Gabriel,

We’re gathering feedback from the users who test 8.0.0-beta1. Once we decide that we have tested everything and the feedback is positive we will update to stable 8.0.0.

It’s hard to tell how long it will take but I wouldn’t predict more than a month.

There’s only one issue that we found https://github.com/handsontable/handsontable/issues/6478 that would block our demos on Edge but besides that, the feedback is pretty satisfying.

1 Like