Docs
πŸ—οΈ ⏐ Components
Data
Sort

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.

Age

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:

PropDescriptionDefault
classNameAdditional css classnames to apply
string
iconClassNameAdditional css classnames to apply to the icon
string
disabledWhether the sort is disabled
boolean
directionThe current sort direction
SortDirection
onSortThe callback to call when the sort is toggled
(direction: SortDirection) => void
iconThe icon to display
ComponentType<{ className?: string; }>
neutralIconThe neutral icon to display.
ComponentType<{ className?: string; }>
neutralIconClassNameAdditional css classnames to apply to the neutral icon.
string
themeTheme 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.