GRID FEATURE
계산과 표시 분리
valueGetter는 실제 계산값을 만들고 valueFormatter는 화면에 읽기 좋은 문자열을 만듭니다. 합계·정렬·비교에 숫자가 필요하면 getter는 숫자를 반환해야 합니다.
동작 원리와 선택 기준
표시 문자열만 바꾸는 formatter와 실제 데이터를 바꾸는 valueParser·valueSetter를 구분하세요. 포맷된 글자를 다시 계산의 원본으로 쓰면 단위나 쉼표 때문에 결과가 달라질 수 있습니다.
코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.
예제 1. 수량과 단가로 합계 계산
total 필드가 원본에 없어도 계산 열을 추가할 수 있습니다.
grid.columnDefs = [...grid.columnDefs, {
field: 'amount', colId: 'amount', headerName: '합계', editable: false,
valueGetter: ({ data }) => Number(data.quantity) * Number(data.price)
}];결과 확인: 10 × 120은 숫자 1200입니다. 수량을 20으로 편집하면 계산 결과는 2400이 됩니다.
예제 2. 통화 표시 추가
실제 숫자는 유지하면서 금액을 사용자 언어에 맞게 표시합니다.
grid.columnDefs = [{ field: 'price', headerName: '단가',
valueFormatter: ({ value }) => new Intl.NumberFormat('ko-KR', {
style: 'currency', currency: 'KRW'
}).format(Number(value))
}];결과 확인: 사용자는 통화 기호와 구분 기호를 보지만 원본 단가는 숫자입니다. 표시 형식이 원본 데이터의 통화를 변환하지는 않습니다.
예제 3. 빈 값과 0 구분
빈 단가를 0원으로 잘못 보여 주지 않도록 빈 값 표시를 따로 정합니다.
grid.columnDefs = [{ field: 'price', headerName: '단가',
valueFormatter: ({ value }) => value == null ? '미입력' : Number(value).toLocaleString('ko-KR')
}];결과 확인: null·undefined는 미입력, 숫자 0은 0으로 표시됩니다. 유효하지 않은 숫자는 검증 단계에서 처리해야 합니다.
조합할 때와 문제를 해결할 때
getter 안에서 네트워크 요청이나 rowData 변경을 수행하지 마세요. 스크롤·정렬·재계산 중 여러 번 호출되어도 같은 입력에 같은 결과가 나와야 합니다.
사용자가 직접 수식을 입력해야 한다면 valueGetter가 아니라 수식 기능을 검토합니다. 두 방식의 결과 저장과 편집 동작은 다릅니다.
함께 읽기
- 행·열·ID의 관계
- 결과와 이벤트 연결
- Features에서 살펴보기
직접 체험 가능한 범위는 해당 가이드에 안내되어 있습니다.