Column hidden can cause out of sync indexes

[ghiscoding]

@6pac when you introduced the hidden property for Column in PR #765, was your intention to skip the DOM element creation (column headers, cells) or was it to hide them (display: none)? The reason I'm asking is because I was trying to troubleshoot why there's an offset in the column headers in the grid that you created with hidden, as you can see below the hidden works correctly for the "Duration" column but it doesn't work well with the "Finish" column, it looks like the cell column is not created but the Finish header stays there. So I thought that I simply had to skip the header creation for when hidden is true like the code below

if (!m || m.hidden) { continue; }

SlickGrid/src/slick.grid.ts

Lines 1614 to 1619 in ffbb335

	for (let i = 0; i < this.columns.length; i++) {
	const m: C = this.columns[i];
	const headerTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerL : this._headerR) : this._headerL;
	const headerRowTarget = this.hasFrozenColumns() ? ((i <= this._options.frozenColumn!) ? this._headerRowL : this._headerRowR) : this._headerRowL;
	const header = Utils.createDomElement('div', { id: `${this.uid + m.id}`, dataset: { id: String(m.id) }, role: 'columnheader', className: 'ui-state-default slick-state-default slick-header-column' }, headerTarget);

but this brings other problems, there are a few (many) areas of SlickGrid that relies on the column index by using for loops, including some sections that read the DOM and expect the DOM elements to be at a certain index and if we skipped the header creation then these index become out of sync. For example, the code below.

SlickGrid/src/slick.grid.ts

Lines 1900 to 1908 in ffbb335

	const children: HTMLElement[] = this.getHeaderChildren();
	for (let i = 0; i < children.length; i++) {
	const child = children[i];
	const handles = child.querySelectorAll('.slick-resizable-handle');
	handles.forEach((handle) => handle.remove());
	if (i >= this.columns.length || !this.columns[i] || this.columns[i].hidden) {
	continue;
	}

So I'm not really sure on how to fix these problems. The heavy use of for loop with indexes has some benefits, the biggest of them all is performance, if we switch to for..of then there's a significant perf decrease. So what was your intention with this new approach?

https://6pac.github.io/SlickGrid/examples/example-frozen-columns-and-column-group-hidden-col.html

[6pac]

The strategy used for hidden columns was to behave as if they were not in the column array at all (previously we would have had an external array containing 'all' columns and pruned the hidden ones out in a copy before passing in to the grid).
So the only thing to change would be the array indexes of the visible columns. We had an internal array of visbile columns: that can be used where the column index is needed.

I was worried about how this would affect things at the time, but with some careful tweaking, it all went quite easily.

Will have a look in the next day or so if you like.

[ghiscoding]

I don't know how to fix it, so go ahead if you can troubleshoot it. The example is the link above and the error is shown below, when you try to hide "Finish" then the data no longer shows it but the column header remains and it makes the data out of sync with the headers

https://6pac.github.io/SlickGrid/examples/example-frozen-columns-and-column-group-hidden-col.html