Example for Sorting Table Rows

[ZacharyMohler]

I added this package to my project with the goal of making a <table> element's rows sortable via drag and drop to change the priority of tasks in the list.

It is possible to implement for this use case but it's a little less than self explanatory due to the way tables decide what's going on with <tr>'s and <td>'s

initially, I thought <SortableObjects> would belong inside the <tbody> and each <tr> would belong inside a <DraggableObject>, but that screws up the table and smushes everything into the first cell because of the container that the component puts around its contents.

The valid template looks like this for my solution:

<SortableObjects @sortableObjectList={{this.model}} @sortEndAction={{this.sortEndAction}} @sortingScope="someScope">
    <table>
        <thead>
            <tr>
                <td>Column 1</td>
                <td>Column 2</td>
            </tr>
        </thead>
        <tbody>
            {{#each this.model as |dataObject|}}
                <tr>
                    <td>
                        <DraggableObject @content={{dataObject}} @overrideClass="sortObject" @isSortable={{true}} @sortingScope="someScope">
                            {{dataObject.id}}
                        </DraggableObject>
                    </td>
                    <td>
                        <DraggableObject @content={{dataObject}} @overrideClass="sortObject" @isSortable={{true}} @sortingScope="someScope">
                            {{dataObject.name}}
                        </DraggableObject>
                    </td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</SortableObjects>

It took some fiddling and I couldn't find a directly applicable example, so if others think that this might be useful to add as an example, I wouldn't mind coding it up. Perhaps a brief explanation in the readme as well.

It could also just be a me issue and no one else would've struggled with this, in which case, just let me know 😅