Stats
Actions
Tags
Dropdown component for sorting collections such as lists or cards. Supports sort field selection, order direction, and mobile modal display.
How this skill is triggered — by the user, by Claude, or both
Slash command
/smarthr-design-system:smarthr-ui-sort-dropdownThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
コレクションの並べ替えを提供するためのドロップダウンコンポーネントです。主にテーブル以外のリストやカード一覧の並べ替え項目と並び順を設定するときに使います。
コレクションの並べ替えを提供するためのドロップダウンコンポーネントです。主にテーブル以外のリストやカード一覧の並べ替え項目と並び順を設定するときに使います。
import { SortDropdown } from 'smarthr-ui'
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| sortFields | SortFieldType[] | - | ✓ | 並び替え項目 |
| defaultOrder | "desc" | "asc" | - | ✓ | 並び順の初期値 |
| sortFieldLabel | ReactNode | - | - | - |
| sortOrderLegend | ReactNode | - | - | - |
| ascLabel | ReactNode | - | - | - |
| descLabel | ReactNode | - | - | - |
| applyText | ReactNode | - | - | - |
| cancelText | ReactNode | - | - | - |
| onApply | (args: ArgsOnApply) => void | - | ✓ | 適用時に発火するイベント |
| onCancel | MouseEventHandler | - | - | キャンセル時に発火するイベント |
| ref | Ref | - | - | - |
SortDropdown に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
sort プロパティを使うnpx claudepluginhub kufu/smarthr-design-system --plugin smarthr-design-systemProvides guidance on using smarthr-ui FilterDropdown to implement filter conditions in tables with checkboxes, radio buttons, and date inputs, including apply/reset actions.
Integrate react-native-reanimated-dnd for drag-and-drop, sortable lists, grids, and drop zones in React Native apps using components, hooks, and configuration.
Guides designing data tables with column alignment, sorting, filtering, pagination, and responsive fallbacks for scannable tabular data.