React 그리드 필터링

React Grid의 Ignite UI for React 특정 기준이나 조건에 따라 데이터를 선택적으로 표시하거나 숨길 수 있는 기능입니다. IgrGrid 구성 요소가 풍부한 필터링 API와 모든 필터링 기능을 제공하는 바인딩된 데이터 컨테이너가 있습니다. 여기에서 사용 가능한 필터링 유형은 세 가지입니다.

• 빠른 필터링
• Excel 스타일 필터링
• 고급 필터링

React Grid Filtering Example

The sample below demonstrates IgrGrid's Quick Filter user experience.

Setup

​filterMode이 활성화 allowFiltering 여부와 어떤 필터링 모드를 사용해야 하는지 allowAdvancedFiltering 하기 위해 IgrGrid 다음 속성을 노출 filterable.

속성 allowFiltering 사용하면 다음 옵션을 지정할 수 있습니다.

• false- 해당 그리드에 대한 필터링이 비활성화됩니다. 이것이 기본값입니다.
• true- 해당 그리드에 대한 필터링이 활성화됩니다.

​allowAdvancedFiltering 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

• false- 해당 그리드에 대한 고급 필터링이 비활성화됩니다. 이것이 기본값입니다.
• true- 해당 그리드에 대한 고급 필터링이 활성화됩니다.

​filterMode 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

• QuickFilter- 단순한 필터링 UI입니다. 이것이 기본값입니다.
• ExcelStyleFilter- Excel과 유사한 필터링 UI입니다.

​filterable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

• true- 해당 열에 대한 필터링이 활성화됩니다. 이것이 기본값입니다.
• false- 해당 열에 대한 필터링이 비활성화됩니다.

<IgrGrid data={this.nwindData} autoGenerate="false" ref={this.gridRef} allowFiltering="true">
    <IgrColumn field="ProductName" dataType="String"></IgrColumn>
    <IgrColumn field="UnitPrice" data-type="Number" filterable="false"></IgrColumn>
</IgrGrid>

활성화하려면 고급 필터링 그러나 allowAdvancedFiltering input 속성을 참.

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

[!Note] You can enable both the QuickFilter or 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.

Interaction

특정 열에 대한 필터 행을 열려면 헤더 아래의 '필터' 칩을 클릭해야 합니다. 조건을 추가하려면 입력 왼쪽의 드롭다운을 사용하여 필터 피연산자를 선택하고 값을 입력해야 합니다. 숫자 및 날짜 열의 경우 기본적으로 '같음'이 선택되고, 문자열의 경우 '포함', 부울의 경우 '모두'가 선택됩니다. 'Enter'를 누르면 조건이 확인되고 이제 다른 조건을 추가할 수 있습니다. '조건' 칩 사이에는 논리 연산자를 결정하는 드롭다운이 있으며 기본적으로 'AND'가 선택됩니다. 조건을 제거하려면 칩의 'X' 버튼을 클릭하고, 편집하려면 칩을 선택해야 하며 입력이 칩의 데이터로 채워집니다. 필터 행이 열려 있는 동안 필터링 가능한 열의 헤더를 클릭하여 선택하고 필터 조건을 추가할 수 있습니다.

일부 필터링 조건이 열에 적용되고 필터 행이 닫혀 있는 동안 칩의 닫기 버튼을 클릭하여 조건을 제거하거나 칩 중 하나를 선택하여 필터 행을 열 수 있습니다. 모든 조건을 표시할 공간이 충분하지 않은 경우 추가 조건 수를 나타내는 배지와 함께 필터 아이콘이 표시됩니다. 필터 행을 열기 위해 클릭할 수도 있습니다.

Usage

개발자가 자체 구현으로 대체할 수 있는 모든 표준 필터링 조건은 물론 기본 필터링 전략도 기본적으로 제공됩니다. 또한 사용자 정의 필터링 조건을 쉽게 연결할 수 있는 방법도 제공했습니다. IgrGrid는 현재 단순한 필터링 UI뿐만 아니라 더 복잡한 필터링 옵션도 제공합니다. 열의 설정된 dataType에 따라 올바른 필터링 작업 집합이 필터 UI 드롭다운 내에 로드됩니다. 또한 IgnoreCase 및 초기 Condition 속성을 설정할 수 있습니다.

필터링 기능은 IgrGrid 구성요소에 대해 활성화됩니다. 이는 allowFiltering 입력을 true로 설정하는 것입니다. 기본 filterMode는 QuickFilter 이며 런타임에 변경할 수 없습니다. 특정 열에 대해 이 기능을 비활성화하려면 filterable 입력을 false로 설정하세요.

<IgrGrid autoGenerate="false" allowFiltering="true">
    <IgrColumn field="ProductName" dataType="String"></IgrColumn>
    <IgrColumn field="Price" dataType="Number"></IgrColumn>
    <IgrColumn field="Discontinued" dataType="Boolean" filterable="false"></IgrColumn>
</IgrGrid>

[!Note] If values of type string are used by a column of data type date, the IgrGrid won't parse them to date objects and using filtering conditions won't be possible. If you want to use string objects, additional logic should be implemented on the application level, in order to parse the values to date objects.

Filtering logic

​IgrGrid의 filteringLogic 속성은 IgrGrid에서 여러 열 필터링을 해결하는 방법을 제어합니다. IgrGrid API 또는 IgrGrid 입력 속성을 통해 언제든지 변경할 수 있습니다.

<IgrGrid filteringLogic={FilteringLogic.Or}></IgrGrid>

​AND의 기본값은 현재 적용된 모든 필터링 표현식과 일치하는 행만 반환합니다. 위의 예에 따르면 'ProductName' 셀 값에 'myproduct'가 포함되고 'Price' 셀 값이 55보다 큰 경우 행이 반환됩니다.

​OR로 설정하면 'ProductName' 셀 값에 'myproduct'가 포함되거나 'Price' 셀 값이 55보다 큰 경우 행이 반환됩니다.

Styling

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

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

그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

.grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

Demo

Known Limitations

[!Note] Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox issue.

API References

• IgrGrid
• IgrColumn

Additional Resources

• 가상화 및 성능
• 페이징
• 정렬
• 요약
• 열 이동
• 열 고정
• 열 크기 조정
• 선택

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

• Ignite UI for React Forums
• Ignite UI for React GitHub