āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/1771-technologies/lytenyte/(row)/row-sorting ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
LyteNyte Grid sorts rows based on the sortModel property in grid state. The row data source you set
on the grid performs the actual sorting.
The sortModel is an array of sort configurations. LyteNyte Grid supports three standard sort types and
one custom type.
Example:
{ columnId: "age", sort: { kind: "number" }, isDescending: false },
Each sort configuration includes:
columnId - The column to sort.sort.kind - The sort type:
"number""string""date""custom" - Requires a custom comparator function.isDescending - Boolean indicating sort direction.!demo:Row Sort Model="./demos/row-sorting"
Because sortModel is an array, you can define multiple sort rules. This creates a multi-way sort:
In the example below hold Ctrl (Windows/Linux) or Command (macOS) when clicking a header
to add it to the sorting list. See the Header component in the
example for one way to implement this.
If header clicks are reserved for another action or feel unintuitive, use the Sort Manager component for a dedicated multi-sort UI.
!demo:Row Sort Model Multi="./demos/row-sorting-multi"
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā