SortMenu

SortMenu standardizes list and table sorting controls while keeping the table implementation responsible for applying the actual sort.

#Default usage

<SortMenu
  fields={[
    { id: "createdAt", label: "Created" },
    { id: "name", label: "Name" },
    { id: "status", label: "Status" },
  ]}
  defaultValue={{ field: "createdAt", direction: "desc" }}
/>

#Import

import { SortMenu } from "@froggdesign/enter-ui-react";

#Controlled

<SortMenu
  fields={fields}
  value={sort}
  onValueChange={setSort}
/>

#Patterns

Place SortMenu in a DataToolbar next to search, density, saved views, and column visibility controls.

#Accessibility

The field and direction groups use radio menu items, so selected state is announced by assistive technology. Clear sort returns undefined through onValueChange.

#API

• fields: { id, label }[].
• value: controlled { field, direction }.
• defaultValue: initial sort value.
• onValueChange: called with a sort value or undefined.
• disabled: disables the trigger.

#Styling

SortMenu uses .eui-sort-menu classes and FroggDesign tokens for layout, state, focus, and disabled styling.