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 }
]
}
});
Support Forum
Pavlo Miklashevych
Sr. Frontend Developer
https://app.assembla.com/spaces/bryntum/tickets/7113
Pavlo Miklashevych
Sr. Frontend Developer
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
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?
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