#### Applying Grid Renderer

To use the renderer function in the grid, you can use the function by passing the renderer property you want to apply to the renderer props of the column tag to which you want to apply the renderer.

Below is a simple example code that applies an image renderer.

```vue
<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](public/images/renderer.png)

You can check how to apply the renderer in [Image Renderer Example](/guides/renderer/image-renderer).