syidaxgrid
홈 가격 내 정보

GRID FEATURE

셀 표현 바꾸기

셀 렌더러는 데이터의 표시 방법을 바꿉니다. 상태 배지·링크·액션 버튼이 필요한 경우 사용하되 정렬·필터에 사용할 원본 값은 별도로 유지합니다.

Markdown 원문 Features

동작 원리와 선택 기준

단순 숫자 포맷은 valueFormatter가 더 간단합니다. 구조나 상호작용이 필요할 때 cellRenderer를 선택하고 반환값은 text·html·vnode 중 하나의 계약을 지킵니다.

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

예제 1. 안전한 텍스트와 보조 설명

문자열을 HTML로 해석하지 않고 표시합니다.

javascript
grid.columnDefs = [{
  field: 'status', headerName: '상태',
  cellRenderer: params => ({ kind: 'text', text: String(params.value ?? '-'), title: '주문의 현재 처리 상태' }),
}];

결과 확인: 사용자 입력에 꺾쇠가 있어도 실행되는 HTML이 아닌 문자로 표시됩니다.

예제 2. 표시와 편집 분리

통화 표시에는 valueFormatter, 금액 수정에는 number 편집기를 설정합니다. 렌더러를 붙였다는 이유만으로 편집기를 직접 구현할 필요는 없습니다.

결과 확인: 보기 상태의 통화 기호와 실제 저장 숫자를 분리합니다. 편집 완료 뒤 정렬과 합계가 숫자를 기준으로 동작하는지 확인하세요.

예제 3. 액션이 있는 셀

프레임워크에서 vnode 렌더러를 사용해 상세 보기 버튼을 만듭니다. 버튼의 accessible name에는 행을 식별할 수 있는 설명을 붙이고, 클릭 시 앱의 상세 화면을 엽니다.

결과 확인: 가상 스크롤로 셀이 재사용될 수 있으므로 현재 params의 행을 참조합니다. 이벤트 리스너와 외부 자원은 렌더러 수명에 맞춰 정리합니다.

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

kind: html은 신뢰할 수 있는 정제된 HTML만 사용하세요. Grid가 앱의 임의 HTML을 자동으로 안전하게 바꾼다고 가정하면 안 됩니다.

렌더러 내부에서 매번 서버 요청이나 큰 계산을 실행하면 스크롤이 느려집니다. 데이터 준비 단계에서 값을 계산하거나 캐시합니다.

함께 읽기