Ordering Keys in Key-Value

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?

Hey @kiano! Ack, I'm sorry to hear you're still running into this. We haven't prioritized this just yet, but I'll let the team know you checked in :+1:

Hi @Victoria – I'm also seeing this issue, and it's a bit of a pain – is it in the queue to be fixed?

Once the data is over a certain size, the key-value component starts to loop back around to add new rows to the top, and then with sufficient data it starts to insert in different places as it iterates over the object.

Should be easy to replicate – capture attached of the behaviour on a manual data entry, same behaviour is seen when it's being populated from a query.

(This happens without making any sidebar dragged adjustments to the key order – for my app, my data order is set in the GraphQL query).

retool_key_value_issue

2 posts were split to a new topic: Using the Key Value component vs a Table component

6 posts were split to a new topic: Transposing columns using postrgesql - displaying data vertically rather than hortizontally

Update! :tada: We're releasing a new Key Value component (check out our announcement post!), which we are planning on rolling out to Cloud starting this week. This new component should respect the original order of the data by default and I hope it solves all the sorting issues mentioned in this thread :crossed_fingers: Thank you all for all your patience here.

1 Like