GRID FEATURE

행 따라가기

행 hover는 포인터가 있는 행을 구분해 가로로 긴 표를 읽기 쉽게 합니다. 선택한 행과는 다른 상태이며 업무 처리 대상이 자동으로 선택되는 것은 아닙니다.

동작 원리와 선택 기준

CSS만 필요한 경우 css-only, 앱에 행 진입·이탈 이벤트가 필요한 경우 stateful, 강조가 필요 없으면 off를 사용합니다. 이벤트가 필요 없을 때 상태 갱신 비용을 추가할 이유는 없습니다.

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

기본적인 읽기 보조 효과를 선택합니다.

javascript

grid.rowHover = 'css-only';

결과 확인: 마우스가 올라간 행의 강조만 바뀌고 앱의 행 hover 이벤트 처리에 의존하지 않습니다.

앱의 보조 영역에서 포인터가 가리키는 행을 안내하는 상황입니다.

javascript

grid.rowHover = 'stateful';
grid.addEventListener('rowHoverChanged', event => console.log(event.detail));

결과 확인: 이벤트의 행 정보를 사용할 수 있습니다. 행마다 서버를 호출하기보다 기존 데이터로 보조 설명을 구성하세요.

색이 많은 분석 표에서는 hover 강조를 없애고 선택·포커스만 유지할 수 있습니다.

javascript

grid.rowHover = 'off';

결과 확인: 행의 상태 색이나 조건부 서식이 포인터 때문에 계속 달라져 보이는 혼란을 줄일 수 있습니다.

hover를 클릭·선택 이벤트로 대신 해석하지 마세요. 일괄 작업 대상은 실제 선택 API에서 읽습니다.

터치 화면에는 지속적인 hover가 없습니다. 필요한 정보와 조작은 클릭·포커스로도 접근할 수 있어야 합니다.