<p>Sure, I've had experience with two different types of sorting with <a href="https://github.com/engram-design/SuperTable/blob/master/supertable/resources/js/SuperTableInput.js#L32" rel="nofollow noreferrer">SuperTable</a> (check the link for associated JS).</p>

<p>If you're modelling the fieldtype after a table, you might like to use the <code>Craft.DataTableSorter</code> method. Its pretty restrictive to a table layout, and you'll need to give each <code>tr</code> element a <code>data-id</code>.</p>

<pre><code>Craft.FieldType = Garnish.Base.extend({
    sorter: null,

    init: function() {
        var $table = $container.children('.table');

        this.sorter = new Craft.DataTableSorter($table, {
            helperClass: 'editabletablesorthelper',
            copyDraggeeInputValuesToHelper: true
        });
    },

    addRow: function() {
        var $tr = $('&lt;tr/&gt;');
        this.sorter.addItems($tr);
    }
});
</code></pre>

<p>Or, for more abstract sorting, you can have more control using <code>Garnish.DragSort</code> - essentially a general drag and sort function. This is what Matrix uses.</p>

<pre><code>Craft.FieldType = Garnish.Base.extend({
    sorter: null,

    init: function() {
        var $rows = $container.children('.table-rows');

        this.sorter = new Garnish.DragSort($rows, {
            handle: 'tfoot .move',
            axis: 'y',
            collapseDraggees: true,
            magnetStrength: 4,
            helperLagBase: 1.5,
            helperOpacity: 0.9,
        });
    },

    addRow: function() {
        var $tr = $('&lt;tr/&gt;');
        this.sorter.addItems($tr);
    }
});
</code></pre>

CC BY-SA 4.0
2015-09-20T06:05:00.767Z
2018-06-12T23:42:53.823Z
2018-06-12T23:42:53.823Z
crawf
<p>I am working on a field type that is similar to the table field type. Is it possible to tap into Garnish for the sorting. I’ve tried a few things and have had no luck. Can anyone help me out?</p>

<sorting><garnish>
How can I use Garnish to sort?
# How can I use Garnish to sort?

(Asked by: username_0 on 2015-09-20)

I am working on a field type that is similar to the table field type. Is it possible to tap into Garnish for the sorting. I’ve tried a few things and have had no luck. Can anyone help me out?

**Tags:** sorting, garnish

---

## 1 answers

### Answer by username_1 on 2015-09-20. Score: 5

Sure, I've had experience with two different types of sorting with SuperTable (check the link for associated JS).
If you're modelling the fieldtype after a table, you might like to use the Craft.DataTableSorter method. Its pretty restrictive to a table layout, and you'll need to give each tr element a data-id.
Craft.FieldType = Garnish.Base.extend({
    sorter: null,

    init: function() {
        var $table = $container.children('.table');

        this.sorter = new Craft.DataTableSorter($table, {
            helperClass: 'editabletablesorthelper',
            copyDraggeeInputValuesToHelper: true
        });
    },

    addRow: function() {
        var $tr = $('');
        this.sorter.addItems($tr);
    }
});

Or, for more abstract sorting, you can have more control using Garnish.DragSort - essentially a general drag and sort function. This is what Matrix uses.
Craft.FieldType = Garnish.Base.extend({
    sorter: null,

    init: function() {
        var $rows = $container.children('.table-rows');

        this.sorter = new Garnish.DragSort($rows, {
            handle: 'tfoot .move',
            axis: 'y',
            collapseDraggees: true,
            magnetStrength: 4,
            helperLagBase: 1.5,
            helperOpacity: 0.9,
        });
    },

    addRow: function() {
        var $tr = $('');
        this.sorter.addItems($tr);
    }
});


---

