SYIDAX / DATA GRID
열마다 다른 조건
텍스트와 숫자 등 값의 종류에 맞는 열 필터를 사용합니다.
열마다 다른 조건샘플 주문 데이터
120 rowsGrid를 불러오는 중입니다…
옵션
아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.
최근 결과
이 메뉴에서는 열 필터가 켜져 있습니다. 헤더 아래 제품 필터에 Atlas를 입력해 보세요.
코드 보기
현재 미리보기
코드에 포함된 샘플 데이터 · 6행
사용 가이드
#제품 이름과 수량 조건처럼 서로 다른 열에 조건을 걸어 필요한 주문만 남길 때 사용합니다.
직접 해보기
- 열별 입력칸 찾기
이 메뉴에서는 열 필터가 켜져 있습니다. 헤더 아래 제품 필터에 Atlas를 입력해 보세요.
- 조건 함께 사용
다른 열의 필터도 사용하면 두 조건에 맞는 행만 남습니다. 숫자 열은 숫자용 조건을 사용합니다.
- 필터 지우기
입력한 조건을 지우고 주문이 다시 나타나는지 확인하세요. 열 필터 옵션을 끄면 필터 입력줄의 표시도 바뀝니다.
확인할 결과
조건에 맞는 주문만 보이고 filterChanged 이벤트에서 변경한 열과 필터 조건을 확인할 수 있습니다.
이 예제는 열 필터만 사용합니다. 예상보다 적은 행이 보이면 다른 열에 남아 있는 조건도 확인하세요.
알아두면 쉬운 용어
- headerFilterRow
- 헤더 아래에 필터 입력줄을 표시하는 설정입니다.
- filter
- 해당 열에 사용할 텍스트·숫자 등의 필터 종류입니다.
API reference
#주요 속성
| Attribute / Property | 타입 / 기본값 | 설명 |
|---|---|---|
| headerFilterRow | boolean기본값 false | render an inline filter row under the column headers (AG Grid "floating filters"). Scalar columns get an input that edits the current condition's value in place; set/multi/range states show a summary that opens the full dropdown. Default `false`. |
이벤트2
| 이벤트 | detail 타입 | 설명 |
|---|---|---|
GridFilterChangedDetail | Fires when a column filter is applied, replaced, or cleared. | |
GridFilterModifiedDetail | Fires when a lifecycle filter reports an unapplied UI modification. |
메서드8
| 메서드 / 인수 | 반환 타입 | 설명 |
|---|---|---|
Promise<SyGridFilterSlice> | The complete global filter model (built-in, custom, quick, condition). | |
| model: SyGridFilterSlice | null | Promise<FilterSliceApplyResult['report']> | Replace the global filter model; `null` clears every filter family. Custom models flow through the Phase C facade and are awaited, so the returned report reflects async completion. Fail-closed: an invalid model returns its issues in `invalidBuiltIn` semantics with zero writes. |
| columnId: string | Promise<
GridFilterInstance<GridData, TColumnValue, TModel, unknown> | null
> | Return the mounted lifecycle filter instance for one column. |
| columnId: string | Promise<TModel | null> | Read the canonical lifecycle-filter model owned by the grid facade. |
| columnId: string, model: TModel | null | Promise<boolean> | Set one lifecycle-filter model and await floating/peer synchronization. |
Promise<void> | Synchronize models after an advanced caller mutates a raw filter instance. Prefer setColumnFilterModel for normal application code. | |
| columnId: string | Promise<boolean> | Destroy a lifecycle filter and schedule deterministic lazy recreation. |
| columnId: string, options?: { preserveModel?: boolean } | Promise<boolean> | Recreate a mounted lifecycle filter, optionally retaining its model. |
ColumnDef2
| ColumnDef | 타입 / 필수 여부 | 설명 |
|---|---|---|
PRO 옵션 | | ColumnFilterDecl
| string
| GridFilterDefinition<TData, TValue, unknown, TContext>선택 | Filter type. `true` enables the built-in text filter; `false` disables it. an ordered array stacks several kinds on this column in one dropdown, AND-combined — see . |
| string
| GridFloatingFilterDefinition<unknown, TContext>선택 | Optional lifecycle floating filter rendered in the header filter row. |
EXPLORE CAPABILITIES
기능별로 자세히 살펴보기
기능별 사용 상황과 설정 방법을 살펴보세요. 직접 체험하는 예제와 앱에서 연결하는 기능을 각 가이드에 안내합니다.