syidaxgrid
Home Pricing Settings

GRID FEATURE

Single and multiple sorting

Sorting changes display order without modifying data values. Single sorting uses one criterion; multiple sorting uses prioritized criteria.

Markdown source Features

How it works and when to use it

Numbers stored as strings may sort differently from numeric expectations. Handle display formatting in a formatter and prepare sorting for the actual data type.

In the code, grid is the Grid element prepared in the installation chapter. Check each example's data and settings, and implement the app functions and server endpoints for your project.

Example 1. Show the largest quantities first

Explicitly apply descending sorting to the quantity column.

javascript
await grid.sortBy('quantity', 'desc');
console.log(await grid.getSortModel());

Verify the result: A descending quantity model is applied. Distinguish cycling without direction from explicitly setting desc.

Example 2. Compare quantities within teams

Sort by team first, then compare quantities within each team.

javascript
grid.multiSort = true;
await grid.setSortModel([{ field: 'team', direction: 'asc' }, { field: 'quantity', direction: 'desc' }]);

Verify the result: The first array entry has priority. Source row IDs and values remain unchanged; only display positions change.

Example 3. Clear sorting and observe user changes

Return to the original order, then read the model when users click headers.

javascript
await grid.setSortModel([]);
grid.addEventListener('sortChanged', event => console.log(event.detail));

Verify the result: An empty model clears sorting. To remove one of several criteria, distinguish sortBy with null from replacing the entire model.

Combining features and troubleshooting

With remote models, the server must apply the same sorting rules. Browser-only sorting within each page can produce inconsistent ordering between pages.

For stable results when values are equal, manage source ordering or a server secondary key. Do not store business targets as rowIndex after sorting.

Related reading