Content of <scale-data-grid> not rendered even though the data is there.

[Lumixnick]

Scale Version The scale version you are using. "@telekom/scale-components": "^3.0.0-beta.116"

Framework and version "vite": "^3.2.2" "vue": "^3.2.41"

Current Behavior In my app I use a scale-data-grid into a scale-tab-panel (with scale-tab-header).

If I use the scale-data-grid alone in a Component, it works properly ( also with localStorage of the browser) . The rows-property is bind on a ref variable in the script.

If I arrange the scale-data-grid into a scale-tab-panel, it can be filled properly , but it would be empty after refresh . The data is stored into the localStorage.

What’s wrong: If the app is initialized, the data-grid cannot be filled with the button – dialog, it must be previous cleared (with the button clear table). This is always independent from tab-panel. When the string is filled into the data grid and I update with the stackblitz-refresh-button in the web container, the scale-data-grid looks empty, even if you see that the localStorage is filled and read onMounted. In onMounted I also set the refVariable. If i'm looking into the component in my browser, i see that the property is set and available, but the data-grid displays nothing.

onMounted: Reading from localStorage an fill into the reflective var. if (localStorage.getItem('gitHashesTable') != null) { let value = JSON.parse( localStorage.getItem('gitHashesTable') as string ); console.log('ServiceTable:onMounted:', value); tableRowsRef.value = value; } WA: If i use In the onMounted function these timeout about 500 ms, than the component works properly. if (localStorage.getItem('gitHashesTable') != null) { let value = JSON.parse( localStorage.getItem('gitHashesTable') as string ); console.log('ServiceTable:onMounted:', value); setTimeout(() => (tableRowsRef.value = value),500) } Look at the screenshot:

Expected Behavior The scale-data-grid should always represent what is bound to the :rows property, but without WA.

Code Reproduction https://stackblitz.com/edit/vitejs-vite-46ppeu?file=src%2FApp.vue

Desktop (please complete the following information):

• OS: iOS Venutra 13.1
• Browser Chrome: Version 107.0.5304.110 (Offizieller Build) (x86_64)

Additional context

[Squallkae]

We use Vue with script setup tag, we made it work by setting the fields object during onMounted with ref reference, and the rows directly on the grid.

<scale-data-grid
  ref="srgrid"
  :rows="getPreviousDataForScreenReader">
...

const srgrid = ref(null)

onMounted(() => {
  srgrid.value.fields = fields
})

[Lumixnick]

Hi @Squallkae , this solution works only in a flat scale-data-grid, without modal dialogue. But we need this dialogue, because the data comes from another system and we also need user interaction. And if you look at the stackblitz example, you can see that we use this vue3 mecanism (tableRowsRef).