AngularJS ui-sortable on a table in Umbraco

I was building a custom dashboard recently and needed to give the client the ability to change the sort order of how attributes were displayed on the website and it turned out to be a lot easier than I was expecting.

From the start I wanted it to work just like the reorder functionality on Document Types:

Umbraco Reorder

After a bit of digging, it seemed that this was using ui-sortable and is automatically included in Umbraco. You can find it in the folder \Umbraco\lib\angular\

This meant that I could attach ui-sortable to the <tbody> element of my table and assign the attributes data to the ng-model:

<table class="table">
    <thead>
        <tr>
            <th scope="col">Sort Order</th>
            <th scope="col">Attribute Name</th>
        </tr>
    </thead>
    <tbody ui-sortable ng-model="attributes">
        <tr ng-repeat="row in attributes" id="{{row.id}}">
            <td>{{row.sortOrder}}</td>
            <td>{{row.attributeName}}</td>
        </tr>
    </tbody>
</table>

Then, just like magic, you can drag and drop the rows in the table!

As the attributes are allocated to the ng-model of the table body, angular keeps the object in sync with the order displayed and then I could save that new order back to the database with ease.

AngularJS ui-sortable on a table in Umbraco