Sort

Feature

Allows sorting of grid by clicking (or tapping) headers, also displays which columns grid is sorted by (numbered if using multisort). Use modifier keys for multisorting: [Ctrl/CMD + click] to add sorter, [Ctrl/CMD + Alt + click] to remove sorter. The actual sorting is done by the store, see Store.sort().

// sorting feature is enabled, no default value though
const grid = new Grid({
    features : {
        sort : true
    }
});

// use initial sorting
const grid = new Grid({
    features : {
        sort : 'name'
    }
});

// can also be specified on the store
const grid = new Grid({
    store : {
        sorters : [
            { field : 'name', ascending : false }
        ]
    }
});

// custom sorting function can also be specified on the store
const grid = new Grid({
    store : {
        sorters : [{
            fn : (recordA, recordB) => {
                // apply custom logic, for example:
                return recordA.name.length < recordB.name.length ? -1 : 1;
            }
        }]
    }
});

For info on programmatically handling sorting, see StoreSort:

const grid = new Grid({ });
// Programmatic sorting of the store, Grids rows and UI will be updated
grid.store.sort('age');

Grid columns can define custom sorting functions (see Column.sortable). If this feature is configured with prioritizeColumns: true, those functions will also be used when sorting programmatically:

const grid = new Grid({
    columns : [
        {
            field : 'age',
            text : 'Age',
+           sortable(lhs, rhs) {
+             // Custom sorting, see Array#sort
+           }
        }
    ],

    features : {
        sort : {
+            prioritizeColumns : true
        }
    }
});

// Sortable fn will also be used when sorting programmatically
grid.store.sort('age');

This feature is enabled by default.

See also

• Group - Grouping feature
• sorters - Programmatic sorting