TableHeadDropdownMenu

• dropdown 버튼 (trrigger)

Props

Prop	Type	Default	Description
type	'default' | 'orders'	'default'	타입
title	string	-	dropdown 버튼 타이틀
icon	React.ReactNode	-	dropdown 버튼 우측 아이콘
leftSlot	React.ReactNode	-	dropdown 버튼 타이틀 좌측 영역
rightSlot	React.ReactNode	-	dropdown 버튼 타이틀 우측 영역
contained	boolean	-	dropdown 버튼 contained 여부
sortState	'NONE' | 'ASC' | 'DESC'	-	정렬 상태 (type이 orders일 경우)
children	React.ReactNode	-	dropdown contents 영역

Usage

<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

Props

Prop	Type	Default	Description
label	string	-	라벨 텍스트
items	{ icon: React.ReactNode text: string checked: boolean onClick: function }	-	메뉴 그룹 아이템 icon: 좌측 아이콘 text: 텍스트 checked: 체크 여부 onClick: 클릭 이벤트 핸들러
reset	function	-	초기화 버튼 핸들러

Usage

<DropdownMenuGroup
  label: '상품정보'
  items={[
    {
      icon: <ChevronDownUp16Regular />,
      text: '요약보기',
      checked: true,
      onClick: () => {},
    },
    {
      icon: <ChevronUpDown16Regular />,
      text: '상세보기',
      checked: false,
      onClick: () => {},
    },
  ]}
/>