대용량 가상 스크롤 (Virtual Scroll)

import * as React from 'react';
import { notification } from 'antd';
import { AXDataGrid, AXDGColumn } from '@axboot/datagrid';
import type { AXDGCellSelectionCopyError } from '@axboot/datagrid';
import { useContainerSize } from '../hooks/useContainerSize';
import DataGridContainer from '../components/DataGridContainer';

interface Props {}

interface IListItem {
  id: string;
  title: string;
  writer: string;
  createAt: string;
}

const list = Array.from(Array(1000000)).map((v, i) => ({
  values: {
    id: `ID_${i}`,
    title: `title_${i}`,
    writer: `writer_${i}`,
    createAt: `2022-09-08`,
  },
}));

function ScrollExample(props: Props) {
  const [notificationApi, contextHolder] = notification.useNotification();
  const [columns, setColumns] = React.useState<AXDGColumn<IListItem>[]>(
    Array.from({ length: 100 }, _ => {
      return [
        {
          key: 'id',
          label: '아이디',
          width: 100,
        },
        {
          key: 'title',
          label: '제목',
          width: 100,
        },
        {
          key: 'writer',
          label: '작성자',
          width: 100,
        },
        {
          key: 'createAt',
          label: '작성일',
          width: 100,
        },
      ];
    }).flat(),
  );

  const containerRef = React.useRef<HTMLDivElement>(null);
  const { width: containerWidth, height: containerHeight } = useContainerSize(containerRef);
  const handleCopyError = React.useCallback(
    (error: AXDGCellSelectionCopyError) => {
      const description =
        error.reason === 'maxClipboardCells'
          ? `선택된 셀이 ${formatNumber(error.actual)}개입니다. 최대 ${formatNumber(error.limit)}개까지만 복사할 수 있습니다.`
          : error.reason === 'maxClipboardTextLength'
            ? `복사할 텍스트가 ${formatNumber(error.actual)}자입니다. 최대 ${formatNumber(error.limit)}자까지만 복사할 수 있습니다.`
            : '브라우저가 클립보드 복사를 거부했습니다.';

      notificationApi.warning({
        message: '복사할 수 없습니다',
        description,
        placement: 'topRight',
      });
    },
    [notificationApi],
  );

  return (
    <DataGridContainer ref={containerRef}>
      {contextHolder}
      <AXDataGrid<IListItem>
        width={containerWidth}
        height={containerHeight}
        data={list}
        columns={columns}
        cellSelectionOptions={{
          onCopyError: handleCopyError,
        }}
        rowChecked={{
          checkedIndexes: [],
          onChange: (ids, selectedAll) => {
            console.log('onChange rowSelection', ids, selectedAll);
          },
        }}
        onClick={item => console.log(item)}
        page={{
          currentPage: 0,
          totalPages: 0,
          totalElements: list.length,
        }}
      />
    </DataGridContainer>
  );
}

function formatNumber(value?: number) {
  return value === undefined ? '-' : value.toLocaleString();
}

export default ScrollExample;

import * as React from 'react';
import './DataGridContainer.css';

interface DataGridContainerProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
}

/**
 * Keeps a DataGrid in a measured, fixed layout box.
 *
 * AXDataGrid's rendered root is absolutely positioned within this relative
 * container. This makes a ResizeObserver measurement authoritative when a
 * surrounding flex or grid layout shrinks as well as when it expands.
 */
const DataGridContainer = React.forwardRef<HTMLDivElement, DataGridContainerProps>(
  ({ className, ...rest }, ref) => (
    <div ref={ref} className={`data-grid-container ${className ?? ''}`.trim()} {...rest} />
  ),
);

DataGridContainer.displayName = 'DataGridContainer';

export default DataGridContainer;

.data-grid-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  font-size: 13px;
}

.data-grid-container > .axdg-root {
  position: absolute;
  inset: 0;
}

import * as React from 'react';

export function useContainerSize(ref: React.MutableRefObject<HTMLElement | null>, additionalDeps: unknown[] = []) {
  const [width, setWidth] = React.useState(0);
  const [height, setHeight] = React.useState(0);

  const resizeObserver = React.useRef(
    new ResizeObserver(entries => {
      if (entries.length !== 1) {
        throw new Error('Invalid Container length');
      }

      const [entry] = entries;

      const { width, height } = entry.contentRect;

      setWidth(width);
      setHeight(height);
    }),
  );

  React.useEffect(() => {
    if (!ref.current) return;

    const observer = resizeObserver.current;
    const element = ref.current;

    setWidth(element.clientWidth);
    setHeight(element.clientHeight);
    observer.observe(element);

    return () => {
      observer.unobserve(element);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [...additionalDeps, ref]);

  return {
    width,
    height,
  };
}