[grid] order table columns by index

[timb086]

Describe your motivation

As a vue or angular developer it is not common to create elements in Javascript and/or remove them from the dom tree and add again later. So there is an additional functionality needed in order to reorder columns while still beeing attached to the parent. In a MVVM Pattern the position of the column should be changeable by bound model values.

This demonstrates the desired behaviour currently beeing implemented with an angular component library:

Describe the solution you'd like

Add an additional, optional index property in grid column, which positions the table column. Default should be -1, where the order is taken over from the current grid columns index in childNodes.

Describe alternatives you've considered

No response

Additional context

This should only position the generated table column, not the grid column added by the developer, as this would detach it from the flow pendant when using Java.

[sissbruecker]

In a MVVM Pattern the position of the column should be changeable by bound model values.

Is your whole grid, including column definitions, data-driven? That would give an opportunity to have your component just render the columns in the respective order defined in your model then.

Otherwise it's a bit hard to imagine how you have both:

• Columns defined in markup
• Column order defined in a model

Some example code would help with understanding the use case.

[timb086]

As said, this is how e.g. templating works in vue: https://vuejs.org/guide/essentials/template-syntax

Having a model value for the grid position:
const nameColumnIndex = ref(-1);

One would write a reordable column like this then (assuming there is a property called index):
<vaadin-grid-column header="Name" path="name" v-model:index="nameColumnIndex">

It could then be changed using drag and drop or a dedicated column reordering dialog by setting
nameColumnIndex = 5

---

Same goes for Angular. It is not possible to use HTML or create the components using document.createElement.
Only way that could be possible is creating VNodes manually, but that's quite hacky: https://vuejs.org/guide/extras/render-function
But again, it's not common to use plain Javascript in the views. We would then need to get the HTML element representation for this vue node and move it in the dom tree. This would basically be equivalent to moving the column in a Javascript invocation when using Vaadin flow. Your (backend) representation would then be broken.