컬럼 표시 설정
showColumnMenu=true 시 우상단 ⚙️ 버튼이 나오고 체크박스 popover로 컬럼 표시/숨김. column.hidden 또는 columnVisibility prop으로도 제어 가능합니다.
💡 우상단 ⚙ 컬럼 버튼 → 체크박스로 컬럼 표시/숨김 토글.
| 주문번호 | 고객명 | 상품 | 카테고리 | 수량 | 가격 | 상태 | 주문일 |
|---|---|---|---|---|---|---|---|
| 1001 | 김민수 | iPhone 17 | 전자제품 | 1 | 1,450,000원 | 완료 | 2026-06-01 |
| 1002 | 이지은 | 나이키 운동화 | 의류 | 2 | 89,000원 | 배송중 | 2026-06-03 |
| 1003 | 박철호 | 삼성 모니터 | 전자제품 | 1 | 320,000원 | 완료 | 2026-06-05 |
| 1004 | 최영희 | 유기농 쌀 10kg | 식품 | 3 | 45,000원 | 대기 | 2026-06-10 |
| 1005 | 정민재 | 아디다스 후디 | 의류 | 1 | 79,000원 | 취소 | 2026-06-12 |
| 1006 | 강수연 | AirPods Pro | 전자제품 | 2 | 359,000원 | 완료 | 2026-06-14 |
| 1007 | 윤지호 | 한우 등심 1kg | 식품 | 1 | 120,000원 | 배송중 | 2026-06-15 |
| 1008 | 한가영 | 갤럭시 워치 | 전자제품 | 1 | 280,000원 | 완료 | 2026-06-16 |
API
GridProps
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| columnVisibility | Record<string, boolean> | - | controlled 표시/숨김 |
| onColumnVisibilityChange | (v) => void | - | 표시/숨김 변경 콜백 |
| showColumnMenu | boolean | false | 우상단 ⚙️ 컬럼 표시 메뉴 버튼 |
GridColumn
| Property | Type | 기본값 | 설명 |
|---|---|---|---|
| hidden | boolean | false | 초기 숨김 |
| hideable | boolean | true | 컬럼 메뉴에서 토글 허용 여부 |
GridHandle
| 메서드 | 반환 | 설명 |
|---|---|---|
| getColumnVisibility() | Record<string, boolean> | 표시/숨김 상태 반환 |
| toggleColumnVisibility(colId) | void | 표시/숨김 토글 |