Post

Adding hyperlinks to columns in AG Grid

Hyperlinks can be added to columns in AG Grid as in the following script:

1
2
3
4
5
6
7
8
9
10
11
12
class UrlCellRenderer {
    init(params) {
        this.eGui = document.createElement("a");
        this.eGui.innerText = "View page ⮺";
        this.eGui.setAttribute("href", params.value);
        this.eGui.setAttribute("style", "text-decoration:none");
        this.eGui.setAttribute("target", "_blank");
    }
    getGui() {
        return this.eGui;
    }
}

Ref.

Other columns can be referenced as follows:

1
2
3
4
5
6
7
8
9
10
11
12
class UrlCellRenderer {
    init(params) {
        this.eGui = document.createElement("a");
        this.eGui.innerText = params.data.page_title;
        this.eGui.setAttribute("href", params.value);
        this.eGui.setAttribute("style", "text-decoration:none");
        this.eGui.setAttribute("target", "_blank");
    }
    getGui() {
        return this.eGui;
    }
}
This post is licensed under CC BY 4.0 by the author.