Our blazing fast Grid component built with pure JavaScript


Post by pmiklashevich »

Here is a testcase to check with:
import '../_shared/shared.js'; // not required, our example styling etc.
import Grid from '../../lib/Grid/view/Grid.js';
import '../../lib/Grid/column/Column.js';
import '../../lib/Grid/column/NumberColumn.js';

new Grid({
    appendTo : 'container',

    columns : [
        { text : 'Name', field : 'name', flex : 1 },
        { text : 'Age', field : 'age', width : 150, type : 'number' }
    ],

    store : {
        data : [
            { name : 'Andersson', age : 1 },
            { name : 'testsson', age : 2 },
            { name : 'Åhman', age : 3 },
            { name : 'Svensson', age : 10 },
            { name : 'Ängman', age : 11 },
            { name : 'sofi', age : 12 },
            { name : 'Östra', age : 100 },
            { name : 'Wanger', age : 110 }
        ]
    }
});
You can replace sorting demo with this code to see how it works.

Pavlo Miklashevych
Sr. Frontend Developer


Post by henrikbackman »

mats wrote:
Yes but you don't have any single digit numbers there. And that is the issue.
I did try with single - just edit the data and try it :)
Alright, I sorted it out. In order for the type: number sorting to work the number can't be a string.

I'll see what I can do about the letters.

Post by pmiklashevich »

Here is the ticket to use localeCompare function as column's default sorter:
https://app.assembla.com/spaces/bryntum/tickets/7113

Pavlo Miklashevych
Sr. Frontend Developer


Post by Yamo1993 »

The useLocaleSort config doesn't seem to have the numeric option. is there a way to include it? The config only takes a string or a boolean as a value.


Post by Maxim Gorkovsky »

Hello.
Could you please elaborate on your problem?


Post by Yamo1993 »

We want our Grid to sort based on locales and treat numbers as numbers, not strings. Currently we're using useLocaleSort to sort based on our language of choosing, but didn't find an option to specify type number for number inputs.


Post by alex.l »

Hi Yamo1993,

Did you specify the type as number for that field in your model? https://bryntum.com/docs/grid/#Core/data/Model#defining-fields

All the best,
Alex


Post by Yamo1993 »

Hi Alex,

The field is a string but it can contain numbers. I want those numbers of that string to be sorted numerically. A concrete example with vanilla JS would be:

['Test 1', 'Test 1234', 'Test 13'].sort((a,b) => a.localeCompare(b, 'sv-SE')) // output: ["Test 1", "Test 1234", "Test 13"]
['Test 1', 'Test 1234', 'Test 13'].sort((a,b) => a.localeCompare(b, 'sv-SE', { numeric: true })) // output: ["Test 1", "Test 13", "Test 1234"]

I want the numeric sorting, which corresponds to setting "numeric" to true.

Speaking of a model, I haven't really defined a model at all as I haven't found a need for it. I could try to look into that too. But is there a way to easily set "numeric" to true?


Post by alex.l »

Model field may be a String or a Number, but not both at once. If you want to recognise it, the best would be to define your own sort function with the logic you need. Please, check the docs, this should do the job: https://bryntum.com/docs/grid/#Grid/column/Column#config-sortable

const grid = new Grid({
    columns : [
         {
             field : 'name',
             // Custom sorting for this column
             sortable(user1, user2) {
                 // define the logic you need here!
                 return user1.name < user2.name ? -1 : 1;
             }
         }
    ]
});

All the best,
Alex


Post Reply