# TableHeadDropdownMenu

* dropdown 버튼 (trrigger)

<div align="left"><figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2FIVg1NAUmRto4DjKOeVSy%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-04-02%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.57.17.png?alt=media&#x26;token=ae46ced8-e8e3-4f7b-a4d4-7c3716a263f4" alt=""><figcaption></figcaption></figure></div>

### Props

<table><thead><tr><th width="210">Prop</th><th width="164">Type</th><th width="108">Default</th><th>Description</th></tr></thead><tbody><tr><td>type</td><td>'default' | 'orders'</td><td>'default'</td><td>타입</td></tr><tr><td>title</td><td>string</td><td>-</td><td>dropdown 버튼 타이틀</td></tr><tr><td>icon</td><td>React.ReactNode</td><td>-</td><td>dropdown 버튼 우측 아이콘</td></tr><tr><td>leftSlot</td><td>React.ReactNode</td><td>-</td><td>dropdown 버튼 타이틀 좌측 영역</td></tr><tr><td>rightSlot</td><td>React.ReactNode</td><td>-</td><td>dropdown 버튼 타이틀 우측 영역</td></tr><tr><td>contained</td><td>boolean</td><td>-</td><td>dropdown 버튼 contained 여부</td></tr><tr><td>sortState</td><td>'NONE' | 'ASC' | 'DESC'</td><td>-</td><td>정렬 상태 (type이 orders일 경우)</td></tr><tr><td>children</td><td>React.ReactNode</td><td>-</td><td>dropdown contents 영역</td></tr></tbody></table>

### Usage

```typescript
<TableHeadDropdownMenu
  type={'orders'}
  title={'헤드'}
  sortState={'NONE'}>
  <DropdownMenuGroup
    label: '상품정보'
    items={[
      {
        icon: <ChevronDownUp16Regular />,
        text: '요약보기',
        checked: true,
        onClick: () => {},
      },
      {
        icon: <ChevronUpDown16Regular />,
        text: '상세보기',
        checked: false,
        onClick: () => {},
      },
    ]}
  />
  <DropdownMenuGroup
    label: '상품정보'
    items={[
      {
        icon: <ArrowUp16Regular />,
        text: '오름차순',
        checked: false,
        onClick: () => {},
      },
      {
        icon: <ArrowDown16Regular />,
        text: '내림차순',
        checked: false,
        onClick: () => {},
      },
    ]}
  />
/TableHeadDropdownMenu>
```

***

### DropdownMenuGroup

<div align="left"><figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2FdK0EeWLtzmwU9jEBGfr3%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-04-02%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%204.52.17.png?alt=media&#x26;token=e636868c-ef2a-4fd1-a38c-7a800d79fb44" alt=""><figcaption></figcaption></figure></div>

### Props

<table><thead><tr><th width="210">Prop</th><th width="164">Type</th><th width="108">Default</th><th>Description</th></tr></thead><tbody><tr><td>label</td><td>string</td><td>-</td><td>라벨 텍스트</td></tr><tr><td>items</td><td>{<br>  icon: React.ReactNode<br>  text: string<br>  checked: boolean<br>  onClick: function<br>}</td><td>-</td><td>메뉴 그룹 아이템<br>icon: 좌측 아이콘<br>text: 텍스트<br>checked: 체크 여부<br>onClick: 클릭 이벤트 핸들러</td></tr><tr><td>reset</td><td>function</td><td>-</td><td>초기화 버튼 핸들러</td></tr></tbody></table>

### Usage

<pre class="language-typescript"><code class="lang-typescript"><strong>&#x3C;DropdownMenuGroup
</strong>  label: '상품정보'
  items={[
    {
      icon: &#x3C;ChevronDownUp16Regular />,
      text: '요약보기',
      checked: true,
      onClick: () => {},
    },
    {
      icon: &#x3C;ChevronUpDown16Regular />,
      text: '상세보기',
      checked: false,
      onClick: () => {},
    },
  ]}
/>
</code></pre>