I need to insert a logo for each game listed in my table, positioned above the title in the first column. The URLs to the demo logos are found in the "L" column of the source table, where it is also labeled:
L: 'Logo',
Therefore, I must utilize this Logo variable and convert it into an image.
The code snippet below pertains to the title column, and I must make adjustments to it:
{ field: 'Title', sortable: true, minWidth: 180, cellClass: 'title-column'}
I attempted the following approach, but it was unsuccessful:
{ field: 'Title', sortable: true, minWidth: 180, cellClass: 'title-column', cellRenderer: function(params) {
const LogoLink = params.data.Link;
let content = "";
if (LogoLink) {
content += document.getElementById('make-image').src=LogoLink;
}
Furthermore, the filtering of the title column must not be disrupted (as it may interpret the image links as content, which is undesired).
Perhaps the solution lies in something like this:
{ field: 'Title', sortable: true, minWidth: 180, cellClass: 'title-column', cellRenderer: function(params) {
const LogoLink = params.data.Logo;
content = LogoLink + params.data.Title;
return content; }},
However, I am uncertain how to encapsulate LogoLink to transform it into an HTML image.
For the complete functioning code, refer to: https://plnkr.co/plunk/w9bgMFlTF8JPK4t9