두 개의 열이 있는 React Table useGlobalFilter

이번 주에는 React Table 으로 만든 테이블을 필터링해야 했습니다. React 테이블은 확장성이 뛰어나므로 이에 대한 후크가 있습니다: useFilters 및 useGlobalFilter . useFilter는 개별 열로 필터링하고 useGlobalFilter는 모든 열의 콘텐츠로 필터링합니다.

그러나 단일 입력으로 두 개의 열을 필터링해야 했습니다. 내 테이블은 재료에 대한 것이며 코드, 이름, 단위당 가격, 공급업체 등에 대한 열이 있습니다. 이름과 코드로 필터링해야 합니다. useFilters는 교차를 수행하므로 사용할 수 없습니다(즉, 검색 쿼리가 코드 행과 이름 행 모두에 있어야 함).

끝 코드 샌드박스 참조: https://codesandbox.io/s/fuzzy-text-global-filter-rcy1f?file=/src/Table.tsx



필터링Prepsheets.com 코드별 성분

고맙게도 useGlobalFilter 로 이 작업을 수행할 수 있습니다.

import { 
    ..., 
    useGlobalFilter,
} from 'react-table'

...

const {
    ...,
    setGlobalFilter,
} = useTable(
    {
        ...
    },
    ...
    useGlobalFilter,
);

코드 샌드박스 참조: https://codesandbox.io/s/all-columns-global-filter-buof9?file=/src/Table.tsx
setGlobalFilter를 사용하여 이제 모든 열의 콘텐츠로 필터링할 수 있습니다. 필터링할 열을 제한하기 위해 사용자 지정globalFilter 함수를 지정합니다.

import {
    ...
    useGlobalFilter,
    Row, // Typescript
    IdType, // Typescript
}
import React, { ..., useCallback } = 'react'

...

const ourGlobalFilterFunction = useCallback(
    // This is Typescript if you're using JS remove the types (e.g. :string)
    (rows: Row<T>[], ids: IdType<T>[], query: string) => {
        return rows.filter((row) => 
            row.values['code'].includes(query) ||
            row.values['name'].includes(query)
        );
    },
    [],
);

const {
    ...
    setGlobalFilter,
} = useTable(
    {
        globalFilter: ourGlobalFilterFunction
    },
    ...
    useGlobalFilter,
);

코드 샌드박스 참조: https://codesandbox.io/s/specific-columns-global-filter-n1k4v?file=/src/Table.tsx

그러나 내 경우에는 몇 군데에서 사용하는 Table 구성 요소 안에 있으므로 ourGlobalFilterFunction가 필터링을 위해 임의의 열 이름을 사용하도록 합시다. 또한 필터 쿼리를 Table 에 대한 소품으로 전달합니다.

interface TableProps {
    filters: string[];
    filter: string;
}

const Table: React.FC<TableProps> = ({
    filters,
    filter,
}): React.ReactComponent => {

    const ourGlobalFilterFunction = useCallback(
        // This is Typescript if you're using JS remove the types (e.g. :string)
        (rows: Row<T>[], ids: IdType<T>[], query: string) => {
            return rows.filter((row) => 
                for (const filter of filters) {
                    return row.values[filter].includes(query)
                }
            );
        },
        [filters],
    );

    const {
      ...
      setGlobalFilter,
    } = useTable(
        {
            globalFilter: ourGlobalFilterFunction
        },
        ...
        useGlobalFilter,
    );

    useEffect(() => {
        setGlobalFilter(filter) // Set the Global Filter to the filter prop.
    }, [filter, setGlobalFilter]);

    return (
        ...
    );
}

코드 샌드박스: https://codesandbox.io/s/filter-props-global-filter-i18bd?file=/src/Table.tsx

마지막으로 퍼지 텍스트 필터링을 수행하고 싶습니다. 이를 위해 match-sorter 라이브러리를 사용합니다.

npm install match-sorter

import { matchSorter } from 'match-sorter';

...

const globalFilter = useCallback(
    (rows: Row<T>[], ids: IdType<T>[], query: string) => {
        return matchSorter(rows, query, {
            keys: filters.map((columnName) => `values.${columnName}`),
        });
    },
    [filters],
);

코드 샌드박스: https://codesandbox.io/s/fuzzy-text-global-filter-rcy1f?file=/src/Table.tsx