SO01 Single Column Sort

Sort by one column with ascending/descending toggle

Live Demo
Code
Enable Sorting 
 
 
How It Works
 
Sort Behavior
 
Click the sort indicator in column headers to sort:
 
  • First click: Ascending order
    •  
  • Second click: Descending order
    •  
  • Third click: Remove sort
 
Single Mode
 
Only one column can be sorted at a time. Clicking a new column replaces the current sort.
 
Ctrl+Click behaves the same as regular click.
 
SO02 Multi-Column Sort
 
Sort by multiple columns with Ctrl+Click and priority indicators
 
Live Demo
 
 
Code
 
Sort State 
 
 
 
How It Works
 
Multi-Column Sorting
 
Ctrl+Click headers to add columns to sort:
 
  • First column is primary sort
    •  
  • Second column breaks ties
    •  
  • And so on...
 
Priority Indicators
 
Numbers show sort priority (e.g., Name 1, Salary 2)
 
Clear All
 
Regular click clears multi-sort and starts fresh.
 
SO03 Server-Side Sorting
 
Handle sort changes via ondatarequest event for API integration
 
Live Demo
 
 
Click column headers to see ondatarequest events. Try Ctrl+Click for multi-sort.
 
Code
 
ondatarequest Handler 
 
 
 
Console Output
 
Event Log
 
 
Click column headers to see events...
 
SO04 Programmatic Sort State
 
Display sort indicators for pre-sorted server data
 
Live Demo
 
 
Data pre-sorted by Department (asc), then Salary (desc). Sort indicators reflect this.
 
Code
 
Pre-sorted Data 
 
 
 
How It Works
 
When to Use
 
When data is sorted server-side:
 
  • SQL ORDER BY clause
    •  
  • API with sort parameters
    •  
  • Cached sorted results
 
Reactive Property
 
grid.sort is reactive:
 
  • Set anytime (init or callback)
    •  
  • UI updates immediately
    •  
  • Does NOT re-sort data
 
Sort Behavior
 
Sort Indicator vs Header Click
 
Sorting is triggered by clicking the sort indicator (arrow icon) in the column header, not by clicking the header text itself.
 
Clicking the header body now selects the column (when cell selection is enabled). This matches Excel behavior where headers are used for selection.
 
Multi-Sort via Context Menu
 
You can also sort columns via the header context menu using predefined actions:
 
Header Context Menu Sort Actions