How to load all columns?

Tags: #<Tag:0x00007efc64711bc0>
#1

I’m using version handsontable pro 6.2.2.

I’m using afterGetColHeader method to load the columns, but the final columns only load after doing the horizontal scrolling. How do I load all columns?

#2

Hi @sidney.silva

You may use the viewportColumnRenderingOffset option. But that may degrade the performance of the application if you set the option to `countCols()’ so I recommend doing some testing. Maybe just slightly rising the offset level would be the best option for you.

#3

I made the adjustment below:
_instance.viewportColumnRenderingOffset = _instance.countCols();

But the final columns are still rendered in the DOM only when scrolling to the right.

#4

Can you share the logic you use for the afterGetColHeader hook I’d like to test the sam on my device.

#5

logic:

afterGetColHeader: (coordA, coordB, value) => {
if (value) {
this.setClassHeader(coordB, value, columns, colsToHide, $scope.type, $scope.lastColToHide, $scope.labels);
} else {
this.setClassHeader(coordA, coordB, columns, colsToHide, $scope.type, $scope.lastColToHide, $scope.labels);
}
}

private setClassHeader(th, value, columns, colsToHide, type, lastColToHide, labels) {
let totalHide;
if (type !== ‘comum’) {
lastColToHide = columns[colsToHide[colsToHide.length - 1]].data;
const tableHeader = value ? value.childNodes[0].childNodes[0].childNodes : [];
if (tableHeader.length > 1) {
if (tableHeader[1].classList.contains(‘header-separador’)) {
value.classList.add(‘title-separator’);
if (th === columns.length - 5) {
if (lastColToHide === ‘total’) {
totalHide = true;
value.classList.add(‘cols-fix-right’, ‘right-59’);
} else {
totalHide = false;
value.classList.add(‘cols-fix-right’, ‘right-139’);
}
}
}
} else if (tableHeader[0] && labels.indexOf(tableHeader[0].data) >= 0) {
value.classList.add(‘nested-header-title’);
} else if (columns[th] && columns[th].data === ‘total’ && !totalHide) {
value.classList.add(‘cols-fix-right’, ‘right-59’);
} else if (columns[th] && columns[th].data === ‘function’) {
value.classList.add(‘cols-fix-right’, ‘right-39’);
} else if (columns[th] && columns[th].data === ‘edit’) {
value.classList.add(‘cols-fix-right’, ‘right-19’);
} else if (columns[th] && columns[th].data === ‘delete’) {
value.classList.add(‘cols-fix-right’, ‘right-0’);
}
}
}

#6

Thank you for sharing the code.

The afterGetColHeader hook takes only 2 parameters, it means that your value is always undefined.

afterGetColHeader: (coordA, coordB, value) => {
...
}

docs reference: https://handsontable.com/docs/api/hooks/#aftergetcolheader

#7