GRID FEATURE · PRO

보이는 구간을 스트리밍

전체 데이터 개수는 알지만 현재 보이는 행만 지속 갱신하려는 시세·모니터링 화면에 적합합니다. 스크롤 범위에 맞춰 구독 범위를 바꾸는 것이 핵심입니다.

Markdown 원문 Features

동작 원리와 선택 기준

init에서 받은 setRowCount와 setRowData를 보관하고 setViewportRange의 범위 요청에 응답합니다. 원격 응답에 대해서는 요청 순서와 화면 해제 상태를 함께 확인하세요.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

설치와 연결 · 공통 예제 데이터

예제 1. 정적인 원격 구간 공급

시작·끝 범위를 받는 앱 API의 반환 형식을 { rows }로 정한 예입니다.

javascript

let callbacks;
let revision = 0;
grid.viewportDatasource = {
  init(api) { callbacks = api; api.setRowCount(100000); },
  async setViewportRange(first, last) {
    const current = ++revision;
    const response = await fetch('/api/quotes?first=' + first + '&last=' + last);
    if (!response.ok) return;
    const { rows } = await response.json();
    if (current === revision) callbacks.setRowData(first, rows);
  },
  destroy() { revision++; }
};

결과 확인: 최근 요청 범위에 대해서만 행이 채워집니다. 실패 상태 표시는 앱의 오류 UI와 함께 연결하세요.