> For the complete documentation index, see [llms.txt](https://sjsofttech.gitbook.io/nextjs-framework/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sjsofttech.gitbook.io/nextjs-framework/components-ui/tableheaddropdownmenu.md).

# TableHeadDropdownMenu

* dropdown 버튼 (trrigger)

<div align="left"><figure><img src="/files/Aymj5brudoXWafIAb278" 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="/files/updreWnbUnbRk4RcoRJk" 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>