Excel Filtering in React Grid

React Grid는 Excel과 유사한 필터링 UI를 제공하는 Excel 스타일 필터링 기능을 노출합니다. 대규모 데이터세트 작업 프로세스를 단순화합니다. 주요 아이디어는 가장 관련성이 높은 데이터를 필터링하고 관련 없는 항목을 제거하도록 돕는 것입니다.

React Grid Excel Style Filtering Example

Usage

IgrGrid 구성 요소의 Excel 스타일 필터링을 켜려면 두 개의 입력을 설정해야 합니다. allowFiltering은 true로 설정되어야 하며 filterMode ExcelStyleFilter 값으로 설정되어야 합니다.

<IgrGrid data={nwindData} autoGenerate="true" allowFiltering="true" filterMode={FilterMode.ExcelStyleFilter}>
</IgrGrid>

상호 작용

특정 열에 대한 필터 메뉴를 열려면 헤더에 있는 React 필터 아이콘을 클릭해야 합니다. 또한 선택한 헤더에서 Ctrl + Shift + L 조합을 사용할 수 있습니다. 필터링 기능과 함께 열을 정렬, 고정, 이동, 선택 또는 숨길 수 있는 경우 활성화된 기능에 사용할 수 있는 버튼이 표시됩니다.

필터가 적용되지 않으면 목록의 모든 항목이 선택됩니다. 목록 위의 입력에서 필터링할 수 있습니다. 데이터를 필터링하려면 목록에서 항목을 선택/선택 취소하고 적용 버튼을 클릭하거나 Enter 키를 누를 수 있습니다. 목록 항목을 통해 적용된 필터링은 equals 연산자를 사용하여 필터 표현식을 생성하고 표현식 사이의 논리 연산자는 OR 입니다.

검색창에 내용을 입력하고 필터를 적용하면 검색 기준에 맞는 항목만 선택됩니다. 그러나 현재 필터링된 항목에 항목을 추가하려면 필터에 현재 선택 항목 추가 옵션을 선택해야 합니다.

필터를 지우려면 모두 선택 옵션을 선택한 후 적용 버튼을 클릭하면 됩니다.

다양한 표현식으로 필터를 적용하려면 텍스트 필터를 클릭하면 특정 열에 대해 사용 가능한 모든 필터 연산자가 포함된 하위 메뉴가 열립니다. 그 중 하나를 선택하면 다양한 필터 및 논리 연산자를 사용하여 원하는 만큼 표현식을 추가할 수 있는 사용자 정의 필터 대화 상자가 열립니다. 필터를 지울 수 있는 지우기 버튼도 있습니다.

정렬, 고정 및 숨기기 기능은 해당 입력(sortable, selected, disablePinning, disableHiding)을 사용하여 필터 메뉴에서 제거할 수 있습니다.

<IgrGrid data={nwindData} autoGenerate="false" allowFiltering="true" filterMode={FilterMode.ExcelStyleFilter}>
    <IgrColumn field="ProductName" header="Product Name" sortable="true" dataType="String">
    </IgrColumn>
    <IgrColumn field="QuantityPerUnit" header="Quantity Per Unit" sortable="false" disable-pinning="true" disable-hiding="true" data-type="String">
    </IgrColumn>
    <IgrColumn field="UnitPrice" header="Unit Price" disable-pinning="true" disable-hiding="true" sortable="true" data-type="Number">
    </IgrColumn>
    <IgrColumn field="OrderDate" header="Order Date" sortable="false"  data-type="Date">
    </IgrColumn>
    <IgrColumn field="Discontinued" header="Discontinued" sortable="true" data-type="Boolean">
    </IgrColumn>      
</IgrGrid>

아래 샘플에서 제품 이름 및 단종 열에는 네 가지 기능이 모두 활성화되어 있고, 단위당 수량에는 세 가지 기능이 모두 비활성화되어 있으며, 단가에는 정렬만 있고, 주문 날짜 에는 고정 및 숨기기만 있으며 모두 selectable.

Templates

Excel 스타일 필터 메뉴를 추가로 사용자 정의하려면 excelStyleHeaderIconTemplate 속성을 사용하여 메뉴 헤더 아이콘에 대한 사용자 정의 템플릿을 정의할 수 있습니다.

다음 코드는 excelStyleHeaderIconTemplate 사용하여 Excel 스타일 필터 메뉴를 사용자 정의하는 방법을 보여줍니다.

const webGridFilterAltIconTemplate = ({dataContext: IgrCellTemplateContext}) => {
  return (
    <img 
      height="15px" 
      width="15px" 
      src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" 
      title="Continued" 
      alt="Continued" 
    />
  );
}

<IgrGrid autoGenerate="true" allowFiltering="true" filterMode="excelStyleFilter" 
    excelStyleHeaderIconTemplate={webGridFilterAltIconTemplate}>
</IgrGrid>

Styling

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

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

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

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-list-item-background: #ffcd0f;
}

Demo

API References

Additional Resources

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