How to use cellRenderer to navigate to some route?

Question

I am using a AgGrid and want to have a cell with link and I want to navigate to some React route on click of the link.

cellRenderer: 'linkColRenderer'

For some reason, the below code for linkColRenderer does not work

import React from 'react';

export default (props) => {

    var link = document.createElement('a');
    link.href = '#';
    link.innerText = props.value;
      link.addEventListener('click', (e) => {
        e.preventDefault();
        console.log(props.data.id);
    });
    return (
        <>
            <span>{link}</span>
        </>
    );

    const goToDetails = (params) => {
        //Go to some route...via props.history.push 
    }
  
    //return <a href="javascript:;" style={{color: '#000000'}}>{props.value}</a>
};

score 0 · Answer 1 · answered Jan 09 '23 at 16:15

In this example, the goToDetails function is called when the link is clicked, and it uses the history.push method to navigate to the /details/:id route, where :id is the id field of the clicked cell's data.

You can then use this cell renderer in your AgGrid as follows:

import React from 'react';

export default (props) => {

var link = document.createElement('a');
link.href = '#';
link.innerText = props.value;
  link.addEventListener('click', (e) => {
    e.preventDefault();
    console.log(props.data.id);
});
return (
    <>
        <span>{link}</span>
    </>
);

const goToDetails = (params) => {
    //Go to some route...via props.history.push 
}

//return <a href="javascript:;" style={{color: '#000000'}}>{props.value}</a>

};

In this example, the goToDetails function is called when the link is clicked, and it uses the history.push method to navigate to the /details/:id route, where :id is the id field of the clicked cell's data.

You can then use this cell renderer in your AgGrid as follows:

How to use cellRenderer to navigate to some route?

1 Answers1