Support Topics Documentation Slack YouTube Blog

How do I display an image inside a datatable column? Please help

Hi there,

I create this data table below with a column of an image file path. Is it possible to display the actual image instead of the image url path? If so, how do I do that? Sorry I am a newbie here.

Thanks in advance

Hello @KLoic

At this moment the DataTable Component doesn’t support images.

In order to implement this, I would recommend you to use DynamicList, this can be applied for such components as Container, Row and Block.

To how to use DynamicList take a look at this video https://youtu.be/MnV0O8rbbBE

Regards, Vlad

Hi @vladimir-upirov ,

Thank you for your quick reply. I think I can reach my objective using Containers. I just watched this video about container: The Container Component - YouTube and I was wondering if, using the same example, it’d be possible to sort the dynamic list by ‘population’ in a descending order? If yes, could you please give me quick steps on how to achieve this?

Thank you.

Yes, it is possible.

The DynamicList component is just a UI list that renders its items (DataItems) by a certain pattern, which means, it can render items in any order you want.

There are two approaches to get items sorted:

  1. server sorting - it’s when you request items/object from the server with particular sorting options, and in this case, you just need to pass/assign them to the DynamicList

  2. client sorting - when you can sort items on the client and you don’t need to do an extra request to the server

So, the main idea is to

  1. get items from the server or build the list on the client
  2. sort these items (on the server or client)
  3. and finally assign to the DynamicList

Thank you @vladimir-upirov

Another question. If i want to display content of a table inside a container and NOT use ‘dynamiclist’ option. Which block can I use to replace the ‘Set Dynamic List of Items…’ ??

Thanks

Hi, @KLoic

If you need to display all objects from the table you need to use only Dynamic List.

Regards,
Marina