React Grid 검색 필터 -Ignite UI for React

React 그리드의 Ignite UI for React 검색 필터 기능은 데이터 수집에서 값을 찾는 과정을 가능하게 합니다. 이 기능을 설정하기 쉽게 만들었으며, 검색 입력 박스, 버튼, 키보드 내비게이션 등 유용한 기능들로 구현하여 더욱 나은 사용자 경험을 제공합니다. 브라우저는 기본적으로 콘텐츠 검색 기능을 제공하지만, 대부분의 경우IgrGrid 시야에서 벗어난 열과 행을 가상화합니다. 이 경우 네이티브 브라우저 검색은 가상화된 셀 내 데이터를 검색할 수 없는데, 이는 DOM의 일부가 아니기 때문입니다. 우리는 React Material 테이블 기반 그리드를 다음과 같이 확장했습니다 검색 API이 기능을 통해 검색할 수 있습니다. 가상화된 콘텐츠IgrGrid.

React 검색 예제

다음 예시는 모든 열과 행에서 검색할 수 있는 검색 입력 박스와 각 열별 특정 필터링 옵션을 나타냅니다IgrGrid.

React Search Usage

그리드 설정

그리드를 생성하고 이를 데이터에 바인딩하는 것부터 시작해 보겠습니다. 또한 우리가 사용할 구성 요소에 대한 몇 가지 사용자 정의 스타일을 추가할 것입니다!

.gridSize {
    --ig-size: var(--ig-size-small);
}

<IgrGrid ref={gridRef} className="gridSize" autoGenerate={false} allowFiltering={true} data={data}>
    <IgrColumn field="IndustrySector" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="IndustryGroup" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="SectorType" dataType="string" sortable={true}></IgrColumn>
    <IgrColumn field="KRD" dataType="number" sortable={true}></IgrColumn>
    <IgrColumn field="MarketNotion" dataType="number" sortable={true}></IgrColumn>
</IgrGrid>

좋아요, 이제 우리의IgrGrid 검색 API를 준비해봅시다! 현재 검색된 텍스트와 검색이 대소문자 구분 또는 정확히 일치하는지 저장하는 데 사용할 수 있는 몇 가지 속성을 만들 수 있습니다.

const gridRef = useRef<IgrGrid>(null);
const [caseSensitiveSelected, setCaseSensitiveSelected] = useState<boolean>(false);
const [exactMatchSelected, setExactMatchSelected] = useState<boolean>(false);
const [searchText, setSearchText] = useState('');

이제 검색 입력을 만들어 봅시다! 새로 생성된 입력에 oursearchText를 속성에value 바인딩하고 이벤트에inputOccured 구독함으로써 사용자의 모든searchText 수정을 감지할 수 있습니다. 이렇게 하면 theIgrGrid와 메서드를findNextfindPrev 사용해 모든searchText 발생 항목을 하이라이트하고, 호출한 메서드에 따라 다음 또는 이전 발생으로 스크롤할 수 있습니다.

와findNext 메서드findPrev 모두 세 가지 인수를 가집니다:

Text: string (우리가 찾고 있는 텍스트)
(선택)CaseSensitive: boolean (검색이 대소문자 구분 여부에 따라 기본값은 false임)
(선택적 선택)ExactMatch: 불리언 (검색이 정확히 일치하는지 여부에 따라 기본값은 거짓임)

정확한 일치로 검색할 때, 검색 API는 대문자 민감도를 고려하여 완전히SearchText 맞는 셀 값만 결과로 강조 표시합니다. 예를 들어, 'software '와 'Software' 문자열은 대문자 민감도를 무시한 채 정확히 일치합니다.

위의 메서드들은 숫자 값(주IgrGrid 어진 문자열을 포함하는 횟수)을 반환합니다.

const handleOnSearchChange = (event: IgrComponentValueChangedEventArgs) => {
    setSearchText(event.detail);
    nextSearch(event.detail, caseSensitiveSelected, exactMatchSelected);
}

<IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}>
</IgrInput>

검색 버튼 추가

검색 결과 중에서 자유롭게 검색하고 탐색하기 위해, 각 버튼의 클릭 이벤트 핸들러 내에서 와findNext 메서드findPrev를 호출하여 몇 개의 버튼을 만들어 보겠습니다.

const prevSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findPrev(text, caseSensitive, exactMatch);
}

const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findNext(text, caseSensitive, exactMatch);
}

<IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
</IgrIconButton>
<IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
</IgrIconButton>

키보드 검색 추가

또한 사용자가 키보드의 화살표 키와 ENTER 키를 사용해 결과를 탐색할 수 있도록 할 수 있습니다. 이를 위해 검색 입력의 키다운 이벤트를 처리하여 메서드로PreventDefault 입력의 기본 캐럿 이동을 방지하고, 사용자가 누른 키에 따라 thefindNext /findPrev 메서드를 호출할 수 있습니다.

const searchKeyDown = (e: KeyboardEvent<HTMLElement>) => {
    if (e.key === 'Enter') {
        e.preventDefault();
        nextSearch(searchText, caseSensitiveSelected, exactMatchSelected);
    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
        e.preventDefault();
        prevSearch(searchText, caseSensitiveSelected, exactMatchSelected);
    }
}

 <div onKeyDown={searchKeyDown}>
    <IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}></IgrInput>
</div>

대소문자 구분 및 정확히 일치

이제 사용자가 검색을 대소문자 구분 또는 정확히 일치할지에 따라 선택할 수 있게 하겠습니다. 이를 위해 컴포넌트와IgrChip 불리언 상태 변수를 사용하여 IgrChip이 선택되었는지 여부를 알 수 있습니다.

