Ordering Keys in Key-Value

I don't have too much information to share, just that it appears that when attempting to drag and drop reorder the key's in a key value pair I'm currently using, it's not ordering them correctly whatsoever. It seems almost random.

This is the Key Value component and how it's ordering itself:


This is partially the order I want it to be in:


Keep in mind there also is no rhyme or reason for how I want my stuff ordered, just based on how I find it visually appealing.

If you could post the JSON behind that it would be helpful, but the question I have is why are you using a key/value component and not another component such as table that can easily be sorted?

Because this query should only return one record 99% of the time it runs. The query also returns a lot of columns for that data, and so it makes more sense presentation wise to use a component that displays using height rather than width.

This isn't very presentable and easy to derive information from:

Anyway, the table fills from query results. Regardless of if I select all from the table, or try and pick and order the columns in the select, its the same result. The underlying data doesn't seem to be the issue; the component isn't working as intended.

The way the component is supposed to work should allow for the key-value component to be sorted just as easily as any other component that supports sorting, as it is literally just a drag and drop interface... that currently doesn't work.

You can hide the additional columns in the table as they are not needed... but if you can paste a simple example of the one record you have the screenshot of I will try to replicate and solution on my end.

Yeah, I do utilize hiding columns, but this certainly isn't what I'm referring to.

I unfortunately can't really post a full records worth of data, as there is a lot of information in there I'm sure my company would prefer I keep private.

I appreciate you looking into it. I would imagine just dropping a key-value component and then filling it with data from a random query and then attempting to reorder would reproduce close enough. I dunno though, this whole thing has me confused at this point.

I would adjust my initial query that delivers the data and add an order by clause based on the column you want to order by and then add either DESC or ASC after it.

That doesn't change anything. It doesn't seem to be the data itself, the component just simply isn't working right. No matter which column I drag to the top, there are always a few random columns above it. And when I move one of those columns further down, it just gets replaced by another random column.

Sorry but I don't understand what you are trying to accomplish.
Using the key value component doesn't allow for reordering.

The table component allows you to drag columns (In the Inspect panel) up or down which will then change the order from left to right accordingly when displaying data in the table component.

The table component's column order is not connected to the key value component's order.

The key value component has that exact same functionality. Reference my second screenshot in my original post. You can drag those to reorder them, and that order is supposed to be reflected in the component.

Ok. I didn’t see that but that’s good to know perhaps it’s a bug? Maybe retap this post as a bug. Sorry but cannot test at the moment. Apologies for overlooking that aspect of it. Best of luck. I will post again when and if I find a solution.

It's all good, I appreciate the assistance. It seems to be a bug that is only occurring when the application is in edit mode, meaning that when you reorder while editing the app, the changes aren't reflected in the component, however they are reflected in the live version.

It actually works for me correctly when in edit mode. What version are you running? Perhaps log out and then log in again? I am on cloud version 2.103.1

Yeah, same version, same issue. I'm working around it though, so it's just a slight annoyance rather than a stoppage at the moment.

Hey @shane_d_gray and Scott :slight_smile:

Weird! This was definitely a bug found in ~2.82, but we've fixed it since then. I also can't seem to reproduce the issue (it's working for me), but will keep trying. Out of curiosity so I can test with the right configs, what browser/OS are you on?

I seem to be having the same issue Shane was having. I can reorder the keys in the inspect panel and they do move around on the table when I do but only kind of relative to each other, not in the order shown in the panel. I made it so that the value is just the index of the data coming from the query using an order by asc clause.

Here are the screenshot of the order.
The app is running version 2.122.0.

Hey @Nick_Lamb! We definitely should have fixed this bug by now :sweat:

My key value pair is ordering properly it seems. Is it still broken for you? Mind if I step into your app to take a look? If so, the name of your app would be most helpful :pray:

@victoria Yes, the app is called ClientSettings - HT. You can search for the client demo-ht using the search at the top and navigate to the "instances metadata" tab in the container below.

Having same issue. Key Value ordering does not match what I have set in the sidebar. Running Firefox 114 on macOS. Same bug in Chrome 114 macOS.

Thank you for granting access to your app, Nick, and thank you for letting me know you're facing the same issue, @j_kearl! I filed a bug for this and will keep this thread updated accordingly :pray:

1 Like

Hello @victoria! Still seeing this issue, I'm wondering if there's been any progress on this?