Sorting & Filtering

Manage large datasets with ease using Radiant Grid's built-in sorting and filtering capabilities. Everything is handled by high-performance engines designed for minimal memory footprint.

Column Sorting

Enable sorting by adding sortable: true to your column definitions. Users can click the header to cycle through Ascending, Descending, and Unsorted states.

const columns = [
  { id: 'id', field: 'id', headerName: 'ID', sortable: true },
  { id: 'name', field: 'name', headerName: 'Name', sortable: true },
];

Multi-Column Sorting

Hold the Shift key while clicking headers to sort by multiple columns simultaneously. The order of clicks determines the sort priority.

Column Filtering

Filtering can be enabled globally or on a per-column basis. There are two primary ways to interact with filters:

1. Floating Filters

Enabled via enableFloatingFilters: true on the grid. This adds a dedicated row below the headers where users can type filter criteria directly.

2. Quick Filter

The Quick Filter (available in the toolbar) searches across all columns at once. It's perfect for finding a specific record when you don't know which column it's in.

Filter Types

The FilterEngine automatically chooses the best matching logic based on the column type:

• Text: "Contains" matching (case-insensitive).
• Number: "Equals" matching.
• Date: Exact date matching.
• Set/Checklist: Filter by multiple discrete values (used in the ChecklistFilter).

Custom Filter Logic

You can provide a custom filterValueGetter to transform data before it reaches the filter engine, ensuring that even complex objects can be filtered correctly.

{
  id: 'fullName',
  headerName: 'Full Name',
  filterValueGetter: (params) => `${params.row.firstName} ${params.row.lastName}`
}