Using nuxt-link in ag-grid Row

Question

Using the ag-grid table i'm trying to use cellRender to route an entire table row to the right page. It's a bit unclear how to to this with nuxt-link.

The path the ag-grid row(cell) should link to is the following:

<nuxt-link :to="'users/' + id + '/overview' ">

For now I created a cellRender with the route name based on the info I found so far.

this.columnDefs = [
  {
    headerName: "ID",
    field: "id",
    cellRenderer: params => {
      const route = {
        name: "users", // This path should redirect to <nuxt-link :to="'users/' + id + '/overview' ">
        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;
    }
  },
  {
    headerName: "Naam",
    field: "naam",
    checkboxSelection: true,
    sortable: true,
    headerCheckboxSelection: true
  },
  { headerName: "Type", field: "type", sortable: true },
  { headerName: "Status", field: "status", sortable: true },
  { headerName: "Laatste Contact", field: "contact", sortable: true },

];

What would be the best way to implement these kind of links for an entire row?

Thanks in advance!

Answer 1

In this case, we can just simulate the HTML as nuxt-link does:

cellRenderer: (params) => {
        return `<a href="/users/${params.value}/overview">${params.value}</a>`;
      }

With the we don't need to care about adding history to the route, the "bad" thing it's if you change this route you need also to update here.

Answer 2

I was able to programmaticly link to another page while clicking a row. But the parameters are still visible in my link in the browser.

What I did:

this.gridOptions.onRowClicked = params => {
  this.$router.push({
    path: "/users/${params.data.id}/overview"
  });
};

This gives me the following url in the browser

users/$%7Bparams.data.id%7D/overview