고급 필터 (Advanced Filter)
기본 텍스트 필터 외에 컬럼 타입에 맞는 전용 필터 UI를 제공합니다. useFilter="true" 설정 시 자동으로 고급 필터 모드가 활성화됩니다.
라이브 데모
컬럼 타입별 필터 UI
| 컬럼 타입 | 필터 UI | 설명 |
|---|---|---|
text | 텍스트 입력 | 부분 일치 검색 (기본과 동일) |
number | 범위 입력 (min ~ max) | 숫자 범위 필터 |
date | 날짜 범위 (from ~ to) | 날짜 범위 필터 |
select, badge | 다중 선택 드롭다운 | 여러 값 동시 필터 (OR 조건) |
boolean | 체크박스 | true/false 필터 |
사용법
vue
<WZGrid
:columns="columns"
:rows="rows"
:useFilter="true"
/>number 타입 컬럼에는 min/max 범위 입력, date 타입에는 날짜 범위 선택, select/badge 타입에는 다중 선택 드롭다운이 자동으로 나타납니다.
숫자 범위 필터
number 타입 컬럼의 필터 행에 최솟값과 최댓값을 입력할 수 있습니다.
| 급여 |
| [30000] ~ [80000] |- 한쪽만 입력해도 동작합니다 (예: min만 입력하면 "이상" 조건).
날짜 범위 필터
date 타입 컬럼에 시작일/종료일 입력이 제공됩니다.
| 입사일 |
| [2024-01-01] ~ [2024-12-31] |다중 선택 필터
select, badge 타입 컬럼에 체크박스 드롭다운이 표시됩니다. 여러 옵션을 동시에 선택하면 OR 조건으로 필터링됩니다.
서버사이드 연동
서버사이드 모드(serverSide="true")에서 고급 필터를 사용하면 @update:filters 이벤트에 필터 타입별 구조화된 데이터가 전달됩니다.
ts
// @update:filters 이벤트 페이로드 예시
{
name: { value: '홍' }, // 텍스트 필터
salary: { min: '30000', max: '80000' }, // 숫자 범위 필터
joinDate: { from: '2024-01-01', to: '2024-12-31' }, // 날짜 범위 필터
dept: { values: ['dev', 'hr'] }, // 다중 선택 필터
}주의사항
- 여러 컬럼에 동시에 필터를 적용하면 AND 조건으로 결합됩니다.
- 필터 변경 시 1페이지로 자동 이동합니다.