1

I have data table to show, some columns are of type "image".

Airtable, for example, displays images directly in the cells, but it makes the rows very thick :

Airtable

That thickness is not required for other fields here.

Another option would be to put an image icon in each cell and show the image in a popover when hovering the icon.

What are the best ways to display images in data tables?
If using an icon inside the cell, which icon would fit best ?

Thanks !

[Edit] Context

This is for a no-code tool similar to Airtable. You can specify the different database models you want, and which fields are in each database model with this ui : tool ui

Now, we need to add a way for users to add some data in these tables. It's not done yet but fields will have different possible types: string, number, boolean, file, image.

The insertion of data is just for test data useful to test the app, that can be inserted manually, it's not supposed to be filled with large volumes (>30 items).

If we use a table for the display and edition of this data, what would be the best way to display images without having thick rows ?

5
  • How significant is the image to the user compared to the other columns? Dec 23, 2022 at 14:09
  • What is the the purpose of the data table in the larger context? Dec 23, 2022 at 14:11
  • It's part of a no-code tool similar to Airtable, so the image might mean anything, it depends what the user is using this no-code tool for. Dec 23, 2022 at 15:55
  • Please clarify the problem you are trying to solve. Icon suggestions are off-topic per community rules.
    – Izquierdo
    Dec 23, 2022 at 16:06
  • Updated, let me know if that clarifies. Thanks. Dec 23, 2022 at 16:24

3 Answers 3

4

These are great questions and while we’re not 100% sure of the context, background and users of your scenarios you're working with, we thought of a few ideas that could be explored further.

1. Offer an imaged based browsing experience

Your table cells could be turned into cards if users are adding images and prefer browsing this way.

This is an image of a data table turned into cards

Additionally, the following image could be a viable option for when your users require a comparison feature:

This is an image of a data table turned into cards with a card filter

What if you have multiple images?

We also thought about how users might incorporate a carousel-like feature to add multiple images to a single cell in the data table or card view.

A card showing a left and right arrow to slide through multiple images

2. If using an icon inside the cell, which icon would fit best?

A table view with multiple images in cells

For simplicity we can use a simple image icon like the following:

An image icon or placeholder

Here are a few links to some great resources for icons:

  • Google Fonts
  • Font Awesome
  • The Noun Project

3. What would be the best way to display images without having thick rows?

Adding a sizing scale, like Gmail's density settings, would allow users to dynamically adjust the size of their images, which is one solution we considered for dealing with the thick rows.

A table view with a sizing scale

Good defaults

If you're going to let users tailor their experience, you should collect useful data about their preferences so you can improve the default view.

This is an example of the density setting in Gmail

Image Sizes

Consider limiting the image sizes. A huge image will cause usability issues for the user. The image might take up their entire screen, which will cause some scrolling issues especially if there is scroll snapping with the data cells.

Aspect Ratios

  • How will you handle tall/wide images?
  • Will you crop the images?
  • Will you add a buffer area to make the size fit correctly?
  • Will you consider different aspect ratios of the images?

Final Thoughts

In summary, hopefully these ideas and questions spark a conversation with your team or within yourself to explore the multitude of factors revolving around your users.

Thanks for reading! I hope it helps! Take care and have a lovely day :)

1

Make the images much smaller, slightly larger than the thumbs up icon's outer border, and then make it enlargeable upon a user's click/tap to either within its row/column (to its current size or slightly larger), or in an overlay/modal.

1

The question is quite interesting. I would advise you to see how other products cope with this task. A great example is Trello and Notion.

My advice, you can use the following options for your images:

  • Use widgets. Make one or two versions of the widget (or card) that will have a fixed size and the same display logic regardless of the size and shape of the image.
  • Use manual setting. Let the user customize the image inside the widget. For example: change position, size, rotate, etc.
  • Determine the order. Create multiple order options for your new widgets. That is, determine the maximum number of widgets that can be in a section, how they will be arranged (one by one, tile, list ...), etc.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.