CODEWITHSUNDEEP
javascripthtmljqueryarraysgrid.js
Dinesh Potluru
Dinesh Potluru

Reputation: 4901

href links in the array object

I am using Grid.js library to build the tables in the wordpress website. Searched for a lot of documentation but unable to find how to add links to the names in the first column to open in a new tab which is the array object.

HTML

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
      rel="stylesheet"
    />
    <title>Grid.js Hello World</title>
  </head>
  <body>
    <h1>
      Grid.js Hello World
    </h1>

    <div id="wrapper"></div>

    <script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
    <script src="src/index.js"></script>
  </body>
</html>

JS file:

new gridjs.Grid({
  columns: ["Name", "Email", "Phone Number"],
  search: true,
  data: [
    ["John", "[email protected]", "(353) 01 222 3333"],
    ["Mark", "[email protected]", "(01) 22 888 4444"],
    ["Eoin", "[email protected]", "0097 22 654 00033"],
    ["Sarah", "[email protected]", "+322 876 1233"],
    ["Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));

Output

enter image description here

View Code in Sandbox

Upvotes: 1

Views: 911

Answers (2)

Steve G
Steve G

Reputation: 13367

You can add custom HTML using the formatter option and the gridjs.html() function. For example:

new gridjs.Grid({
  // Converted the columns to objects, instead of strings, to pass options
  columns: [
    { name: "id", hidden: true },
    {
      name: "Name",
      // Added a `formatter` function
      formatter: (cell, row) => {
        // Uses the `html` function to add elements
        // Note that we're pulling a value for the link from the
        // data set as well for a more complete, real-world example
        return gridjs.html(
          `<a href='mypage.html?id=${row.cells[0].data}'>${cell}</a>`
        );
      }
    },
    {
      name: "Email",
      formatter: (cell, row) => {
        return gridjs.html(`<a href='mailto:${row.cells[2].data}'>${cell}</a>`);
      }
    },
    { name: "Phone Number" }
  ],
  search: true,
  // Added unique id, per OP's comments
  data: [
    [1, "John", "[email protected]", "(353) 01 222 3333"],
    [2, "Mark", "[email protected]", "(01) 22 888 4444"],
    [3, "Eoin", "[email protected]", "0097 22 654 00033"],
    [4, "Sarah", "[email protected]", "+322 876 1233"],
    [5, "Afshin", "[email protected]", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));

Updated example using unique id, per OP's comments

Working CodeSandbox: https://codesandbox.io/s/gridjs-hello-world-forked-u52kyg?file=/src/index.js

Source: https://gridjs.io/docs/examples/html-cells

Upvotes: 1

shalini mandal
shalini mandal

Reputation: 161

You can use a custom cell formatter provided by gridjs.

Refer Docs: https://gridjs.io/docs/examples/html-cells/

My Working code sandbox link: https://codesandbox.io/s/gridjs-hello-world-forked-uvsgom

Upvotes: 0

Related Questions