Renderer - RealGrid

그리드 렌더러 적용 하기

그리드에서 렌더러 기능을 사용하는 방법은 렌더러를 적용할 컬럼 태그 renderer props에 적용하고자 하는 renderer 속성을 전달하면 해당 기능을 사용 하실 수 있습니다.

아래는 간단하게 이미지렌더러를 적용한 예시 코드 입니다.

<template>
    <div style="width: 1000px; height: 400px">
        <RealGridVue    
            ref="gridRef"
            :rows="[['KRW'], ['USD']]"
            :auto-generate-field="true">
            <RGDataColumn
                field-name="Monetary"
                :width="100"
                :renderer="{
                    type:'image',
                    imageCallback: (grid: RealGrid.GridBase, cell: RealGrid.GridCell) => {
                        return `${cell.value}.png`
                    },
                    imageHeight: 30,
                    imageWidth: 30,
                }"/>
        </RealGridVue>
    </div>
    
</template>

Renderer

렌더러 적용 방법은 이미지렌더러 예제에서 확인해보실 수 있습니다.

데이터 타입과 에디터 설정 기존 JS 방식으로 그리드 구성