const [caseSensitiveSelected, setCaseSensitiveSelected] = useState<boolean>(false);
const [exactMatchSelected, setExactMatchSelected] = useState<boolean>(false);

const handleCaseSensitiveChange = (event: IgrComponentBoolValueChangedEventArgs) => {
    setCaseSensitiveSelected(event.detail);
    nextSearch(searchText, event.detail, exactMatchSelected);
}

const handleExactMatchChange = (event: IgrComponentBoolValueChangedEventArgs) => {
    setExactMatchSelected(event.detail);
    nextSearch(searchText, caseSensitiveSelected, event.detail);
}

<IgrChip selectable={true} onSelect={handleCaseSensitiveChange}>
    <span>Case Sensitive</span>
</IgrChip>
<IgrChip selectable={true} onSelect={handleExactMatchChange}>
    <span>Exact Match</span>
</IgrChip>

고집

만약 우리가 기록을 필터링하고 정렬IgrGrid 하거나 추가하거나 삭제하고 싶다면 어떻게 해야 할까요? 이러한 작업 후에는 현재 검색의 하이라이트가 자동으로 업데이트되어 일치하는SearchText 텍스트 위에 유지됩니다! 더불어, 검색은 페이징과 함께 작동하며, 속성 변경IgrGridPerPage 에도 하이라이트를 유지합니다.

아이콘 추가

다른 구성 요소 중 일부를 사용하여 풍부한 사용자 인터페이스를 만들고 전체 검색 창의 전반적인 디자인을 개선할 수 있습니다! 검색 입력 왼쪽에 멋진 검색 또는 삭제 아이콘, 검색 옵션을 위한 몇 개의 칩, 오른쪽 탐색을 위한 멋진 리플 스타일 버튼과 결합된 일부 재료 디자인 아이콘을 가질 수 있습니다.

입력 오른쪽에 두 개의 리플 스타일 버튼과 재료 아이콘을 추가하여 탐색 내비게이션 버튼을 만드는 것부터 시작해 보겠습니다. 클릭 이벤트의 핸들러는 동일하게 유지되며, 메서드를 호출합니다findNextfindPrev.

속성 를 토글하는CaseSensitiveExactMatch 칩 몇 개를 보여주기 위해서입니다. 체크박스를 두 개의 멋진 칩으로 교체했습니다. 칩이 클릭될 때마다 해당 칩의 핸들러를 호출합니다.

const prevSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findPrev(text, caseSensitive, exactMatch);
}

const nextSearch = (text: string, caseSensitive: boolean, exactMatch: boolean) => {
    gridRef.current.findNext(text, caseSensitive, exactMatch);
}

<div slot="suffix">
    <IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
        <IgrRipple></IgrRipple>
    </IgrIconButton>
    <IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
        <IgrRipple></IgrRipple>
    </IgrIconButton>
</div>

이제 입력 왼쪽에 검색 및 지우기 아이콘을 추가해 보겠습니다.

const clearSearch = () => {
    setSearchText('');
    gridRef.current.clearSearch();
}

<div slot="prefix">
    {searchText.length === 0 ? (
        <IgrIconButton variant="flat" name="search"  collection="material">
        </IgrIconButton>
        ) : (
        <IgrIconButton variant="flat" name="clear" collection="material" onClick={clearSearch}>
        </IgrIconButton>
    )}
</div>

마지막으로, 이것은 모든 것을 결합할 때의 최종 결과입니다.

useEffect(() => {
    registerIconFromText("search", searchIconText, "material");
    registerIconFromText("clear", clearIconText, "material");
    registerIconFromText("prev", prevIconText, "material");
    registerIconFromText("next", nextIconText, "material");
}, []);

<IgrInput name="searchBox" value={searchText} onInput={handleOnSearchChange}>
    <div slot="prefix">
        {searchText.length === 0 ? (
            <IgrIconButton variant="flat" name="search"  collection="material">
            </IgrIconButton>
            ) : (
            <IgrIconButton variant="flat" name="clear" collection="material" onClick={clearSearch}>
            </IgrIconButton>
        )}
    </div>
    <div slot="suffix">
        <IgrIconButton variant="flat" name="prev" collection="material" onClick={() => prevSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
            <IgrRipple></IgrRipple>
        </IgrIconButton>
        <IgrIconButton variant="flat" name="next" collection="material" onClick={() => nextSearch(searchText, caseSensitiveSelected, exactMatchSelected)}>
            <IgrRipple></IgrRipple>
        </IgrIconButton>
    </div>
</IgrInput>

알려진 제한 사항

한정	설명
템플릿을 사용하여 셀에서 검색	검색 기능 강조 표시는 기본 셀 템플릿에서만 작동합니다. 사용자 정의 셀 템플릿이 포함된 열이 있는 경우 강조 표시가 작동하지 않으므로 열 포맷터와 같은 대체 접근 방식을 사용하거나`searchable` 열의 속성을 false로 설정합니다.
원격 가상화	원격 가상화를 사용하면 검색이 제대로 작동하지 않습니다.
텍스트가 잘린 셀	셀의 텍스트가 너무 커서 맞지 않고 찾고 있는 텍스트가 줄임표로 잘려도 셀로 스크롤하여 일치 횟수에 포함시키지만 아무것도 강조 표시되지 않습니다.

API 참조

이 글에서는 검색 결과 간 탐색을 위한 추가 기능과 함께 자체 검색창IgrGrid을 구현했습니다. 또한 아이콘, 칩, 입력 같은 추가 Ignite UI for React 부품도 사용했습니다. 검색 API는 아래에 나열되어 있습니다.

IgrGrid methods:

IgrColumn properties:

searchable

사용된 관련 API가 포함된 추가 구성요소:

추가 리소스

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

React Grid 검색 필터