Sorting (React)

Enable single and multi-column sorting in the React grid, including custom comparators, programmatic sort state controls, and persistent sort indicators.

gp-grid supports single and multi-column sorting out of the box.

Basic Sorting

Sorting is enabled by default. Click a column header to sort:

SortableGrid.tsx

import { Grid, type ColumnDefinition } from "@gp-grid/react";

const columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 80, headerName: "ID" },
  { field: "name", cellDataType: "text", width: 150, headerName: "Name" },
  { field: "salary", cellDataType: "number", width: 120, headerName: "Salary" },
];

function SortableGrid() {
  return (
    <div style={{ height: "400px" }}>
      <Grid
        columns={columns}
        rowData={data}
        rowHeight={36}
        sortingEnabled={true}
      />
    </div>
  );
}

Multi-Column Sorting

Hold Shift while clicking headers to sort by multiple columns:

Click "Name" to sort by name
Shift+Click "Salary" to add salary as secondary sort

Disable Sorting

Globally

<Grid
  columns={columns}
  rowData={data}
  rowHeight={36}
  sortingEnabled={false}
/>

Per Column

const columns: ColumnDefinition[] = [
  { field: "id", cellDataType: "number", width: 80, sortable: false },
  { field: "name", cellDataType: "text", width: 150, sortable: true },
];

Sort Indicators

The header displays sort direction and order:

▲ - Ascending
▼ - Descending
Number badge for multi-column sort order