demo D51
Locale collation in htmx
Sorting names in Swedish, German and Turkish
locale · type.compare
This grid sorts names by the rules of a chosen language, so Swedish, German and Turkish order the same letters differently. It gets alphabetical order right for the reader's language, where a single fixed rule would misplace accented and special letters.
This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.108.0/lattice-grid.min.css">
<script type="importmap">
{ "imports": { "@toclocoinc/lattice-grid": "https://cdn.latticegrid.dev/lattice-grid@1.108.0/lattice-grid.esm.min.js" } }
</script>
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
each header names the column that cell becomes, and data-id on each row is
the key the grid carries it under. -->
<table id="locale-collation-table" data-lattice-grid>
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="swedish">Swedish</th>
<th data-field="german">German phonebook</th>
<th data-field="turkish">Turkish</th>
<th data-field="codepoint">No collator</th>
</tr>
</thead>
<tbody>
<tr data-id="N001"><td>Åberg</td><td>23</td><td>1</td><td>1</td><td>22</td></tr>
<tr data-id="N002"><td>Ångström</td><td>24</td><td>3</td><td>2</td><td>23</td></tr>
<tr data-id="N003"><td>Ärlig</td><td>25</td><td>2</td><td>3</td><td>21</td></tr>
<!-- the rest of the rows, rendered by your server -->
</tbody>
</table>
<script type="module">
import { hydrateTable, registerLocale } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/modules/htmx.esm.min.js';
import { SV_SE } from 'https://cdn.latticegrid.dev/lattice-grid@1.108.0/locales/sv-SE.esm.min.js';
// This module carries its own copy of the grid, which a locale file's own
// registration does not reach: hand the module the catalogue.
registerLocale('sv-SE', SV_SE);
// The markup carries the rows; a server-rendered table's column types are
// declared in the config hydrateTable takes. The grid replaces the table
// where it stood.
const grid = hydrateTable(document.getElementById('locale-collation-table'), {
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 } },
],
});
</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.