SYIDAX / DATA GRID

행 따라가기

포인터가 위치한 행을 강조하고 변경 이벤트를 받을 수 있습니다.

행 따라가기샘플 주문 데이터

120 rows

Grid를 불러오는 중입니다…

옵션

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

행 강조 방식

최근 결과

마우스를 여러 주문 행 위로 천천히 옮겨 보세요. 포인터가 있는 행의 배경을 확인합니다.

코드 보기

현재 미리보기

표의 가로 폭이 넓을 때 마우스가 있는 행을 따라가며 읽기 쉽게 만드는 기능입니다.

행 사이 이동
마우스를 여러 주문 행 위로 천천히 옮겨 보세요. 포인터가 있는 행의 배경을 확인합니다.
선택과 비교
체크박스로 한 행을 선택한 뒤 다른 행 위로 마우스를 옮겨보세요. 선택된 행과 현재 가리킨 행은 다른 상태입니다.
앱의 반응 연결
앱에서 hovered 행을 별도 정보 패널과 연결하려면 stateful 모드의 rowHoverChanged 이벤트를 구독하세요.

확인할 결과

마우스가 있는 행을 쉽게 따라 읽을 수 있습니다. 앱에서는 현재 가리킨 행의 ID로 다른 UI를 연결할 수 있습니다.

현재 예제는 stateful 모드입니다. 잦은 포인터 이동으로 기록이 쌓이지 않도록 웹사이트의 이벤트 표에는 Hover 이벤트를 표시하지 않습니다.

나머지 속성1

Attribute / Property	타입 / 기본값	설명
rowHover	`'css-only' \| 'stateful' \| 'off'`기본값 'css-only'	Row hover behaviour: CSS-only, stateful eventing, or disabled.

이벤트1

이벤트	detail 타입	설명
	`GridRowHoverChangedDetail`	Fires when the hovered row changes in stateful hover mode.

메서드2

메서드 / 인수	반환 타입	설명
rowId: string \| number \| null	`Promise<void>`	Set or clear the hovered row id.
	`Promise<string \| number \| null>`	Read the currently hovered row id.