syidaxgrid
홈 가격 내 정보

GRID FEATURE

대량 데이터

가상화는 전체 데이터 중 화면 주변에 필요한 행·열 DOM만 렌더링합니다. 데이터 자체를 서버에서 일부만 가져오는 행 모델과는 다른 성능 기능입니다.

Markdown 원문 Features

동작 원리와 선택 기준

높이가 제한된 Grid에서 세로 가상화가 효과적입니다. 가로로 열이 많은 표는 열 가상화도 검토하되 사용자 정의 셀의 렌더링 비용과 고정 열의 수를 함께 살펴봅니다.

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

예제 1. 많은 행을 정해진 높이에 표시

데이터 로딩과 별개로 렌더링 범위를 제한합니다.

javascript
grid.height = 520;
grid.virtualScroll = true;

결과 확인: 스크롤하면서 현재 위치의 행이 나타납니다. 모든 행이 동시에 DOM에 존재하지는 않습니다.

예제 2. 열이 많은 보고서

가로 열 가상화를 명시적으로 켭니다.

javascript
grid.virtualizeColumns = true;

결과 확인: 수백 개 열을 가진 표에서 화면 밖 열의 렌더링 비용을 줄일 수 있습니다. 열 이동·고정·너비 변경과 함께 검증하세요.

예제 3. 성능 문제를 나눠 찾기

같은 데이터로 기본 텍스트 셀과 복잡한 렌더러를 비교합니다. 요청 시간·파싱 시간·정렬 시간·스크롤 프레임 시간을 나누어 측정합니다.

결과 확인: 가상화는 데이터 다운로드나 무거운 formatter 계산을 자동으로 없애지 않습니다. 병목에 맞춰 행 모델·처리 엔진·렌더러를 조절합니다.

조합할 때와 문제를 해결할 때

숨겨진 탭에서 초기화한 표는 컨테이너 크기가 다를 수 있습니다. 실제 보이는 상태에서 높이와 레이아웃을 확인합니다.

DOM 행 개수로 전체 데이터 수를 계산하지 마세요. 데이터·표시 행 API 또는 서버의 전체 개수를 사용합니다.

함께 읽기