Sort Selector

Overview

Sort Selector is a dropdown for choosing how a list is sorted. It presents a curated set of field-and-direction options — Name (A–Z / Z–A) plus date options — and reflects the current choice on its trigger. It’s built on a Dropdown Menu with a Button trigger.

It is a controlled component: you hold the current sortField and sortOrder and update them from the setSortField/setSortOrder callbacks. When the current sort differs from the configured defaults, a Reset link appears in the menu to return to them.

Usage

Import the component:

import { SortSelector } from "@eqtylab/equality";

Hold the field and order in state, then apply them to your data:

const [sortField, setSortField] = useState("name");
const [sortOrder, setSortOrder] = useState("asc");

<SortSelector
  sortField={sortField}
  sortOrder={sortOrder}
  setSortField={setSortField}
  setSortOrder={setSortOrder}
/>;

The component only selects the sort preference — apply it to your list yourself, for example:

const sorted = [...items].sort(compareBy(sortField, sortOrder));

Default

Shows the Sort Selector with default sorting (by Name, ascending):

Sort Mode

The sortMode prop determines which date options are offered. It accepts "created" (default) or "updated":

• sortMode="created" → “Recently Created” / “Oldest Created”
• sortMode="updated" → “Recently Updated” / “Oldest Updated”

Hide Date Options

Set showDateOptions={false} to offer only the Name options:

Reset

When the current sort no longer matches defaultSortField/defaultSortOrder (both name/asc by default), a Reset link appears in the dropdown that restores the defaults. Open the menu and pick a different option to see it.

Props