SYIDAX / DATA GRID

보이는 구간을 스트리밍 PRO

전체 개수는 알고 있지만 현재 보이는 데이터만 유지해야 하는 화면에 사용합니다.

시작하기
보이는 구간을 스트리밍샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…
최근 결과

데이터 공급자의 init에서 전체 행 수를 알려 스크롤 영역을 만들고, Grid가 전달하는 콜백을 보관하세요.

코드 보기
현재 미리보기

사용 가이드

#

실시간 시세 목록처럼 전체 행 수는 알지만 현재 화면에 보이는 일부 행만 최신 상태로 유지하려는 경우에 사용합니다.

앱에서 연결하는 순서

  1. 전체 행 수 알리기

    데이터 공급자의 init에서 전체 행 수를 알려 스크롤 영역을 만들고, Grid가 전달하는 콜백을 보관하세요.

  2. 보이는 범위에 데이터 공급

    setViewportRange가 알려 주는 행 범위에 맞춰 서버 데이터를 조회하거나 구독하세요. 응답을 해당 행 위치에 공급합니다.

  3. 스크롤과 연결 종료 처리

    스크롤로 범위가 바뀌면 필요한 구독도 바꾸세요. 화면을 닫을 때 destroy에서 소켓·타이머·요청을 정리합니다.

확인할 결과

앱의 스크롤 위치에 맞춰 보이는 행의 데이터가 공급되고, 실시간 변경도 해당 행에 반영됩니다.

현재 미리보기는 고정된 로컬 데이터입니다. 실시간 스트림이나 원격 데이터 공급자는 연결되어 있지 않습니다.

알아두면 쉬운 용어

viewport
스크롤 영역 중 사용자가 현재 보고 있는 구간입니다.
구독
서버의 변경 값을 지속해서 받아오는 연결입니다.

제품에 이 기능을 적용하려면 Pro 런타임과 유효한 라이선스가 필요합니다.

API reference

#

나머지 속성1
Attribute / Property타입 / 기본값설명
PRO
viewportDatasource
ViewportDatasource<GridRow>기본값 undefinedviewport (sliding-window) row model. When set, the grid ignores `rowData`: the datasource reports a KNOWN total count and streams only the rows for the currently-visible window (plus the virtualizer's overscan), discarding rows scrolled out of view. Ideal for huge, flat, frequently-changing datasets / live feeds (ag-grid `viewportRowModel`). Unlike the infinite model there is no block cache — scrolling re-requests the exact range.