Sort
The "Sort" component is a straightforward, user-friendly tool designed for toggling the sort direction of data within your application. Ideal for data tables or lists that require sorting capabilities, it provides visual indicators for the current sort direction and allows users to change the sort order with a simple click.
Quick Start
To start using the Sort
component, import it from the reablocks
library and provide the direction
and onSort
props.
Examples
Basic Usage
To use the Sort component, manage the sort direction state in your component or page and pass it along with a callback function to handle changes in sort direction. This example demonstrates how to integrate the Sort component with ascending ('asc') and descending ('desc') sort directions:
API
Customize the Sort component using the following properties:
Prop | Description | Default |
---|---|---|
className | Additional css classnames to applystring | |
iconClassName | Additional css classnames to apply to the iconstring | |
disabled | Whether the sort is disabledboolean | |
direction | The current sort directionSortDirection | |
onSort | The callback to call when the sort is toggled(direction: SortDirection) => void | |
icon | The icon to displayComponentType<{ className?: string; }> | |
neutralIcon | The neutral icon to display.ComponentType<{ className?: string; }> | |
neutralIconClassName | Additional css classnames to apply to the neutral icon.string | |
theme | Theme for the Sort.SortTheme |
Design and Usability Tips
- Sort Confirmation: Provide immediate visual feedback when a sort order is applied, such as highlighting the active sort column or displaying a sorted icon, reinforcing the user's action.