href links in the array object

Question

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", "john@example.com", "(353) 01 222 3333"],
    ["Mark", "mark@gmail.com", "(01) 22 888 4444"],
    ["Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    ["Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    ["Afshin", "afshin@mail.com", "(353) 22 87 8356"]
  ]
}).render(document.getElementById("wrapper"));

Output

View Code in Sandbox

Please note that the data is a normal JS array, not JSON. – evolutionxbox Mar 16 '22 at 17:00 — evolutionxbox, Mar 16 '22 at 17:00

Steve · Accepted Answer · 2022-03-16T17:31:23.103

1

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", "john@example.com", "(353) 01 222 3333"],
    [2, "Mark", "mark@gmail.com", "(01) 22 888 4444"],
    [3, "Eoin", "eoin@gmail.com", "0097 22 654 00033"],
    [4, "Sarah", "sarahcdd@gmail.com", "+322 876 1233"],
    [5, "Afshin", "afshin@mail.com", "(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

edited Mar 16 '22 at 17:31

answered Mar 16 '22 at 17:05

Steve

11,596
7
39
53

thanks, Here in this all names have the same URL, is it possible to have a unique URL for each field? – Dinesh Sunny Mar 16 '22 at 17:25
Yes -- You can add a unique id to the `data` objects and then reference it as I did above. Give me a minute and I'll update my example. – Steve Mar 16 '22 at 17:27
@DineshSunny I've updated the example using the same URL appending a unique id from the data set. Note that I've added `1, 2, 3, etc` as the 0th item in each array to be used as a unique id. – Steve Mar 16 '22 at 17:32
You're welcome @DineshSunny! Happy to help! – Steve Mar 16 '22 at 17:34
Currently, I have an HTML table with 200 rows, I would like to convert html to grid js table so that I will get performance with the speed of the page, is it ok if I do that? – Dinesh Sunny Mar 16 '22 at 17:36
@DineshSunny You're going to take a small performance hit because the JS has to render the DOM, as opposed to having static HTML, but it should be negligible and ok to do with so few rows, in my opinion. If I were making this page, I'd do exactly what you're doing with the JS. – Steve Mar 16 '22 at 17:38
Sorry, did not get this one. Is it ok If I spend time converting all 200 static html rows into a grid js table to have performance in speed? – Dinesh Sunny Mar 16 '22 at 17:47
1

I may not be understanding the question correctly. If you already have this table as an HTML page, converting this to JavaScript is not going to give you much, if any, of a performance boost. As JS, it could (arguably) be a smaller file for the user to download, but the time it takes for GridJS to load/render the grid will most likely take more time than it would take the browser to just load a plain HTML file. What you're gaining by converting this to JS is easier maintenance/modifications in the future as well as the in-built functionality of the grid itself (sorting, paging, etc). – Steve Mar 16 '22 at 17:56

score 0 · Answer 2 · answered Mar 16 '22 at 17:03

0

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

answered Mar 16 '22 at 17:03

shalini mandal

161
7

thanks, Here in this all names have the same URL, is it possible to have a unique URL for each field? – Dinesh Sunny Mar 16 '22 at 17:26

href links in the array object

2 Answers2