SO01 Single Column Sort

Sort by one column with ascending/descending toggle

Live Demo
Code
Enable Sorting 
 
 
How It Works
 
Click Behavior
 
Click any column header 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