demo D51
Locale collation
Sorting names in Swedish, German and Turkish
locale · type.compare
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
autoHeight: true,
// The grid's own default collation. Set to Swedish here, so the Name
// column files å, ä and ö after z rather than with a and o; unset, the
// column would follow whatever the visitor's browser calls default.
locale: 'sv',
columns: [
{ field: 'name', title: 'Name', layout: { width: 180 } },
// Each of these is that name's position in one collation, worked out
// in the visitor's own browser. Sort a column ascending and the list
// reorders into that locale. Where two columns disagree on a row, the
// two locales disagree about that name.
{ field: 'swedish', title: 'Swedish', type: 'number', layout: { width: 120 } },
{ field: 'german', title: 'German phonebook', type: 'number', layout: { width: 180 } },
{ field: 'turkish', title: 'Turkish', type: 'number', layout: { width: 120 } },
{ field: 'codepoint', title: 'No collator', type: 'number', layout: { width: 140 } },
],
rows, // one row per surname, with its rank in four orderings
});
</script>Sorting text correctly with locale-aware collation
Locale collation is the rule set that decides the order of letters within a specific language, and it is not the same rule set in every language: Swedish treats å, ä and ö as letters after z rather than variants of a, a and o, German dictionary order and phone-book order disagree on how umlauts sort, and Turkish distinguishes a dotted İ from a dotless I in a way that breaks a plain case-insensitive compare. A developer reaches for locale collation when a name column is sorting wrong for the audience reading it, most often surnames or place names in a non-English locale, or when the same dataset needs to sort differently depending on which market is viewing it. Lattice Grid controls this through the locale option on a column, paired with type.compare when a column needs a comparator beyond what a locale alone supplies, so the sort order can be set per column rather than once for the whole JavaScript data grid. The comparator runs through the same sort path as any other column, so switching locale carries no extra cost at render time and stays consistent under a sort at scale. Column headers and cell values remain in their original script throughout, so the ordering changes without altering what a screen reader announces for each row.
How do I sort text correctly for a specific language in a data grid?
Set the locale option on the column to the target language tag, such as sv for Swedish or de for German, and Lattice Grid orders the values using that locale’s collation rules rather than a plain character-code compare. For a rule a locale alone cannot express, pair it with type.compare to supply a custom comparator. This keeps sort order correct per column even when different columns serve different markets.