Custom Image Renderer not sorting correctly

Tags: #<Tag:0x00007efc6ae2c8c8>
#1

I have a custom image renderer and a text renderer, which work great on initial load of data. Once I sort the table, the images are not with their correct row anymore. I have searched and can not find a solution. I thought adding this would help get the actual row after sorting, but it is still not correct.
const logicalRowNum = cellProperties.row; // instance.runHooks(‘modifyRow’, row);instance.toPhysicalRow(row);
const logicalRowData = instance.getSourceDataAtRow(logicalRowNum);

Here is a StackBlitz of my code:

Notice on load of data:
‘Updating ShowId 6103’ has an image ‘Switched’,
‘Updating ShowId 6400’ has an image with a woman’s face,
‘Updating ShowId 5953’ has a ‘Wish’ image,
‘Updating ShowId 4670’ has ‘Sondheim’ image, and
‘Updating ShowId 6257’ has an image with a man

Then, sort the ‘Show Name’ column, and the images are not correct anymore.

Thanks for any help you could provide!!
Tonia

#2

Hi @toniamarie2000

The images do not load at the initial load as well. Maybe you’d be able to share a .zip instead?

#3

Thank you for the quick reply!
You can not see the images in the second column if you scroll down a bit? Not every row will have an image. These images are all hosted on aws and rendered via the src attribute.
image

#4

Your imageRenderer is not return TD if value is not defined. You should clear the td.innerHTML and return it as an empty cell: https://stackblitz.com/edit/angular-5ykm8c-gqjeuc?file=src/app/heroes/heroes.component.ts

1 Like
#5

Thank you so much! That did it!!

#6