search

CarlosNZ / json-edit-react

React component for editing/viewing JSON/object data
https://carlosnz.github.io/json-edit-react/
MIT License
183 stars 18 forks source link

Enable re-ordering of properties #68

Closed SanderKok01 closed 5 months ago

SanderKok01 commented 5 months ago

Hello,

I'd like to be able to re-order properties. Drag and drop one above the other. Is this possible?

CarlosNZ commented 5 months ago

This is not possible right now, and would probably add quite a bit of complexity to the component, so I'd have to carefully consider the best way to implement it.

It's a bit tricky, because strictly speaking object properties don't have an "order", and it's only through JS implementation details that key order is mostly preserved at all. (For example, if you save a JSON field as binary in a Postgres database, the order is completely ignored, and will be alphabetized on next read).

For now, the only way to change the order (other than deleting and re-adding keys) is to edit the JSON directly and move it around as text:

Screenshot 2024-06-12 at 5 50 20 PM
CarlosNZ commented 5 months ago

I've created an issue to consider key ordering more generally, so will definitely be thinking about it further: https://github.com/CarlosNZ/json-edit-react/issues/73

CarlosNZ commented 5 months ago

@SanderKok01, I've started playing round with a basic drag-n-drop. I should have something for you to try out next week some time. :)

CarlosNZ commented 5 months ago

You can now do basic drag-n-drop in v1.13.1: https://www.npmjs.com/package/json-edit-react/v/1.13.1

Let me know how it goes :)

SanderKok01 commented 5 months ago

Amazing, thank you!