# 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sjsofttech.gitbook.io/nextjs-framework/components-ui/tableheaddropdownmenu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.