Images in tables

Below is an example of adding images to a table.

View Mode Analysis

Click Powered by Mode to duplicate this example and add images to a table. Learn more about using HTML to customize your reports.

Add images to tables

First, make sure your table visualization contains the URLs of the images you want to display. Once you've added this table to your report, you can integrate images with the following steps.

Add the stylesheet link and script tag to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.customizeTable([{
  vizId: '1d1d948120ec',
  addImages: {
    columnNames: ['image'],
    rowHeightOverride: 100
  }
}])

</script>

The customizeTable function above takes an array of object(s) as inputs. One Javascript object per table:

• vizId: The ID of the Mode table you want to add images to. You’ll find this ID in the pre-populated HTML code in a line that looks like this: <mode-chart id="chart_1d1d948120ec" dataset="dataset" options="chart_options"></mode-chart>. You should provide the ID hash without the chart_ prefix.
• columnNames: A list of the columns you want to add images to.
• rowHeightOverride: An optional configuration that will override normal row height. If this variable is not provided, the normal row height is used. Alignment of images should respect alignment of columns.