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.

import { useState } from 'react';
import { Sort } from 'reablocks';


export default function App() {
const [dir, setDir] = useState<SortDirection>('asc');
return <Sort direction={dir} onSort={setDir}>
  Age
</Sort>;
}

import { useState } from 'react';
import { Sort } from 'reablocks';

export default function App() {
const [dir, setDir] = useState<SortDirection>('asc');
return <Sort direction={dir} onSort={setDir}>
  Age
</Sort>;
}

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:

Name	Type	Default
`className`	`string` Additional css classnames to apply
`iconClassName`	`string` Additional css classnames to apply to the icon
`disabled`	`boolean` Whether the sort is disabled
`direction`	`SortDirection` The current sort direction
`onSort`	`(direction: SortDirection) => void` The callback to call when the sort is toggled
`icon`	`ComponentType<{ className?: string; }>` The icon to display	`DownArrowIcon`
`neutralIcon`	`ComponentType<{ className?: string; }>` The neutral icon to display.
`neutralIconClassName`	`string` Additional css classnames to apply to the neutral icon.
`theme`	`SortTheme` Theme for the Sort.

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.