Documentation

Column Sorting

Column sorting allows users to organize table data in ascending or descending order based on column values. This feature is essential for data analysis and quick information retrieval.

CodeSandbox

Basic Sorting

To enable sorting for a column, add the isSortable: true property to your column definition.

Column Sorting Configuration

PropertyRequiredDescriptionExample
HeaderObject.isSortable
boolean
Optional
Enables sorting functionality for the column. When true, users can click the column header to sort data.

External Sorting

For advanced use cases, you can handle sorting externally - perfect for server-side sorting, API integration, or custom sorting logic. This demo shows how to manage sorting completely outside the table component.

External Sort Status: No sorting applied

CodeSandbox

External sorting provides two key benefits:

  • API Integration: Use onSortChange to trigger server-side sorting while keeping the table's UI sorting indicators.
  • Complete Control: Use externalSortHandling= to disable all internal sorting and provide your own pre-sorted data.

External Sorting Configuration

PropertyRequiredDescriptionExample
onSortChange
(sort: SortConfig | null) => void
Optional
Callback function triggered when sort configuration changes. Receives the current sort configuration or null if no sorting is applied.
externalSortHandling
boolean
Optional
When true, completely disables internal sorting logic. The table will not sort data internally - you must provide pre-sorted data via the rows prop.