Grid - Allow sorting by unknown columns

[probert94]

Describe your motivation

In our application we have predefined (complex) sort orders.
As our grid is fully customizable not all sorted columns must be visible to the user.
Unfortunately in this case, the number of the sort indicator is wrong and therefor misleading.

Describe the solution you'd like

I would like to be able to somehow show the correct numbers in the sorting indicators.
Possible solutions are:

• Allow sorting by unknown columns
• Allow customizing the sort indicator number
• Add all unknown sorted columns as invisible columns

Describe alternatives you've considered

I already tried adding an invisible column for all sorted columns but unfortunately they don't seem to affect the sort indicators.

Additional context

No response

[web-padawan]

In case if you are using vaadin-grid as a web component (and not Grid for Flow) you might want to override this method, which basically discards all the sorters that are not connected to the DOM (this is the case for hidden columns):

web-components/packages/grid/src/vaadin-grid-sort-mixin.js

Lines 174 to 176 in 08798b8

	_getActiveSorters() {
	return this._sorters.filter((sorter) => sorter.direction && sorter.isConnected);
	}

In Flow counterpart we explicitly added an override to prevent the grid web component from automatically excluding columns from sorting when they get hidden - see vaadin/flow-components#5817 for some context.

[probert94]

I am actually using flow but the hidden columns don't seem to affect the sorters.
Do they have to be visible at least once to affect the sorterts?

[web-padawan]

Thanks for clarification. If the column is hidden and never becomes visible, it doesn't get attached to the DOM at all, so there is no corresponding vaadin-grid-sorter element and no sorter-changed event that would be used by grid to add sorter.

[probert94]

Thank you for the clarification. As the logic is already there somehow, is there a possible workaround for flow by, for example, setting the "hidden" attribute manualy without using setVisible?

[web-padawan]

I'm afraid this won't be easy to workaround as hidden is actually used by the web component to prevent rendering cells:

web-components/packages/grid/src/vaadin-grid-column-mixin.js

Lines 624 to 628 in 08798b8

	__renderCellsContent(renderer, cells) {
	// Skip if the column is hidden or not attached to a grid.
	if (this.hidden || !this._grid) {
	return;
	}

[probert94]

Thanks for the clarification!