How can I add vue-router link as ag-grid-vue column?

Question

ag-grid-vue documentation from ag-grid website clearly says:

You can provide Vue Router links within the Grid, but you need to ensure that you provide a Router to the Grid Component being created.

with sample code:

// create a new VueRouter, or make the "root" Router available
import VueRouter from "vue-router";
const router = new VueRouter();

// pass a valid Router object to the Vue grid components to be used within the grid
components: {
    'ag-grid-vue': AgGridVue,
    'link-component': {
        router,
        template: '<router-link to="/master-detail">Jump to Master/Detail</router-link>'
    }
},

// You can now use Vue Router links within you Vue Components within the Grid
{
    headerName: "Link Example",
    cellRendererFramework: 'link-component',
    width: 200
}

What's missing here is how to make the "root" Router available. I've been looking into various sources and see many people have the same problem, but none got a clear answer.

https://github.com/ag-grid/ag-grid-vue/issues/1

https://github.com/ag-grid/ag-grid-vue/issues/23

https://github.com/ag-grid/ag-grid-vue-example/issues/3

https://forum.vuejs.org/t/vue-cant-find-a-simple-inline-component-in-ag-grid-vue/21788/10

Does ag-grid-vue still work with vue-router, then how, or is this just outdated documentation? Some people claim it worked for them so I assume it worked at one point.

I am not looking for cool answer at this point. I just want to know if it is possible. I tried passing router using window or created() and none worked so far.

Thank you!

It's likely supposed to work in this way but from the number of people that are stuck on it, something's probably broken. And it's going to take ag-grid a while to fix it. You might have a better chance using this approach: router.vuejs.org/guide/essentials/navigation.html. With an ag-grid cellRenderer: stackoverflow.com/a/45231951/405015. Let me know if this doesn't make sense and I'll write a full answer. I don't really use Vue.js but it looks similar enough to React, for this problem. — thirtydot
Is it possible the click event is being triggered on another overlapping dom element? I would also try using Vue's provide / inject api. — DigitalDrifter
@thirtydot, thank you so much. It works. I wrote up a full answer with one more tip to support right-click behavior. — kennethc
Looks like ag-grid have got around to fixing this: github.com/ag-grid/ag-grid-vue/issues/1#issuecomment-430685517. — thirtydot

kennethc kennethc · Accepted Answer · 2018-09-06T19:49:03

the approach suggested by @thirtydot works well. The only downside was the user cannot right-click, but I found you can just define href link. So when you left-click, event listener makes use of router. When you right-click and open in new tab, browser takes href link.

You still need to make your root router available. Below code sample assumes you have the code inside the vue-router-aware Vue component that consumes ag-grid, hence this.$router points to the root router.

{
    headerName: 'ID',
    field: 'id',
    cellRenderer: (params) => {
        const route = {
          name: "route-name",
          params: { id: params.value }
        };

        const link = document.createElement("a");
        link.href = this.$router.resolve(route).href;
        link.innerText = params.value;
        link.addEventListener("click", e => {
          e.preventDefault();
          this.$router.push(route);
        });
        return link;
    }
}

How can I add vue-router link as ag-grid-vue column?

1 Answers