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
2 answers
solution1
1 ACCPTED 2022-03-16 17:05:06
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
solution2
0 2022-03-16 17:03:49
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.