My client would like the ability to reorder rows easily in a table, I was looking into using the “Reorderable List” component, but there is limited documentation on it. Can someone help provide some documentation on this component?
It seems like you can provide any array of strings and then be able to reorder them and submit that reordered string array to a query.
For example sake, let’s say I have rows of my favorite movies and in each row is rank_id (where rank_id is an integer to be sorted from lowest to highest, e.g. my number 1 ranked movie is Repo Man), release_year, director, and movie_title. Do you recommend displaying the whole row as JSON or something so they can see the content they’re reordering?
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.
@justin - thanks very much for the super detailed response and creative ideas! I think I am going to use something similar to the prototype you added here vs the reorderable list. I’ll let you know when I finally implement!
Hey everyone - working on this... Question though - in the component, there is also a field Array of HTML / Markdown to render in place. What is this meant to do? I can kind of guess, but I'd rather not... Thanks!
Hey @gilcrest (sorry for the delay here) and @anthony (thank you for reopening this)!
You can map over the reorderablelist3.value array to apply HTML or Markdown to each list item Let me know if you have any questions getting this setup!
You could likely have the values ("Array to order") come from a temp state value (docs on temp state here), and then have a button run a query that changes the temp state. Otherwise, we don't have any native onClick events in Retool (yet!)
Apologies about the lack of documentation: we indeed do need to add some more info about this component to our 
Let me know if you have any questions getting this setup!
