# 열마다 다른 조건

열 필터는 특정 열에 조건을 적용합니다. 텍스트·숫자·날짜별로 입력과 비교 방식이 다르며 여러 열의 조건은 함께 결과를 좁힙니다.

Canonical: https://grid.syidax.com/ko/docs/features/column-filters/

<a id="understand"></a>

## 동작 원리와 선택 기준

필터 UI의 작성 중 상태와 실제 적용된 모델을 구분하세요. 사용자 정의 필터처럼 비동기 처리가 있는 경우 setFilterModel의 반환 보고서를 기다려야 합니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

- [설치와 연결 · 공통 예제 데이터](https://grid.syidax.com/ko/docs/guides/getting-started.md)

<a id="example-1"></a>

## 예제 1. 제품명과 수량 입력칸

열 종류에 맞는 기본 필터를 켭니다.

```javascript
grid.headerFilterRow = true;
grid.columnDefs = [{ field: 'product', headerName: '제품', filter: 'text' },
  { field: 'quantity', headerName: '수량', filter: 'number' }];
```

결과 확인: 제품명은 텍스트, 수량은 숫자 조건으로 검색합니다. 문자열 100과 숫자 100의 의미가 다르지 않도록 원본 타입을 확인합니다.

<a id="example-2"></a>

## 예제 2. 사용자 필터 보관

적용된 모델을 보관했다가 같은 열 정의에서 복원합니다.

```javascript
const saved = await grid.getFilterModel();
const report = await grid.setFilterModel(saved);
console.log(report);
```

결과 확인: 복원은 모델 구조와 열 종류가 맞아야 합니다. 반환 보고서에서 적용되지 않은 항목을 확인하세요.

<a id="example-3"></a>

## 예제 3. 조건 초기화

검색 결과가 없을 때 모든 필터 계열을 해제하는 동작입니다.

```javascript
await grid.setFilterModel(null);
grid.addEventListener('filterChanged', event => console.log(event.detail));
```

결과 확인: null은 전역 필터 모델 해제입니다. 특정 열 하나만 지우려면 setColumnFilterModel 계약을 사용하고 다른 조건을 유지합니다.

<a id="pitfalls"></a>

## 조합할 때와 문제를 해결할 때

빈칸·null·문자열 숫자의 처리 정책을 테스트하세요. 날짜는 시간대와 저장 형식까지 맞아야 같은 날짜 조건이 일관되게 동작합니다.

열 필터, 빠른 검색, 외부 필터, 고급 조건이 겹칠 수 있습니다. 결과가 적을 때는 어느 조건이 남아 있는지 각각 읽어보세요.

<a id="related-api"></a>

## 이 기능에 사용하는 API

- [headerFilterRow](https://grid.syidax.com/ko/docs/options/headerFilterRow.md) — 머리글 아래에서 열별 필터를 조작하는 행을 표시합니다.
- [filter](https://grid.syidax.com/ko/docs/columns/filter.md) — 이 열에 사용할 기본 필터 종류 또는 사용자 필터 정의입니다.
- [floatingFilterComponent](https://grid.syidax.com/ko/docs/columns/floatingFilterComponent.md) — 머리글 아래에 표시할 사용자 필터 입력 컴포넌트입니다.
- [getFilterModel](https://grid.syidax.com/ko/docs/methods/getFilterModel.md) — 현재 필터 계열을 통합한 상태를 읽습니다.
- [setFilterModel](https://grid.syidax.com/ko/docs/methods/setFilterModel.md) — 검증된 통합 필터 모델을 적용합니다. null은 모든 필터 계열을 지우며 유효하지 않은 모델은 보고서를 확인해야 합니다.
- [getColumnFilterInstance](https://grid.syidax.com/ko/docs/methods/getColumnFilterInstance.md) — 열의 사용자 필터 인스턴스를 조회합니다. 아직 생성되지 않았거나 없는 경우 null일 수 있습니다.
- [getColumnFilterModel](https://grid.syidax.com/ko/docs/methods/getColumnFilterModel.md) — 한 열의 현재 필터 모델을 읽습니다.
- [setColumnFilterModel](https://grid.syidax.com/ko/docs/methods/setColumnFilterModel.md) — 한 열의 필터 모델을 설정하고 결과를 반환합니다. 전체 필터 상태를 바꾸는 setFilterModel과 구분합니다.
- [onFilterChanged](https://grid.syidax.com/ko/docs/methods/onFilterChanged.md) — 필터 조건이 변경되었음을 알려 현재 행 필터 결과를 다시 계산하게 합니다.
- [destroyColumnFilter](https://grid.syidax.com/ko/docs/methods/destroyColumnFilter.md) — 특정 열의 필터 인스턴스를 해제합니다.
- [recreateColumnFilter](https://grid.syidax.com/ko/docs/methods/recreateColumnFilter.md) — 특정 열의 필터 인스턴스를 다시 생성합니다.
- [filterChanged](https://grid.syidax.com/ko/docs/events/filterChanged.md) — 적용된 필터가 바뀌었을 때 발생합니다. 입력 중 변경인 filterModified와 구분합니다.
- [filterModified](https://grid.syidax.com/ko/docs/events/filterModified.md) — 필터 입력이 수정되었을 때 발생합니다. 적용 버튼이 있는 필터에서는 아직 결과 행에 반영되기 전일 수 있습니다.

<a id="next"></a>

## 함께 읽기

- [행·열·ID의 관계](https://grid.syidax.com/ko/docs/guides/concepts.md)
- [결과와 이벤트 연결](https://grid.syidax.com/ko/docs/guides/data-event-access.md)
- [Features에서 살펴보기](https://grid.syidax.com/grid/column-filters) — 직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.