[ui5-table-row] Table rows are invisible when added after initialization
See original GitHub issueDescribe the bug
When ui5-table-row
s are added to a ui5-table
using Javascript, they are invisible.
To reproduce Steps to reproduce the behavior:
- Add a
ui5-table
to your HTML - Add some
ui5-table-row
s to the table using Javascript
Isolated example Since Code Sandbox is not working with rc.3, I created a repo with contains a minimal example: https://github.com/brodo/ui5-web-components-table-row-bug
Expected behavior The rows should be visible
Screenshots
As you can see in the screenshot, the rows are there, they are just invisible. If I add divs instead of ui5-table-rows they are visible.
Context
- UI5 Web Components version: 1.0.0-rc.3
- OS/Platform: Mac
- Browser (if relevant): Tested Firefox and Brave
- Other information: this might have been introduced when fixing #764
Affected components ui5-table-row
By the way, I use Svelte for my app and I encountered this bug when I updated to rc.3 and all my tables where gone…
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
Why are my rows not visible after being set to visible?
Try to change your code to use Style["display "] = "table-row"; instead of Visible = true;. You say that in code behind rows...
Read more >Unable to hide subform in table cell dynamically
Problem 1. if the subform is hidden first row, it is hidden in all rows of table, where conditionally it should get visible/invisible....
Read more >sap.ui.table.Table - API Reference - Demo Kit - SAPUI5 SDK
The column, by which the table is grouped, is not visible. It will become visible again only if the table is grouped by...
Read more >@ui5/webcomponents: Versions | Openbase
framework: add custom theme support for external CSS (#5887) (c7e2668) ... ui5-table-row: fix prevent SPACE key within inputs (f891e9d), closes #4365 ...
Read more >Is it safe to re-sequence table columns using invisible colu...
Is it safe to change order of columns in a production environment, following the ... Our plan is to add an invisible column...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi @brodo,
thanks for the beer offer, we might return it for all the good issues you are reporting 😃
I found the bug (not sure it was introduced recently, must be the way Svelte creates the DOM). Anyway, our base class does not detect properly that the cells are added to the rows and the rows are effectively empty.
Until we have a properly tested solution (I made a fix that works but don’t want to rush it), here is a workaround you can apply in your application to get the table working until the fix is ready.
Basically just call the private _updateSlots method on each ui5-table-row after it is created by svelte (you might need to adjust the timeout, 0 worked for me but you can increase it just in case). I also changed the setImmediate to setTimeout, are you using a polyfill for that?
Regards, Petar
Hello @brodo
thank you for reporting and creating a repo to reproduce the issue.
What we found is that you have 3 columns, but you are building rows with 2 cells, which causes a JS error (the 3rd missing cell is ‘undefined’).
If you remove the 3rd column or provide a 3rd cell for the row, it will work fine.
Still, we have to provide better solution for this case…