1

I am using ag-grid with vue.js. I want link a component from a cell of the main table grid. Unfortunately it doen't work using vue.js router-link. This is my current column definition where I use the a href instead. The major problem with this approach is that it reloads all the app instead of the specific view.

    this.columnDefs = [
        {headerName: 'Job', field: 'job_id', sortable: true, filter: true},
        {headerName: 'Link', field: '_id',
        cellRenderer: function(params) {
                        return `<a href="/jobsList?job_id=${params.data.job_id}">Lista Records</a>`;
                      }
        }
    ];

The problem is when i try to use the vue.js router-link:

    cellRenderer: function(params) {
         return `<router-link to="/jobsList?job_id=${params.data.job_id}">Lista Records</router-link>`;
    }

How can I make it work using the vue.js router-link?

s4f3r71
  • 46
  • 6
  • Do it programmatically instead: https://router.vuejs.org/guide/essentials/navigation.html – thirtydot Sep 30 '20 at 14:37
  • No sure if I can do this way because the link should be in the table cell and there are potentially thousents of item in the table that will be retrieved from the server using pagination params. Am I missing something? – s4f3r71 Oct 01 '20 at 07:02
  • You should use `cellRenderer` to create an `a` element that has an `onClick` event which navigates programmatically. [Related example](https://stackoverflow.com/questions/45218532/clickable-url-value-in-ag-grid-with-react/45231951#45231951). – thirtydot Oct 01 '20 at 17:46

0 Answers0