Sort

Sortable column header utility with animated direction indicators. Cycles through asc → desc → null (unsorted). Built on Framer Motion.

Import

import { Sort } from 'reablocks';
// also available
import { getNextDirection, SortDirection } from 'reablocks';

Sort Props

Basic Usage

const [direction, setDirection] = useState<SortDirection>(null);

<Sort direction={direction} onSort={setDirection}>
  Column Name
</Sort>

Sort Cycle

Clicking cycles: null → 'asc' → 'desc' → null

The ascending icon is the default icon rotated 180°. The descending icon is the default icon as-is.

getNextDirection Utility

import { getNextDirection } from 'reablocks';

getNextDirection(null);        // 'asc'
getNextDirection('asc');       // 'desc'
getNextDirection('desc');      // null
getNextDirection('desc', 'asc', false); // 'asc' (canBeNull=false skips null)

Signature: getNextDirection(direction?, defaultDirection='asc', canBeNull=true)

SortTheme Interface

interface SortTheme {
  base: string;       // Container (cursor-pointer, flex, items-center)
  disabled: string;   // Disabled state
  hasValue: string;   // Disabled but has a direction value (cursor-not-allowed)
  icon: {
    base: string;     // Icon base (size, fill, margin)
    ascending: string; // Ascending modifier (rotate-180)
  };
}