Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
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.