I am using

View Code in Sandbox

CodePudding user response：

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

CodePudding user response：

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