Rows not populating in Key Value component

First Row

Second Row

As seen in the screenshot, I am using a Key Value component inside of a List View component to render the combined property of each of the objects inside of the transformer1 value array (2 items in this example). Only the first Key Value component is rendering the content (request_flight_start & request_flight_end), and the second Key Value component is not rendering anything.

Expected behavior: Second Key Value component to render (deal stage: "Proposal submission -> Closed won")

Hey @ray_wu!

That's odd :thinking: I'm not noticing anything off in the screenshots you posted. Would you mind also posting a picture of what keyValue1 looks like expanded in the left panel of the editor so that we can see the data property for each row?

Thanks for replying @Kabirdas :slightly_smiling_face:

Most certainly - I renamed transformer1 to formatLogs, but the logic remains the same.

keyValue1 panel

formatLogs.value Sample

The issue seems to be inconsistent too - this time, as you can see, the first Key Value component is not rendering data, but the second one is

Ah! That is certainly a bug and does reproduce on my end as well. I've filed a ticket and will let you know here as soon as it's resolved, thanks for surfacing this!

Would it be possible in the meantime to use separate components as a workaround? Is what you have in the screenshots the end goal or are you looking to do more with your listview?

So I actually attempted to replace the Key Value component with the Table component, but it looks like a similar issue is still occurring - except that it's only on the initial render. After a input change, it produces the desired output.

The issue this time seems to be on the List View component not being able to read the data from the transformer with an error in the console.

Sample original data

transformer (formatLogs)

Initial render

Console error

Desired output (after changing inputs)

To provide background context to the module - we're trying to build a change log list that renders a list of the fields that were changed for each log inside of a collapsible container component.

@Kabirdas I can also create a new ticket for the issue mentioned above if that is considered a separate topic :+1:

We don't actually support nesting tables in listviews - you can typically see that it's blocked when you try and drag one in. The fact that it's possible to place one inside a container that's inside a listview is actually a bug that the dev team is looking into fixing.

The key value component really does seem like the best solution here, though there are a couple other components that would show the data (e.g. json explorer and listbox) you might also be able to customize an HTML component to display what you're looking for as a workaround.

Okay got it. Thanks for troubleshooting - I will explore alternative solutions for our use case for the time being. Please keep me posted once the Key Value rendering bug is fixed :slightly_smiling_face:

Hey @ray_wu!

We recently pushed a fix for the Key Value issue with 2.96.0, can you confirm things are working on your end?

Hi @Kabirdas, thanks for following up! We have made updates to our data structure and no longer uses the key value component, so I am unable to verify for you. I will post to this thread if I do encounter the issue again :slightly_smiling_face:.