Sorting in React Data Grid

The Syncfusion® React Data Grid component provides powerful sorting capabilities to arrange rows in ascending or descending order based on column values. It supports both single and multi-column sorting.

Enable sorting

Sorting is activated by setting the sortSettings.enabled property to true in the grid configuration. When enabled, clicking a column header cycles through ascending, descending, and unsorted states. The sort icon adjacent to the header clearly indicates the current sort direction, providing intuitive visual feedback.

Sorting order

The Data Grid component arranges data in a defined sequence through column header interactions, as outlined below:

Initial state: Data displays in its original, unsorted order.
First click: Sorts the column in ascending order (e.g., A to Z or 1 to 100).
Second click: Sorts the column in descending order (e.g., Z to A or 100 to 1).
Third click: Clears sorting, restoring the original data order.

Multi-sorting

Multi-column sorting is enabled by default when the sortSettings.enabled property is true. To sort by multiple columns, hold Ctrl while clicking on different sortable column headers. Press Shift + click a header to remove sorting from that specific column without altering other sorted columns. Clicking a sortable header without holding Ctrl or Shift applies single-column sorting and clears any existing multi-column sort configuration.

Single-column sorting: set the sortSettings.mode property to single. This ensures only one column is sorted at a time, clicking a new header clears any existing sort order.

Apply sorting on initial rendering

The Data Grid can display sorted data when it loads by using the sortSettings.columns property. This property defines the initial sort by specifying the columns and their sort direction (ascending or descending). This establishes the default sort order upon initial rendering, which remains active until modified by sortable column header click interactions or programmatically.

Disable sorting

Sorting can be disabled by setting the sortSettings.enabled property to false in the grid’s configuration. This prevents column headers from responding to click interactions, keeping the data in its original order.

Specific columns

Sorting for a specific column is disabled by setting the allowSort property to false in the column configuration. For example, in a nutrition data report, sorting can be disabled for the "Protein" column to prevent interaction.

Conditional sorting based on roles

Sorting can be dynamically enabled or disabled by updating the sortSettings.enabled property based on specific conditions. For example, sorting can be enabled for users with the "Admin" role and disabled for users with the "Employee" role by managing this property through state updates.

Disable clear sort

In the Data Grid component, clicking a column header normally changes the sorting between ascending, descending, and unsorted. To remove the unsorted option and keep sorting active, set the sortSettings.allowUnsort property to false. This keeps sorting limited to ascending and descending only.

Programmatic sorting

The Data Grid component supports sorting programmatically through the following methods:

sortByColumn(field, direction, isMultiSort) — Sorts a specific column by passing the field name, sort direction (Ascending or Descending), and an optional flag for multi-sorting.
removeSortColumn(field) — Removes sorting for a specific column from the current sorting collection.
clearSort() — Clears sorting on all columns, resetting to the default unsorted state.

Custom sorting

The Data Grid component allows customization of sorting behavior to handle special cases or complex requirements. Custom sorting rules can be defined to override the default sorting using the sortComparer method. This method includes the following parameters:

referenceValue: Value from the current row being sorted.
comparerValue: Value from the row to compare against.
referenceRowData(optional): Full data of the current row for advanced sorting.
comparerRowData(optional): Full data of the comparison row for complex logic.
sortDirection(optional): Current sort direction as ascending, descending, or unsort.

Custom sorting logic

Custom sorting logic is implemented using the sortComparer property in grid column configuration. This function compares values and returns -1, 0, or 1, similar to JavaScript’s Array.sort, enabling advanced sorting such as case-insensitive or special character handling.

Handle null values in sorting

By default, null values appear at the top in descending order and at the bottom in ascending order. To consistently place null values at the bottom, use a custom sortComparer function in the column configuration, ensuring clear separation of null and valid data.

Culture-specific sorting

Culture-specific sorting is enabled by setting the locale property in the React Provider. Assigning the locale to the desired culture code activates sorting rules based on that culture. This ensures accurate and culturally appropriate ordering for different languages and regions. The example below demonstrates sorting using the "ar" (Arabic) locale through the sortComparer property.

Events

The Data Grid component provides event hooks that trigger after sorting actions complete.

Event	Description
`onSort`	Fires after a sorting or clear-sorting action completes. It provides details about the current sort state, including the "column name", "sort direction", and the "action" performed (sorting or clearing). This event is useful for logging, updating the UI, or triggering related workflows.