Vue Custom Cell Renderer for AG Grid

Marats Stelihs demonstrates how to create custom Cell Renderers in Vue for AG Grid. These allow you to change the HTML that is rendered in a cell e.g. add buttons.

- 00:00 Starting Code
- 00:27 My first component
- 00:45 Rendering Values
- 01:26 Functional Components
- 02:04 Reusing Components
- 02:36 Parameterized Components
- 03:13 Options API Components
- 03:50 Inline Components
- 04:05 Selecting Cell Renderers
- 05:20 Summary

Cell Renderers are a core customization mechanism for AG Grid and you can find more details in the documentation:

AG Grid works with React, Angular, Vue, and JavaScript. Available as a free community edition and commercially as an Enterprise product (full support and more features).

---

A series of videos showing how to get started with AG Grid and Vue.

All videos are available in a playlist:

And directly available below:

- 001 - QuickStart Guide
- 002 - Enterprise Overview
- 003 - Customizing Cells
- 004 - Column Filters

Source code for all videos is available on Github:

[chikinkwok]

can you demo with <script setup> too ?

[emadomar]

Really great, but cell render doesn't work with Nuxt3

[GeorgiNikolov-gz]

how you customize the style of the vertical scrollbar in the table?

[GUNGNIRonly]

I wish it was as easy as in the video with Vue 2.7 using script setup syntax. This limbo config is making me go insane.

[asukaryo]

how can I pass jsx components to cell renderer in vue 3?