Hello @gilcrest! Sorry for the delay, the Retool team has been enjoying a few days off Apologies about the lack of documentation: we indeed do need to add some more info about this component to our components reference.
To answer your question: the reorderable list component works exclusively through arrays, so you can provide an array you want to reorder and then access the re-ordered value via the reorderableList.value
property. If your data structure is closer to having a rank_id
value for each record in a DB or API, there's no clean way to use a "drag and drop" kind of feature in Retool; you could try this though:
- Display your data in a table
- Use the "default column to sort by" setting and choose the
rank_id
- Set up a "details panel" (a container with info about the row in text components)
- Use a dropdown component to reference the currently selected row's
rank_id
(or textinput if it's easier) - Hook up a query that updates a selected row's
rank_id
to the value in the dropdown - Run that query when you select a new
rank_id
from the dropdown, or on button click
Here's what a basic prototype of that might look like:
Alternatively, you can use the reorderable list component and display some data about the record in your data to make it clear what you're reordering. So if you have one row per name in your dataset, you could display the names from your data as an array (e.g. {{ query.data.name }}
) and then hook up a query to update your data based on how that array gets reordered in the component. Keep in mind that you can use the .value
property of the reorderable list to get an array in the order that's currently displayed in the component.
Let me know if either of these help!!