sort
To enable the sorting plugin. Sort has two config objects:
- Generic config: to enable sort for all columns, enable multi column sort, server-side integration, etc.
- Column specific config: to enable sort on a specific column, to set custom comparator function, etc.
Generic sort config
optional
- Type:
boolean
orGenericSortConfig
- Example: Sorting
GenericSortConfig
type has the following properties:
Name | Description | Type |
---|---|---|
enabled | to enable/disable sorting | boolean |
multiColumn optional | Enable/disable multi column sort | boolean |
server optional | Server-side integration | ServerConfig |
To simply enable sort for all columns:
new Grid({
data: [
['John', 'john@example.com', '(353) 01 222 3333'],
['Mark', 'mark@gmail.com', '(01) 22 888 4444'],
['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'],
['Nisen', 'nis900@gmail.com', '313 333 1923']
],
sort: true
});
To disable multi column sorting:
new Grid({
data: [
['John', 'john@example.com', '(353) 01 222 3333'],
['Mark', 'mark@gmail.com', '(01) 22 888 4444'],
['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'],
['Nisen', 'nis900@gmail.com', '313 333 1923']
],
sort: {
multiColumn: false
}
});
Column specific sort config
optional
- Type:
boolean
orSortConfig
- Example: Custom sort
SortConfig
type has the following properties:
Name | Description | Type |
---|---|---|
enabled | to enable/disable sorting | boolean |
compare optional | custom comparator function | Comparator<TCell> |
To disable sort on a specific column:
new Grid({
columns: [
'Name',
'Email',
{
name: 'Phone Number',
sort: {
enabled: false
}
}
],
sort: true,
data: [
['John', 'john@example.com', '+353 40 222 3333'],
['Mark', 'mark@gmail.com', '+1 22 888 4444'],
]
});
Or to use a custom comparator on a column:
new Grid({
columns: [
'Name',
'Email',
{
name: 'Phone Number',
sort: {
compare: (a, b) => {
if (a > b) {
return 1;
} else if (b > a) {
return -1;
} else {
return 0;
}
}
}
}
],
sort: true,
data: [
['John', 'john@example.com', '+353 40 222 3333'],
['Mark', 'mark@gmail.com', '+1 22 888 4444'],
]
});