지연 데이터 로딩

comins-table@0.2.2

lazyLoad는 request 시점을 Comins Table에 위임하고, application이 Row 배열과 원격 상태를 소유하는 controlled API입니다.

const [rows, setRows] = useState<PersonRow[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [loadingMore, setLoadingMore] = useState(false);

const loadRows = useCallback(async ({ offset, limit, reason, signal }) => {
  reason === "scroll" ? setLoadingMore(true) : setLoading(true);

  try {
    const response = await fetch(`/api/rows?offset=${offset}&limit=${limit}`, { signal });
    const result = await response.json();
    setRows((current) => reason === "scroll" ? [...current, ...result.rows] : result.rows);
    setTotal(result.total);
  } finally {
    reason === "scroll" ? setLoadingMore(false) : setLoading(false);
  }
}, []);

<CominsTable
  columns={columns}
  data={rows}
  hasMoreRows={rows.length < total}
  lazyLoad
  lazyLoadBatchSize={30}
  lazyLoadMode="append"
  lazyLoadThreshold={140}
  loading={loading}
  loadingMore={loadingMore}
  onLazyLoad={loadRows}
  pagination={{ pageIndex: 0, pageSize: 90 }}
  skeletonRowCount={5}
  virtualized
/>;

Props

Prop	의미
lazyLoad	append-mode request trigger를 활성화합니다.
lazyLoadBatchSize	한 번에 요청할 Row 수입니다. 기본값은 30입니다.
lazyLoadMode	현재 지원 mode는 "append"입니다.
lazyLoadThreshold	body viewport 하단에서 몇 px 이내에 들어왔을 때 scroll 요청을 보낼지 지정합니다.
onLazyLoad	{ offset, limit, reason, signal }을 받고 application state를 갱신하는 `void
data	application이 소유하고 Table이 렌더링하는 controlled Row 배열입니다.
hasMoreRows	false이면 추가 scroll 요청을 중단합니다.
loading	Row가 없으면 skeleton, 기존 Row가 있으면 overlay를 표시합니다.
loadingMore	중복 scroll 요청을 막고 하단 loading Row를 표시합니다.

reason은 "initial", "scroll", "refresh" 중 하나입니다. Table의 자동 trigger는 initial과 scroll이며, scroll offset은 현재 data.length입니다. Refresh 버튼은 Row 배열을 먼저 비우고 application loader를 offset: 0, reason: "refresh"로 직접 호출합니다.

Comins Table은 callback 반환값을 저장하지 않습니다. Callback이 fetch 결과를 replace/append하고 total 기반 hasMoreRows, loading, loadingMore를 갱신해야 합니다.

Abort 및 오류 계약

전달된 AbortSignal, refresh, unmount 시 application fetch를 취소합니다. 늦게 도착한 응답이 더 최신 controlled Row를 덮어쓰지 않도록 application이 stale request를 차단합니다. 오류, retry와 빈 결과 UI도 application이 소유합니다.

Playground 데이터

Playground는 1,000개 고정 예제 Row를 100개씩 불러오며 250ms 지연, 취소, 재조회, 마지막 데이터 상태를 시뮬레이션합니다. 외부 데이터 서비스 없이 실행할 수 있습니다. 이는 예제 설정이며 패키지의 lazyLoadBatchSize 기본값은 30을 유지합니다. Lazy Load는 전달된 배열에 데이터를 누적합니다. 캐시 한도를 두고 임의 구간을 조회하려면 Viewport Datasource를 사용합니다.

---

실행 가능한 대표 예제 · 배포 기준 원본 가이드