LyteNyte Grid logo for light mode. Links back to the documentation home page.
Github repository for this project. 1771 Technologies home page
Client Row Source

Client Row Sorting

Sort client row data in either ascending or descending order and apply multiple sorts, where each successive sort resolves equal comparisons from the previous sorts.

LyteNyte Grid does not impose a strict row-sorting interface. Your sorting approach will vary depending on the row source. For the client row source, use the sort property to specify how rows should be sorted. The sort property accepts one of two types of values:

  • A sort function that compares two rows. The function must return a positive number if the first row is greater than the second, a negative number if it is less, and 0 otherwise.
  • A sort dimension array. The array declaratively describes a list of sort comparators that apply in order. The grid starts with the first sort dimension and proceeds to subsequent dimensions only when the current comparator returns 0.

Sort Functions

A sort function compares two rows (of any kind). The client row data source calls the function you pass to the sort property with two row nodes. The row nodes may be any row type (leaf, group, or aggregation). If you are unfamiliar with row node types, see the Rows Overview guide for more details.

The demo below shows basic sorting using a sort function. It covers only the sorting interface’s foundational capabilities. The next sections build on this foundation to implement robust sorting in LyteNyte Grid.

Basic Sort Function

Fork code on stack blitzFork code on code sandbox

The demo above covers only the basics of sorting. A more standard sorting interface would typically include additional functionalities such as:

  • Sort indicator on the sorted column, such as an up or down icon.
  • Sorting for any column in the grid, not just Change 24H.
  • A method to switch between ascending and descending sort order.
  • A scalable approach that supports arbitrary sort options, not just predefined buttons.

LyteNyte Grid lets you define your own column behavior. Extend the column specification with a sort attribute to represent sorting.

  1. Extend the GridSpec type with your column extension:

    export interface GridSpec {
      readonly data: DEXPerformanceData;
      readonly column: { sort?: "asc" | "desc" };
    }

  2. Extend the API with a function that updates your internal sort state:

    export interface GridSpec {
      readonly data: DEXPerformanceData;
      readonly column: { sort?: "asc" | "desc" };
      readonly api: { sortColumn: (id: string, dir: "asc" | "desc" | null) => void };
    }

  3. Implement the sort API extension, and update your column headers to indicate the applied sort.

    See the code in the demo below for the full implementation. Some important snippets are shown below.

    // Assumes the columns state is defined above
    

    function sortColumn(id: string, dir: "asc" | "desc" | null) {
      setColumns((prev) => {
        const next = prev.map((x) => {
          // Remove any existing sort
          if (x.sort && x.id !== id) {
            const next = { ...x };
            delete next.sort;
            return next;
          }
          // Apply our new sort
          if (x.id === id) {
            const next = { ...x };
            if (dir == null) delete next.sort;
            else next.sort = dir;
    

            return next;
          }
          return x;
        });
        return next;
      });
    }

In the demo below, you can click any header to sort that column. Defining a sort extension for columns enables this flexibility.

Extended Function Sort

Fork code on stack blitzFork code on code sandbox

This demo shows function-based sorting. LyteNyte Grid supports custom sort models, allowing you to implement the sorting behavior your application requires.

Function-based sorting is flexible, but it has drawbacks:

  • For basic sorts, writing a custom sort function is tedious.
  • Function sorting doesn’t declaratively represent multi-way sorting; it requires implementing multi-way sorts within the function.
  • The sort function must handle sort direction.

LyteNyte Grid’s client row source supports dimension sorts, which are simpler than function sorts without sacrificing flexibility

Dimension Sorts

A dimension sort is an object representation of an individual sort. The interface is shown below:

export type DimensionSort<T> = { dim: Dimension<T> | SortFn<T>; descending?: boolean };

Notice that the dim property can be either a Dimension or a SortFn. This means it is possible to represent a SortFn as a dimension sort:

const dimSort = { dim: MySortFn };

The dim field may also be a Dimension, which is any value with an id or field property, as shown in the interface below. In particular, columns passed to the grid may also be used as dimensions. LyteNyte Grid’s client source can compute column fields, which makes it easy to use columns as dimensions.

export type Dimension<T> = { name?: string; field: Field<T> } | { id: string; field?: Field<T> };

In the demo below, the columns have been extended with custom sort attributes. Instead of using a function to sort the row data, the demo uses the column directly as a dimension.

Column Dimension Sort

Fork code on stack blitzFork code on code sandbox

Multi-Way Sorting

Dimension sorts make multi-way sorting straightforward. A multi-way sort defines an array of comparators. The grid applies the first comparator; if it returns 0, the grid applies the next, continuing until a comparator returns a non-zero result or the list ends.

The demo below shows multi-way sorting using dimension sorts. To sort on more than one column, hold the Control/Command key and click a column header.

Column Multi-way Sort

Fork code on stack blitzFork code on code sandbox

The demo’s multi-way sort implementation replaces all existing sorts when you click a header without pressing Control/Command. This behavior is not a strict rule. Instead, it is part of the intended implementation for this demo.

LyteNyte Grid’s dimension sorts and API extensions let you define the interaction you want. Choose the interaction that fits your application.

Sorting Group Rows

You can apply the same sorts used for ordering leaf rows to order group rows. Group rows do not require special handling; simply sort by the target dimension.

The demo below illustrates group row sorting. See the Client Row Grouping guide for more on group functionality.

Sorting Group Rows

Fork code on stack blitzFork code on code sandbox

This demo uses a different approach than the other demos in this guide to further emphasize the flexibility of defining your own sort model. Instead of extending the columns with a sort value, the demo maintains a separate sort state:

const [sort, setSort] = useState<{ id: string; dir: "asc" | "desc" | null } | null>({
  id: "__ln_group__",
  dir: "desc",
});

Tip

LyteNyte Grid automatically creates a row group column when group rows are present in the grid. Because this column is not part of the columns you pass to the grid, the correct id for the dimension may not be obvious.

LyteNyte Grid’s group column uses the id "__ln_group__". The client row source treats this ID in a special way and will sort rows based on the group’s key. This means you can sort the group column with:

{ dim: { id: "__ln_group__" }, descending: false }

Next Steps