GRID FEATURE

변경 강조

값 변경 강조는 편집·붙여넣기·데이터 트랜잭션으로 바뀐 셀을 잠깐 표시합니다. 실시간 가격이나 수량이 많은 표에서 방금 달라진 위치를 찾는 데 유용합니다.

동작 원리와 선택 기준

계속 유지되는 조건부 서식과 달리 잠시 나타났다 사라지는 표시입니다. 사용자가 나중에 변경 이력을 확인해야 한다면 감사 로그를 함께 제공합니다.

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

편집 가능한 열이 있는 Grid에서 변경 강조를 켭니다.

javascript

grid.cellChangeFlash = true;

결과 확인: 수량 셀을 편집하고 완료하면 변경된 셀에 일시적인 강조가 나타납니다.

존재하는 ID의 행을 트랜잭션으로 수정합니다.

javascript

const row = grid.rowData[0];
if (row) await grid.applyTransaction({ update: [{ ...row, quantity: Number(row.quantity) + 1 }] });

결과 확인: 전체 데이터를 다시 만드는 대신 실제 바뀐 셀을 확인하기 쉽습니다. getRowId는 갱신 전후 동일해야 합니다.

초당 갱신량이 많으면 앱에서 받은 변경을 모아 적정 간격으로 반영합니다. 강조가 계속 켜져 보인다면 갱신 주기나 강조 사용 범위를 재검토합니다.

결과 확인: 현재 값이 정확하게 반영되면서 사용자가 변화 위치를 읽을 시간을 확보합니다. 깜박임 자체를 성공 알림으로 사용하지 않습니다.

cellChangeFlash와 호환 옵션 enableCellChangeFlash를 서로 다른 값으로 중복 지정하지 마세요. 한 가지 설정 경로를 사용합니다.

비슷해 보이는 새 객체를 넣었다는 사실과 셀 값이 바뀌었다는 사실을 구분해 테스트하세요.