cellRender with Vue Component?

[thearabbit]

I base on Element UI

• action.vue

  
  <template>
  <div>
  <el-dropdown
    size="mini"
    split-button
    type="primary"
  >
    Mini
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>Action 1</el-dropdown-item>
      <el-dropdown-item>Action 2</el-dropdown-item>
      <el-dropdown-item>Action 3</el-dropdown-item>
      <el-dropdown-item>Action 4</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  </div>
  </template>

![image](https://user-images.githubusercontent.com/4495160/43587418-6506359a-9694-11e8-87db-8cd4ec9f3386.png)

- grid.vue
```js
<template>
  <div>
    <ag-grid-vue
      :column-defs="columnDefs"
      :row-data="rowData"
      :grid-options="gridOptions"
      class="ag-theme-balham"
    >
    </ag-grid-vue>
  </div>
</template>
---
import ActionComponent from './action.vue'
...
  data() {
    return {
      // Data
      columnDefs: [
         ........
        {
          headerName: 'Action',
          field: 'action',
          cellRendererFramework: ActionComponent,
        },
      ],
      rowData: [],
    }
  },

[dnlrsr]

You are missing

components: {
    YourComponent
}

in your grid.vue.

[happilymarrieddad]

@Dinodanio I've added my component to components and I'm still encountering this problem.

[happilymarrieddad]

I got it working... this is probably not at all how you are supposed to do it but I got it working.

// function to act as a class
function OptionsComponent () {}

// gets called once before the renderer is used
OptionsComponent.prototype.init = function(params) {
    // create the cell
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = '<span class="my-css-class"><button class="btn-simple">Delete</button><span class="my-value"></span></span>';

    // get references to the elements we want
    this.eButton = this.eGui.querySelector('.btn-simple');
    this.eValue = this.eGui.querySelector('.my-value');

    // set value into cell
    this.eValue.innerHTML = params.valueFormatted ? params.valueFormatted : params.value;

    // add event listener to button
    this.eventListener = function() {
        params.frameworkComponentWrapper._parent.$parent.$parent.destroy(params)
    };
    this.eButton.addEventListener('click', this.eventListener);
};

// gets called once when grid ready to insert the element
OptionsComponent.prototype.getGui = function() {
    return this.eGui;
};

// gets called whenever the user gets the cell to refresh
OptionsComponent.prototype.refresh = function(params) {
    // set value into cell again
    this.eValue.innerHTML = params.valueFormatted ? params.valueFormatted : params.value;
    // return true to tell the grid we refreshed successfully
    return true;
};

// gets called when the cell is removed from the grid
OptionsComponent.prototype.destroy = function() {
    // do cleanup, remove event listener from button
    this.eButton.removeEventListener('click', this.eventListener);
};

export default OptionsComponent

[happilymarrieddad]

@thearabbit

[seanlandsman]

Please take a look at: https://www.ag-grid.com/best-vuejs-data-grid/#define_component

Your components need to be wrapped with Vue.extend:

let SquareComponent = Vue.extend({
    template: '<span>{{ valueSquared() }}</span>',
    methods: {
        valueSquared() {
            return this.params.value * this.params.value;
        }
    }
});

[garbinmarcelo]

Were you able to use it? I'm trying to use component with Vue.JS but I lost all day today and could not get it to work.

@seanlandsman Would you have a tutorial to go through?

Thanks

[seanlandsman]

@marcelogarbin have you tried the Getting Started guide here: https://www.ag-grid.com/vue-getting-started/ ?

[garbinmarcelo]

@seanlandsman Yes, it was the first thing I did, even my example is based on it. But the inline button part could not execute. Do you work with this? Would you help me?

This is the code I have so far, I no longer know what to do to try to add the buttons or components on each line ... I'm almost giving up ag-Grid because of this..

https://gist.github.com/marcelogarbin/a2cd7df6cf509365cf558d6aa013cbb9

P.S.: I also downloaded all of this repository (ag-grid-vue-example) and I did not find where it presents that button part or html rendering in line from table... Is there any file I can see this implementation working with Vue.js?

[seanlandsman]

@marcelogarbin check out https://github.com/seanlandsman/ag-grid-vue-test-repo

Important differences for vue:

components: { 'ag-grid-vue': AgGridVue, agGridAcao: AgGridAcao },

You don't need to use components/frameworkComponents on the agGridVue instance

If this wasn't clear enough in the docs I'll see if I can improve them for our next release

[garbinmarcelo]

Sorry it took me so long to reply.

That's what I was looking for. Helped me a lot.

Thank you

[garbinmarcelo]

@seanlandsman taking advantage of the subject, would you have some examples of how to use ag-Grid with Vue.JS Server side?

Involving pagination, filters, search ...

[girig1]

@seanlandsman, @marcelogarbin can you show how you are able to add working buttons on ag grid in vue

[evgencode]

I really can’t understand how to work with vue components. It is very irrational to look for components strictly in the parent component.

Why can't I just specify the imported component object in the cellRendererFramework? Try placing the grid on a coarser nesting or in a slot. You will get an error: Could not find component with name of ****. Is it in Vue.components?

For example:

Test.js:

import { AgGridVue } from 'ag-grid-vue';
import styles from './style.scss?module';
import { CellTest } from './cells';
import { getRowData, getColumnDefs, ComponentWrap } from './helper';

export default {
  name: 'Test',
  components: {
    AgGridVue,
    CellTest
  },
  data() {
    return {
      gridOptions: {
        pagination: false,
        enableColResize: true,
        enableSorting: true,
        rowSelection: 'single',
        headerHeight: 42,
        floatingFiltersHeight: 42,
        rowHeight: 36,
        context: {
          componentParent: this
        }
      },
      rowData: getRowData(),
      columnDefs: getColumnDefs()
    };
  },
  methods: {},
  render(h) {
    const props = {
      gridOptions: this.gridOptions,
      rowData: this.rowData,
      columnDefs: this.columnDefs
    };

    return (
      <div class={styles.root}>
        <ComponentWrap>
          <AgGridVue {...{ props }} style={{ height: '100%' }} />
        </ComponentWrap>
      </div>
    );
  }
};

helper.js

export const getRowData = () => [
  {
    range_end: '22',
    range_start: '11',
    vendor: 'Slim Fast',
    suffix: 'TT'
  },
  {
    range_end: '335',
    range_start: '330',
    vendor: 'BlaBla',
    suffix: 'HH'
  }
];

export const getColumnDefs = () => [
  {
    headerName: 'ID',
    field: 'request_id',
    colId: 'params',
    cellRendererFramework: 'CellTest'
  },
  {
    headerName: 'RangeStart',
    field: 'range_start'
  },
  {
    headerName: 'Vendor',
    field: 'vendor'
  },
  {
    headerName: 'Suffix',
    field: 'suffix'
  }
];

export const ComponentWrap = {
  render(h) {
    return <div style={{ height: '100%' }}>{this.$slots.default}</div>;
  }
};

CellTest.js

export default {
  name: 'CellTest',
  render(h) {
    const data = this.params.data;
    return (
      <div>
        <span>Cell Test: {JSON.stringify(data)}</span>
      </div>
    );
  }
};

I get an error: Could not find component with name of CellTest. Is it in Vue.components?

What's wrong?

[bertdida]

This was working for me,

Child.vue

<template>
  <b>{{params.value}}</b>
</template>

<script>
import Vue from "vue";

export default Vue.extend({});
</script>

Parent.vue

...
<script>
import Child from "./Child";

export default {
  data() {
    return {
     ...
     columnDefs: [
       {
         headerName: "Header name",
         cellRendererFramework: Child
       },
     ]
    }
  }
}
</script>

[saschwarz]

In case anyone comes across this problem w/more recent versions of ag-grid you'll get the OP's error if you don't put the cellRenderer class name in quotes:

cellRenderer: 'ActionComponent',