React Grid 고급 필터링

React Grid의 Ignite UI for React IgrGrid의 모든 열에 대한 필터링 조건을 사용하여 다양한 그룹을 생성할 수 있는 대화 상자를 제공하여 데이터를 조작할 수 있습니다.

React Grid Advanced Filtering Example

Interaction

고급 필터링 대화 상자를 열려면 그리드 도구 모음에서 고급 필터링 버튼을 클릭해야 합니다. 고급 필터가 적용되지 않은 경우 AND 또는 OR로 연결된 필터링 조건 그룹을 만드는 것부터 시작해야 합니다. 그런 다음 필터링 조건이나 하위 그룹을 추가할 수 있습니다.

필터링 조건을 추가하려면 filterable 열, dataType 열을 기반으로 하는 피연산자 및 피연산자가 단항이 아닌 경우 값을 선택해야 합니다. 조건이 커밋되면 조건 정보가 포함된 칩이 나타납니다. 칩을 마우스로 가리키거나 클릭하면 칩을 수정하거나 칩 바로 뒤에 다른 조건이나 그룹을 추가할 수 있는 옵션이 제공됩니다.

필터링 조건 칩을 두 개 이상 선택하면 그룹을 생성하거나 필터를 삭제할 수 있는 옵션이 포함된 컨텍스트 메뉴가 나타납니다. 선택한 조건으로 그룹을 생성하도록 선택한 경우 새로 생성된 그룹은 최상위 선택된 조건이 배치된 위치에 나타납니다.

그룹을 선택하려면 연결 조건 AND 또는 OR에 따라 색상이 지정된 수직선을 클릭할 수도 있습니다. 단일 그룹을 선택하면 필터링 논리를 변경하거나 그룹을 해제하거나 삭제할 수 있는 옵션이 포함된 상황에 맞는 메뉴가 표시됩니다.

필터링 조건 및 그룹을 생성할 준비가 된 후 데이터를 필터링하려면 적용 버튼을 클릭해야 합니다. 고급 필터를 수정했지만 변경 사항을 유지하지 않으려면 취소 버튼을 클릭해야 합니다. 필터 지우기 버튼을 클릭하여 고급 필터를 지울 수도 있습니다.

Usage

고급 필터링을 활성화하려면 allowAdvancedFiltering 입력 속성을 true로 설정해야 합니다.

<IgrGrid data={nwindData} autoGenerate="false" ref={gridRef} allowAdvancedFiltering="true">
    <IgrGridToolbar></IgrGridToolbar>
</IgrGrid>

고급 필터링은 advancedFilteringExpressionsTree 입력 속성에 저장되는 filteringExpressionsTree 생성합니다. advancedFilteringExpressionsTree 속성을 사용하여 고급 필터링의 초기 상태를 설정할 수 있습니다.

IgrGrid 도구 모음을 표시하지 않으려는 경우 openAdvancedFilteringDialog 및 closeAdvancedFilteringDialog 메서드를 사용하여 프로그래밍 방식으로 고급 필터링 대화 상자를 열고 닫을 수 있습니다.

[!Note] You can enable both the QuickFilter/ExcelStyleFilter and the advanced filtering user interfaces in the IgrGrid. Both filtering user interfaces will work independently of one another. The final filtered result in the IgrGrid is the intersection between the results of the two filters.

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<IgrGrid className="grid"></IgrGrid>

그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-background-or: #d83434;
}

Demo

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.