I want to add a logo for each game in my table, it has to be above the title of first column. The links to the demo logo are in "L" column of the source table, this column also defined:
L: 'Logo',
So I need to use this Logo variable and turn it into image.
The string below is responsible for the title column and I need to modify it some way:
{ field: 'Title', sortable: true, minWidth: 180, cellClass: 'title-column'}
I tried something like, but it doesn't work:
{ 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;
}
Also, the filter of the title column should not be broken (in may perceive names of image links as content, this shouldn't happen).
Maybe it should be 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; }},
but I don't know how to wrap LogoLink to make it an HTML image.
Full working code: https://plnkr.co/plunk/w9bgMFlTF8JPK4t9
Hmm, it seems that this solution works:
{ field: 'Title', sortable: true, minWidth: 100, cellClass: 'title-column', cellRenderer: function(params) {
const LogoLink = params.data.Logo;
LogoLink.id = 'image';
content = '<img src=' + LogoLink + ' class="logo-image">' + params.data.Title;
return content; }},
Correct me please, if there are any mistakes/bad coding.