react-data-grid 헤더 필터 설정 방법을 찾고 있어요

Question

아래 코드는 react-data-grid 7.0 으로 헤더 필터를 설정 해보려고 한건데요import React, { useState, useEffect, useContext, createContext } from 'react'; import { Box } from '@chakra-ui/react'; import DataGrid, { RenderHeaderCellProps } from 'react-data-grid'; import 'react-data-grid/lib/styles.css'; import useApiForGetAllUsersData from '@/hooks/useApiForGetAllUsersData'; import { Row } from '@/types/typeForUserBoard'; const FilterContext = createContext(undefined); interface IUserFilter extends Omit { id: number; email: string; nickname: string; role: string; gender: string; phoneNumber: string; frontEndLevel: number; backEndLevel: number; enabled: boolean; } const HeaderFilter = () => { const [pageNum, setPageNum] = useState(1); const { isPending, error, userRows } = useApiForGetAllUsersData(pageNum); const [filters, setFilters] = useState( (): IUserFilter => ({ id: 0, email: '', nickname: '', role: '', gender: '', phoneNumber: '', frontEndLevel: 1, backEndLevel: 1, enabled: true }) ); const columns = [ { key: 'id', name: 'ID' }, { key: 'email', name: 'Email' }, // { key: 'nickname', name: 'Nickname' }, { key: 'nickname', name: 'Nick Name', // headerCellClass: filterColumnClassName, renderHeaderCell: (p: any) => ( {...p}> {({ filters, ...rest }) => ( setFilters({ ...filters, nickname: e.target.value }) } // onKeyDown={inputStopPropagation} /> )} ) }, { key: 'role', name: 'Role' }, { key: 'gender', name: 'Gender' }, { key: 'backEndLevel', name: 'Backend Level' }, { key: 'frontEndLevel', name: 'Frontend Level' } ]; console.log("userRows from api : ", userRows); return ( ); }; function FilterRenderer({ tabIndex, column, children }: RenderHeaderCellProps & { children: (args: { tabIndex: number; filters: IUserFilter }) => React.ReactElement; }) { const filters = useContext(FilterContext)!; return ( <>

{column.name}

{filters.enabled &&

{children({ tabIndex, filters })}

} ); } export default HeaderFilter; 문제는 출력이 안되고 있습니다 헤더 필터 예제 사이트:http://localhost:5173/#/header-filters해당 코드:https://github.com/adazzle/react-data-grid/blob/main/website/demos/HeaderFilters.tsx인데 무엇이 잘못된 것일까요?

react-data-grid 헤더 필터 설정 방법을 찾고 있어요

0개의 답변

기술 목록