Row Sorting

LyteNyte Grid enables you to sort rows using the sortModel property in grid state. The row data source you set on the grid performs the actual sorting operation.

Sort Model

The sortModel property in grid state is an array of SortModelItems with the following interface:

export interface SortModelItem {
  readonly columnId: string;
  readonly options?: SortOptions;
  readonly isDescending?: boolean;
}
 
export interface SortOptions {
  readonly isAccented?: boolean;
  readonly isAbsolute?: boolean;
  readonly nullsAppearFirst?: boolean;
}

The columnId identifies which column to use for sorting. A column must be sortable to include it in the model. Sort options provide additional functionality:

• isAccented treats accented characters as equal (e.g., a equals á)
• isAbsolute performs sorting based on absolute values, ignoring number signs
• nullsAppearFirst places null values before rows with values (by default, null values appear after all values regardless of sort direction)

TODO;

Column Sort Configuration

You can configure how a column sorts by setting its sort cycle, sort comparator, and sortable status.

Sort Cycle

The sortCycle property on a column determines the sequence of sorts to cycle through. It contains an array of SortCycleOption strings that follow this format:

export type SortTypes = "asc" | "desc";
export type SortAccentModifier = "accented";
export type SortAbsoluteModifier = "abs";
export type SortNullModifier = "nulls-first";
 
export type SortCycleOption =
  | SortTypes
  | `${SortTypes}_${SortAccentModifier}`
  | `${SortTypes}_${SortAccentModifier}_${SortAbsoluteModifier}`
  | `${SortTypes}_${SortAccentModifier}_${SortNullModifier}`
  | `${SortTypes}_${SortAccentModifier}_${SortAbsoluteModifier}_${SortNullModifier}`
  | `${SortTypes}_${SortAbsoluteModifier}`
  | `${SortTypes}_${SortAbsoluteModifier}_${SortNullModifier}`
  | null;

Each option consists of a sort direction followed by optional modifiers. Modifiers must follow the order: accented, abs, then nulls-first. For example, valid options include "asc" or "desc_accented". TypeScript will provide completion suggestions and validate the format for you.

TODO;

Sort Comparators

Specify a sortComparator property on a column to control sorting behavior. The comparator can be either a string that references a registered sort comparator or a custom function.

TODO;

Register sort comparators by setting the sortComparators property on grid state. LyteNyte Grid provides built-in "string", "number", and "date" sort comparators that may be referenced without first registering them.

Sort API Interface

Change the sortModel programmatically by directly updating the grid state:

grid.state.sortModel.set([{ columnId: "my-column", isDescending: false }]);

LyteNyte Grid provides several API methods to manage column sorting:

• columnSortModelIndex returns the index in the sort model if the column has an active sort
• columnSortCycle returns the column's sort cycle (including any base column fallbacks)
• columnSortCycleIndex returns the currently active sort cycle index for the column
• columnSortDirection returns the column's sort direction if it has an active sort
• columnSortGetNext returns the next sort that should apply to the column
• columnSortCycleToNext cycles the column to its next sort and updates the sortModel

See the API Reference for complete details on these methods.