데이터 로딩·행 높이 옵션

comins-table@0.2.2React

일반 배열의 추가 로딩과 Viewport 범위 로딩을 구분합니다. 로딩 콜백은 데이터를 가져올 시점을 알리며, 네트워크 요청과 부모 상태 반영은 애플리케이션에서 처리합니다.

Viewport 구성 가이드

테이블 props

loading

loading?: boolean;

기본 false. 최초 로딩 표시입니다. loadingComponent 또는 skeleton을 사용합니다.

loadingComponent

loadingComponent?: React.ReactNode;

사용자 로딩 콘텐츠입니다. 미지정 시 기본 로딩 표현을 사용합니다.

emptyComponent

emptyComponent?: React.ReactNode;

빈 데이터에 표시할 콘텐츠입니다. 미지정 시 기본 빈 상태 표현을 사용합니다.

persistHeaderWhenEmpty

persistHeaderWhenEmpty?: boolean;

기본 true. 빈 상태에서도 헤더를 유지합니다.

skeletonRowCount

skeletonRowCount?: number;

기본 min(max(1, pageSize), 5). 로딩 skeleton 행 수이며 데이터 개수가 아닙니다.

loadingMore

loadingMore?: boolean;

기본 false. 추가 요청 진행 표시/중복 요청 방지 조건입니다. 일반 배열의 추가 로딩 모드에서만 사용합니다.

hasMoreRows

hasMoreRows?: boolean;

기본 false. 더 요청할 데이터가 있는지 부모가 지정합니다.

infiniteScroll

infiniteScroll?: boolean;

기본 false. 하단 접근 시 onLoadMore를 호출하는 일반 배열 모드입니다.

infiniteScrollThreshold

infiniteScrollThreshold?: number;

기본 160px. 하단까지 남은 거리가 이 기준에 도달하면 추가 로딩을 판단합니다.

onLoadMore

onLoadMore?: () => void;

인자 없는 추가 로딩 알림입니다. rows 추가·loadingMore·hasMoreRows 갱신은 부모가 수행합니다.

lazyLoad

lazyLoad?: boolean;

기본 false. offset/limit/signal을 받는 append 요청 모드입니다. onLazyLoad와 함께 사용합니다.

lazyLoadBatchSize

lazyLoadBatchSize?: number;

기본 30. 요청 limit이며 1 이상의 정수로 정규화합니다.

lazyLoadMode

lazyLoadMode?: "append";

지원 값 및 기본값은 append입니다. 임의 위치 범위 로딩은 Viewport를 사용합니다.

lazyLoadThreshold

lazyLoadThreshold?: number;

기본 infiniteScrollThreshold(기본 160px)를 따릅니다. 0 이상의 정수로 정규화합니다.

onLazyLoad

onLazyLoad?: (request: CominsLazyLoadRequest) => Promise<void> | void;

offset/limit/reason/signal을 받습니다. 반환값으로 행을 넘기지 않고 부모 data에 반영합니다. 요청 취소 signal을 전달하십시오.

virtualized

virtualized?: boolean;

일반 배열 기본 false. Viewport에서는 true만 허용되며 항상 가상화됩니다. 스크롤 영역 높이가 필요합니다.

buffer-size

"buffer-size"?: number;

기본 10행. 가상화 표시 범위 앞뒤의 추가 렌더링 수입니다. 0 이상의 정수로 정규화합니다.

rowHeight

rowHeight?: number;

기본 36px. 고정 행 높이와 자동 높이의 기준값입니다.

getRowHeight

getRowHeight?: (params: CominsRowHeightParams<TData>) => CominsRowHeight | undefined;

행별 number 또는 auto를 반환합니다. undefined이면 rowHeight를 사용합니다. params.row는 이벤트 행 구조입니다.

estimatedRowHeight

estimatedRowHeight?: number;

auto 행 측정 전 추정 높이입니다. 생략 시 rowHeight를 기준으로 합니다. 콘텐츠에 가까운 값을 사용하면 스크롤 보정이 줄어듭니다.

CominsViewportTableProps

viewportDatasource

viewportDatasource: CominsViewportDatasource;

Viewport 필수 설정입니다. revision과 요청/높이 캐시 설정을 포함합니다.

onViewportRequest

onViewportRequest: (request: CominsViewportRequest) => void | Promise<void>;

필수. 요청 범위와 취소 signal을 받습니다. 직접 구성 시 snapshot에 request/success/error/cancel을 반영해야 합니다. useCominsViewport의 tableProps로 연결할 수 있습니다.

virtualized

virtualized?: true;

Viewport에서는 true만 허용합니다. false로 전체 서버 데이터를 렌더링하는 모드는 없습니다.

CominsViewportDatasource

revision

revision: CominsViewportRevision;

필수. 현재 데이터 revision과 맞추는 쿼리 식별자입니다. 새 쿼리는 새 snapshot과 함께 변경합니다.

maxConcurrentRequests

maxConcurrentRequests?: number;

동시 범위 요청 수의 상한입니다. 기본 2입니다.

heightCacheSize

heightCacheSize?: number;

높이 측정 블록 캐시 크기입니다. 기본 64이며 행 데이터 캐시 cacheSize와 별개입니다.

CominsLazyLoadRequest

export type CominsLazyLoadRequest = {
    limit: number;
    offset: number;
    reason: CominsLazyLoadReason;
    signal: AbortSignal;
};

공개 루트 타입의 전체 입력 필드는 startIndex, endIndex, revision, requestId, retainRange, signal입니다. retainRange: CominsViewportRange는 유지할 반개구간을 지정합니다. 내부 별칭 CoreViewportRequest를 직접 import하지 않습니다.

reason은 initial/scroll/refresh입니다. offset은 append 시작 위치이며 signal은 요청 취소에 사용합니다.

CominsViewportRequest

export type CominsViewportRequest = CoreViewportRequest & {
    signal: AbortSignal;
};

공개 루트 타입의 전체 입력 필드는 startIndex, endIndex, revision, requestId, retainRange, signal입니다. retainRange: CominsViewportRange는 유지할 반개구간을 지정합니다. 내부 별칭 CoreViewportRequest를 직접 import하지 않습니다.

startIndex/endIndex는 CominsViewportRange에서 상속합니다. endIndex는 제외되는 끝 경계입니다. revision과 requestId로 오래된 응답을 구분합니다.

CominsViewportRange

export type CominsViewportRange = {
    startIndex: number;
    endIndex: number;
};

startIndex 이상, endIndex 미만인 절대 인덱스 범위입니다.

관련 API

• 기본 옵션
• 이벤트
• 컬럼
• 필터
• 그룹
• 행 상세