# Sorting line items (records) via drag-and-drop

**URL:** <https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388>\
**Category:** Custom Extensions\
**Created:** [March 9, 2023, 3:30pm UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388 "2023-03-09T15:30:46Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tom\_Keysers](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/tom_keysers/32/264_2.png) [@Tom\_Keysers](https://air.tableforums.com/u/Tom_Keysers)\
**Post date:** [March 9, 2023, 3:30pm UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/1 "2023-03-09T15:30:46Z")

</div>

(oh wow, honoured to start the first custom extension topic)

I am developing an extension to manage orders based on an ‘Orders’ table and a (linked) ‘Order Line Items’ table. My next objective is to allow line items to be re-ordered by the user via drag-and-drop.

I assume I can achieve this by adding a integer field to the table which gets updated by the drag event (?), but since this actually also is a native Airtable UI functionality and you can order records via drag-and-drop when your table/view isn’t sorted – I’m wondering whether someone knows anything of a custom order index being accessible or anything?

I’m guessing not, since I can’t find anything like that in the API docs…  
But maybe you have other ideas to achieve this other than the one I mentioned? Or experience with a similar feat and you’ve got a js library you’d like to suggest or something?

Thanks in advance!  
(And btw, I’m so glad I found this Discourse forum just now, because the new Airtable community thing truly isn’t it. Thanks guys!)

---

<div class="post-metadata">

**Author:** ![ScottWorld](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/scottworld/32/5_2.png) [@ScottWorld](https://air.tableforums.com/u/ScottWorld)\
**Post date:** [March 9, 2023, 3:49pm UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/2 "2023-03-09T15:49:30Z")

</div>

Welcome to the community, @Tom_Keysers! Glad to have you here! 😃

I actually don’t have personal experience with developing custom extensions, so unfortunately I don’t have an answer to your question — but I just wanted to welcome you here!

We do have several custom extension developers in our forums here — hopefully one of them will be able to chime in to help you out! 🙂

---

<div class="post-metadata">

**Author:** ![Kuovonne](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/kuovonne/32/17_2.png) [@Kuovonne](https://air.tableforums.com/u/Kuovonne)\
**Post date:** [March 9, 2023, 7:24pm UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/3 "2023-03-09T19:24:04Z")

</div>

Welcome!

I’ve written scripts that sort a linked record field based on how a user drag-and-drops to arrange the child records in the linked table. The main reason why I didn’t turned it into a marketplace extension is because I didn’t have a solution that I liked in case some of the child records were filtered out of the current view. I have a few ideas, such as sorting those last or warning the user and not performing the sort, but it takes time to work out those kinks and time is always in limited supply.

I have also written a [script](https://kuovonne.gumroad.com/l/AirtableScript-SortLinkedRecords) and [marketplace extension](https://airtable.com/marketplace/blk5K4tCyusN17DCU/sort-linked-records) for sorting linked records based on a field in the child record, such as a date field or a numeric field.

---

<div class="post-metadata">

**Author:** ![Tom\_Keysers](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/tom_keysers/32/264_2.png) [@Tom\_Keysers](https://air.tableforums.com/u/Tom_Keysers)\
**Post date:** [March 10, 2023, 10:26am UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/4 "2023-03-10T10:26:05Z")

</div>

> [@Kuovonne](#):
>
> scripts that sort a linked record field based on how a user drag-and-drops to arrange the child records in the linked table

Does that mean there is a way to programmatically get the “custom order” index of records? Because that’s essentially what I’m looking for.

So, just to be extra clear (because maybe I wasn’t): I am talking about letting users sort line items (which are records) via drag-and-drop purely through the custom extension I’m developing. Per this screenshot:  
 ![Screenshot 2023-03-10 at 11.13.18](https://canada1.discourse-cdn.com/flex029/uploads/tableforums/original/1X/ea7b29634a2d8e254ea7157418aa5f16f1ce4d24.png)  
So this is mainly a UI and react related matter, but since there is the “native” functionality of custom sorting records in Airtable, I was hoping to be able to use that data instead of implementing an extra integer field to store and reflect the sequence/index that users made in the custom extension via drag-and-drop. But I’m afraid Airtable has never opened the “custom order” index of records in any API…

---

<div class="post-metadata">

**Author:** ![Kuovonne](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/kuovonne/32/17_2.png) [@Kuovonne](https://air.tableforums.com/u/Kuovonne)\
**Post date:** [March 10, 2023, 11:25pm UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/5 "2023-03-10T23:25:13Z")

</div>

> [@Tom\_Keysers](#):
>
> Does that mean there is a way to programmatically get the “custom order” index of records? Because that’s essentially what I’m looking for.

The order of the records in the view is inherent in the view. When you select the records in a view without specifying a different sort, you get them in view order.

> [@Tom\_Keysers](#):
>
> am talking about letting users sort line items (which are records) via drag-and-drop purely through the custom extension I’m developing.

If you want drag-n-drop in your extension, there are react libraries for drag-and-drop. I don’t recall exact names but I remember that there were several to pick from.

---

<div class="post-metadata">

**Author:** ![Tom\_Keysers](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/tom_keysers/32/264_2.png) [@Tom\_Keysers](https://air.tableforums.com/u/Tom_Keysers)\
**Post date:** [March 13, 2023, 4:18pm UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/6 "2023-03-13T16:18:17Z")

</div>

> [@Kuovonne](#):
>
> The order of the records in the view is inherent in the view. When you select the records in a view without specifying a different sort, you get them in view order.

Yess exactly, this “view order” is actually what I was digging for. Would be cool if it was open to the API, but apparently isn’t.

Meanwhile I’ve got it working using the method mentioned – using an extra field to store the record index and html5’s native drag-and-drop support.

Thanks for thinking along @Kuovonne!

---

<div class="post-metadata">

**Author:** ![Kuovonne](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/kuovonne/32/17_2.png) [@Kuovonne](https://air.tableforums.com/u/Kuovonne)\
**Post date:** [March 14, 2023, 2:42am UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/7 "2023-03-14T02:42:19Z")

</div>

> [@Tom\_Keysers](#):
>
> Would be cool if it was open to the API, but apparently isn’t.

What do you mean that it isn’t open to the API? You get the view order when you select the records in the view: `view.selectRecordsAsync()`.

---

<div class="post-metadata">

**Author:** ![Tom\_Keysers](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/tom_keysers/32/264_2.png) [@Tom\_Keysers](https://air.tableforums.com/u/Tom_Keysers)\
**Post date:** [March 14, 2023, 7:27am UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/8 "2023-03-14T07:27:39Z")

</div>

Yeah but you can’t edit (and store) it, right?

EDIT: I’m talking about the order (or index, if you will) of a record in a certain view as an editable property of the record model.

---

<div class="post-metadata">

**Author:** ![Kuovonne](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/kuovonne/32/17_2.png) [@Kuovonne](https://air.tableforums.com/u/Kuovonne)\
**Post date:** [March 14, 2023, 3:58pm UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/9 "2023-03-14T15:58:04Z")

</div>

> [@Tom\_Keysers](#):
>
> Yeah but you can’t edit (and store) it, right?

Correct. You cannot _edit_ the sort order of a view directly. You can only edit field values, which in turn can be used by the sort defined for the view. And you cannot programmatically define the sort for a view.

You could store the sort order of a set of records, but I’m not sure what benefit doing so would have. The actual sort order could change at any moment.

---

<div class="post-metadata">

**Author:** ![Tom\_Keysers](https://yyz1.discourse-cdn.com/flex029/user_avatar/air.tableforums.com/tom_keysers/32/264_2.png) [@Tom\_Keysers](https://air.tableforums.com/u/Tom_Keysers)\
**Post date:** [March 15, 2023, 10:48am UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/10 "2023-03-15T10:48:52Z")

</div>

> [@Kuovonne](#):
>
> You could store the sort order of a set of records, but I’m not sure what benefit doing so would have.

Indeed, without being able to also manipulate that sort order it would be useless.

But so meanwhile solved using a new field which holds an index integer which is being manipulated and used to sort on.

---

<div class="post-metadata">

**Author:** ![SteveH](https://avatars.discourse-cdn.com/v4/letter/s/5fc32e/32.png) [@SteveH](https://air.tableforums.com/u/SteveH)\
**Post date:** [August 10, 2023, 10:21pm UTC](https://air.tableforums.com/t/sorting-line-items-records-via-drag-and-drop/388/11 "2023-08-10T22:21:52Z")

</div>

Kuovonne is right, all you have to do to reorder the line items is save the linked record id values in the new order created after the drop event, overwriting the old order. Ie the linked record ids are the index.  
[link to page in api reference](https://airtable.com/developers/extensions/api/FieldType#MULTIPLE_RECORD_LINKS)
