syidaxgrid
홈 가격 내 정보
SYIDAX / DATA GRID

대량 데이터

화면에 보이는 행을 중심으로 렌더링해 DOM 크기를 줄입니다.

시작하기
대량 데이터샘플 주문 데이터
120 rows
Grid를 불러오는 중입니다…

옵션

아래 항목을 바꾸면 Grid와 코드에 바로 반영됩니다.

최근 결과

이 예제는 10,000행과 페이지 나누기 해제 상태로 시작합니다. 표 위의 전체 행 수를 확인하세요.

코드 보기
현재 미리보기

사용 가이드

#

행이 많아도 화면에 보이는 부분을 중심으로 그려 스크롤을 사용할 수 있게 하는 기능입니다.

직접 해보기

  1. 데이터 양 확인

    이 예제는 10,000행과 페이지 나누기 해제 상태로 시작합니다. 표 위의 전체 행 수를 확인하세요.

  2. 표 안에서 스크롤

    페이지 전체가 아니라 Grid 내부를 아래로 스크롤하세요. 이동한 위치에 맞는 주문이 표시됩니다.

  3. 행 수 비교

    표 아래 샘플 행 수를 120 또는 1,000으로 바꾸어 비교하세요. 다시 초기화하면 이 메뉴의 10,000행 예제로 돌아옵니다.

확인할 결과

모든 행을 화면 요소로 한꺼번에 만들지 않고도 긴 목록을 탐색할 수 있습니다.

샘플 행 수를 바꾸면 새 데이터가 만들어집니다. 가상화는 표시 비용을 줄이는 기능이며 전체 데이터의 다운로드나 서버 검색을 대신하지 않습니다.

알아두면 쉬운 용어

가상화
보이는 영역을 중심으로 화면 요소를 만들고 재사용하는 방식입니다.
DOM
브라우저가 실제 화면에 표시하기 위해 관리하는 요소 구조입니다.

API reference

#

주요 속성

Attribute / Property타입 / 기본값설명
string | number기본값 undefinedOuter height — number is treated as px, strings pass through (e.g. `"60vh"`).
rowHeight		number기본값 32Uniform row height in px. `rowHeightFn` overrides this when supplied.
나머지 속성3
Attribute / Property타입 / 기본값설명
rowHeightFn		(index: number, row: GridData) => number기본값 undefinedOptional per-row height function for variable-height virtualization.
virtualScroll		boolean기본값 trueEnable wrapper-level row virtualization in columnDefs mode.
virtualizeColumns		boolean기본값 undefinedwindow the scrolling middle columns: only the columns intersecting the viewport (plus overscan) render; leading / trailing spacers keep the scrollbar truthful. Pinned columns always render. Eligibility: every unpinned column needs a concrete pixel width (`width:` or a live resize) — any flex-sized middle column silently disables windowing (geometry is unknowable pre-layout).
메서드2
메서드 / 인수반환 타입설명
Promise<void>discard all measured auto-height row heights and remeasure on the next render (ag-grid `resetRowHeights` parity). Call after mutating content that changes wrapping (e.g. an external font/CSS swap) when the automatic data/column/viewport-width invalidation cannot see the change.
Promise<void>Scroll the column-defs viewport to the top.
ColumnDef2
ColumnDef타입 / 필수 여부설명
boolean선택let this column's cell text wrap onto multiple lines instead of truncating with an ellipsis (ag-grid `wrapText`). On its own the cell wraps *within* the fixed row height (overflow clipped); pair with to grow the row to fit.
boolean선택size the row to fit this column's (wrapped) content instead of the uniform `row-height` (ag-grid `autoHeight`). When any visible column sets this, the grid measures each rendered row after paint and virtualizes with the measured heights (see ). The tallest auto-height cell in a row wins.
GridTab 이동 Enter 열기