react-data-grid 관련 질문 입니다

Question

react-data-grid 관련 질문 한번 봐주세여 ~!https://github.com/hyunsokstar/study-project-for-react-data-grid/blob/main/README.md헤더 필터 설정 하는데 css 적인 설정이 어려운데문제:react-data-grid 7.0 으로 테이블을 그리고 닉네임에 헤더 필터를 적용 하려고 함그런데 헤더 필터에 칼럼 이름을 출력하면 그 밑에 필터를 위한 인풋이 안보여요관련 코드는 pr1, pr2 로 검색해서 봐주세여code```import React, { useState, useEffect, useContext, createContext, useMemo } from 'react';import { Box, Input } 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';import styles from './styles.module.scss';import { css } from '@emotion/react';interface Filter extends Omit {complete: number | undefined;enabled: boolean;}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;}function inputStopPropagation(event: React.KeyboardEvent) {if (['ArrowLeft', 'ArrowRight'].includes(event.key)) {event.stopPropagation();}}const filterColumnClassName = 'filter-cell';const filterClassname = css`background-color: "red";`;// const filterClassname = css`// inline-size: 100%;// padding: 4px;// font-size: 14px;// `;interface SummaryRow {id: string;totalCount: number;yesCount: number;}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: 'Nick Name',renderHeaderCell: (p: any) => {console.log("p :", p);return ( {...p} tabIndex={3}>{({ filters, ...rest }) => {console.log("filters : ", filters);console.log("filters, ...rest : ", { filters, ...rest });return (<>{/ ## pr1 원래 여기서 p.column.name 을 출력하면 안됨 /}{p.column.name}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);const filteredRows = useMemo(() => {return userRows.filter((r) => {return ((filters.nickname !== undefined ? r.nickname.includes(filters.nickname) : true));});}, [userRows, filters]);// const summaryRows = useMemo((): readonly SummaryRow[] => {// return [// {// id: 'total_0',// totalCount: userRows.length,// yesCount: userRows.filter((r) => r).length// }// ];// }, [userRows]);return ({filteredRows.length} 개);};function FilterRenderer({tabIndex,column,children}: RenderHeaderCellProps & {children: (args: { tabIndex: number; filters: IUserFilter }) => React.ReactElement;}) {const filters = useContext(FilterContext)!;console.log("children : ", children);console.log("tabIndex : ", tabIndex);return (<>{/ ## pr2 원래 여기서 출력해야 함 근데 여기서 출력하면 nickname 만 보임 /}

{column.name}

{children({ tabIndex, filters })}

);}export default HeaderFilter;

react-data-grid 관련 질문 입니다

0개의 답변

Q&A 목록