ag-grid-vue | Vue adaptor | Grid library

I scratched up a general solution that explains how to render custom HTML elements within a grid cell. Most of this solution is based on pre-existing articles and blogs out there. Note the data model here (rendered to the grid) assumes a pending property.

EDIT: here is a working solution >> https://plnkr.co/edit/Lr6cneCFiT91lCOD
Adapt it to your liking with the according theme (alpine, balham and so on) and the height that you wish or any other CSS structure that you have.
As told below, this inspired by this guy's work.

A working solution can be done with the script below

You should not modify data, rather use ag-grid apis to apply custom styles, class or format data. Please note i have no tested it but it should work.

1. simply assign data to robot, do not make any changes to the data.

Replace this line

setColumnsVisible() accepts a number as an argument which is a Column.colId. getAllColumns() return an array of Column so you need to use a for-loop here

There seems to be a couple of issues here, mainly that you are setting data and functions outside of the vue instance.

First of all, you should not be setting any data on window, Vue has plenty of ways to handle your data and makes it all reactive for you.

Start by moving your window.ServerSideDataSource function into the vue instance. In Vue, functions are put under "methods", so after your onGridReady function, add a , and then put:

It seems to me that the ag-grid version you are using does not have createRangeChart.
It used to be called chartRange

Try this -

The ans given by @pratik is right. But the import that you are using is maybe wrong. Visit this link.

You can write your computed property like this