[VUE 3] Dynamic column configuration / reactive data

[awacode]

Dear Bryntum team,

how can i achieve dynamic column configuration?

My customers application is a vue application and i need to display some database tables based on user selection. So i have a form, where the user can select the table name of the table he want to display and based on the selection bryntum grid is used to display the table underneath.

As the table names change reactively also the column configuration needs to change reactively as each database table looks different.

I got this warning from bryntum:

BryntumGridComponent development warning!
"columns" is a static config option for component constructor only. No runtime changes are supported!

How would you recomment to achieve this use case with vue and reactive table data (rows & columns)

Best regards

[mats]

It should work, just a minor tweak needed from our side (will be fixed in next release). Until then try changing to doing:

grid.columns.data = [{ text : 'foo' }]

[awacode]

at the moment i am using property binding as shown in the documentation

<bryntum-grid
v-if="gridConfig"
ref="grid"
v-bind="gridConfig"
:readOnly="readonly"
/>

the gridConfig is reactive and as soon as its values (column & data) change the binding gets updated with the new data. That leads to the mentioned warning.

So you mean i need to change the implementation, not to use prop binding but to use javascript assignment as you posted.. until the next release and then go back to property binding?
Is it only a warning or does it lead to functional problems? if it's only the warning but the grid is updating accordingly then i would wait for your fix instead of changing the implementation for a temporarily time. If it blocks functionality i need to go this way

[marcio]

Hey awacode,

We recommend changing to the approach that Mats suggested, mostly because we cannot guarantee that all the functionalities will work as expected.

We had cases where there was no behavior change, even with the warnings, but also had cases where that led to unexpected behavior.

[awacode]

but that mean never to set gridConfig over the prop, right? but aren't the props required for the bryntum grid component?

Do you have an example of VUE 3 Usage not setting the columns & data over props but the other way?

[marcio]

Instead of changing the gridConfig object, you can change it using the grid ref.

this.$refs.grid.instance.value.columns.data = // new value

[awacode]

i managed to get

this.$refs.grid.instance.value.columns.data = // new value

running. What is the equivalent to replace store data?

[awacode]

i tried

this.$refs.grid.instance.value.store.removeAll();
 this.$refs.grid.instance.value.store.add(rows);

but then i get this error on console:

[mats]

No need to removeAll first.

Like so:

this.$refs.grid.instance.value.store.data = // new value

[awacode]

When doing it that way, i get the correct number of rows, but they are empty: