Question 14929 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Link of react-router-dom not working inside DataTable createdCell hook – Jquery

  1. I’m using jQuery DataTable inside react. (I know, not good to use jQuery in react but it’s since long and many feature customize in that plug-in which we did not get in other plug-in)

  2. Using columns hook we can add anchor link in one of column (it’s working fine but page is refresh due to not use react router)

    let columnConfig = [
 ...ManyOtherColumns,
 {
  orderable: false,
  className: 'view-page-cell',
  "width": "35px",
  "defaultContent": "",
  "createdCell": function (td, cellData, rowData, row, col) {
    //Some custom logic here...

    let anchor = `<a
      class="view-page"
      title="${title}"
      href="${url}">
        <img class="image" src="${viewIcon}" width="16" />
    </a>`;
    ReactDOM.render(anchor, td )
  }
 }
]

  3. Not able to add Link of react-router-dom (using version "5.2.0") (code example as below), getting error like Uncaught Error: Invariant failed: You should not use <Link> outside a <Router>

     let columnConfig = [
 ...ManyOtherColumns,
 {
   orderable: false,
   className: 'view-page-cell',
   "width": "35px",
   "defaultContent": "",
   "createdCell": function (td, cellData, rowData, row, col) {
     // custom logic here.. 
     ReactDOM.render(<Link to={url} isactive="true" className="view-page"><img src="${viewIcon}" /></Link>, td )
   }
 }
]

  4. DataTable Initialize as below

     wrapper.find('.data-table-grid').DataTable({ 
  ...OtherConfig,
  columns: columnConfig    
});

For more check my codepen: https://codepen.io/jsnaghera/pen/vYrwgQz

NOTE: Using click event on cell and useHistory will not full-fill my requirement because I need feature like user can righ+click and open page in new tab.

Tags:

2

Answers


  1. 0

    You can write onClick instead of <a> or <Link> then move page to your URL by that function.

    <button onClick={YourFunctionName} />
    Login or Signup to reply.
  2. 0

    I’m sorry to say it, but you will not be able use react-router inside of your jQuery code.

    "createdCell": function (td, cellData, rowData, row, col) {
     // custom logic here.. 
     ReactDOM.render(<Link to={url} isactive="true" className="view-page"><img src="${viewIcon}" /></Link>, td )
   }

    When you call ReactDOM.render here you are creating a completely separate component tree. This Link will not be inside of the Router that’s in your App.

    The simplest solution is to use a standard <a> tag like <a href="/view-page">. React-router will handle loading the correct content for that path. But clicking this link will cause a full reload of the App rather than navigating inside the existing App instance like you would with a <Link>.

    You can use react-router so long as you are not using an additional ReactDOM.render.

    I came up with a solution where you use the <Link> in the code which creates the table markup, rather than where you modify the markup in jQuery.

    I made a component that returns a <td>:

    const LinkedCell = ({ children }) => (
  <td>
    <Link to="/view-page">
      <img src="https://cdn-icons-png.flaticon.com/512/5566/5566326.png" width="25" height="25" alt="" title="" className="img-small"/>
      {children}
    </Link>
  </td>
)

    And then used that inside the return of your App:

    <tbody>
  <tr>
    <LinkedCell>Tiger Nixon</LinkedCell>
    <td>System Architect</td>

    This eliminates your columnDef, so now you just need:

    useEffect(()=>{
  $('#example').DataTable();
},[])

    Revised CodePen

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search