[React] react-virtuoso TableVirtuoso 빈배열일 때 EmptyPlaceholder 속성 활용하는 방법

Intro

안녕하세요. 이번 시간에는 TableVirtuoso 사용 중 데이터가 빈 배열일 때 EmptyPlaceholder 속성을 활용하는 방법에 대해 알아보겠습니다. 

 

Example

현재 코드는 다음과 같다고 가정해봅시다. 이 상태에서 dataList가 null이거나 빈배열일 때 특정 데이터가 비어있다는 특정 텍스트를 표시해보겠습니다. 

const VirtuosoTableComponents = (totalColSpan: number): TableComponents<any> => ({
  Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
    <TableContainer {...props} ref={ref} />
  )),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
  ),
  TableHead: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableHead {...props} ref={ref} />
  )),
  TableRow,
  TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableBody {...props} ref={ref} />
  ))
});

const VirtualizedTable = <T extends TypeRES>({
  headers,
  rows,
}: Props<T>) => {
  const theme = useTheme();
  const [dataList, setDataList] = useState<T[]>(rows);

  useEffect(() => {
    setDataList(rows);
  }, [rows]);

  let totalColSpan = 1;

  headers?.forEach(header => {
    totalColSpan += header.subHeaders?.length ?? 1;
  });

  const memoizedVirtuosoTableComponents = useMemo(
    () => VirtuosoTableComponents(totalColSpan),
    [totalColSpan]
  );

  const fixedHeaderContent = () => {
    const filteredHeaders = headers?.filter(header => !header.hide);

    return (
      <>
       ...
      </>
    );
  };

  const rowContent = (_index: number, row: any) => {
    // Row content 
  };

  return (
    <Box style={{ height: 600, width: '100%', backgroundColor: 'transparent', overflowX: 'auto' }} >
      <TableVirtuoso
        data={dataList}
        components={memoizedVirtuosoTableComponents}
        fixedHeaderContent={fixedHeaderContent}
        itemContent={rowContent}
      />
    </Box>
  );
};

export default VirtualizedTable;

 

How to solve the problem

VirtuosoTableComponents 컴포넌트 선언 시 EmptyPlaceholder 를 추가하여 활용해주면 됩니다. <TableBody> 태그부터 활용하여 빈배열일 때 표시하고자 하는 텍스트 혹은 아이콘을 넣어주시면 됩니다. 저는 colSpan 속성도 추가로 전달하여 테이블의 header에 맞게 colSpan도 적용되도록 하였습니다. 

const VirtuosoTableComponents = (totalColSpan: number): TableComponents<any> => ({
  Scroller: React.forwardRef<HTMLDivElement>((props, ref) => (
    <TableContainer {...props} ref={ref} />
  )),
  Table: (props) => (
    <Table {...props} sx={{ borderCollapse: 'separate', tableLayout: 'fixed' }} />
  ),
  TableHead: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableHead {...props} ref={ref} />
  )),
  TableRow,
  TableBody: React.forwardRef<HTMLTableSectionElement>((props, ref) => (
    <TableBody {...props} ref={ref} />
  )),
  EmptyPlaceholder: React.forwardRef(() => {
    return (
      <TableBody>
        <TableRow>
          <TableCell align="center" colSpan={totalColSpan -1 }>
            <Typography>데이터가 없습니다.</Typography>
          </TableCell>
        </TableRow>
      </TableBody>
    );
  }),
});