Bryntum Support Forums

Hello,
I would like to know whether there is a way to keep x top rows (2 or 3) always at the top - regardless of the sorting (either default/initial sorting) or sorting based on user clicking on the column header.

We would like to have always a few rows "sticked" to the top - in other words they should be unaffected by sorting.

Edit:
Currently I dealt with this issue by specyfing custom sorting function on column (sortable) which treats those elements a bit different. The only problem is that the default/initial sorting does not seem to use this function (even though I set the priorititzeColumns setting to true).

Thank you for help!

When you say "initial", do you mean sorting that comes from state?

Because state cannot store sorters with a custom sort function.

I resolved my problem by adding the custom function to the sorters array to override the default sorting. There are two different ways to sort - default sorting and sorting based on a custom sortable function set on the column level.
By initial, I meant the sorting applied on the first render (without the user interaction - clicking on a header).

If there is a more straightforward way - then please let me know. I will leave that - it may help someone else.

sortByStartDate - this is a custom sort function that takes care of keeping certain elements always at the top. This is how I achieved "freezing" the position of specific rows when sorting is applied.

This can be solved by overriding the createSorterFn on store.

Example below is tested in this demo https://bryntum.com/products/grid/examples/basic/
It will put the ones where age is 14 always on top.

class MyStore extends Store {
    createSorterFn(sorterConfigs) {
        const originalSorter = super.createSorterFn(sorterConfigs);

    return (a, b) => {
        if (a.age === 14 || b.age == 14) {
            return (a.age === 14 ? -1 : 1);
        }
        return originalSorter(a, b);
    }
}
}

new Grid({
    ...
    store : new MyStore({
        data    : DataGenerator.generateData(50),
        sorters : [{ field : 'name' }]
    })

});

Thank you very much! That is precisely what I needed.