Sometimes images columns get collapsed

Hi there,

I’m using tabulator to display small images - something like 128x128. Occasionally I get something like this:

Sometimes it happens during the sort, sometimes it is like this when the data is loaded. Sometimes it is fine.

The way I define this columns is like this:

                                {
                                    title: "source_image",
                                    field: "source_image",
                                    formatter: 'image',
                                    width: 128,
                                    align: "center",
                                }

Then I take img source as base64 png stream.

I also use layout: "fitDataFill"

Am I using this wrong?

Thanks

[olifolkerd]

Hey All,

This is happening because the image is loading after the table has been drawn so the row height has been fixed while the image is not at its full height,

A more advanced version of the image formatter will be coming in the next release.

in the mean time i would suggest creating a custom image formatter and either setting a height on your image elements or calling the normalizeHeight function on the row component when the image has loaded:

var imageFormatter = function(cell, formatterParams){
    var image = $("<img src='" + cell.getValue() + "'></img>");
    
    image.on("load", function(e){
        cell.getRow().normalizeHeight();
    });

    return image;
}

Cheers

Oli

[olifolkerd]

Tabulator version 3.4 has now been officially release!

You can find details of the new release in the News Section

Full documentation of all the new features can be found Here

Cheers

Oli 😃