question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[ui5-table-row] Table rows are invisible when added after initialization

See original GitHub issue

Describe the bug When ui5-table-rows are added to a ui5-table using Javascript, they are invisible.

To reproduce Steps to reproduce the behavior:

  1. Add a ui5-table to your HTML
  2. Add some ui5-table-rows 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 ui5-table-row-bug

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:closed
  • Created 4 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
pskelincommented, Oct 11, 2019

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.

setTimeout(function () {
	users = [{ name: "John", username: "john1995", email: "john@example.com"},
		{name: "Carl",username: "cookie123",email: "carl.smith@example.com"}];
}, 0);
+setTimeout(function () {
+	document.querySelectorAll("ui5-table-row").forEach(r => r._updateSlots());
+}, 0);

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

1reaction
ilhan007commented, Oct 10, 2019

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…

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found