How to Add Image List to Grid Cells
IntegralUI Grid component for Angular, React and Vue comes with built-in option that allows you to add or place multiple images in a single cell. You can choose the column which cells will display one or more images from a provided list. The images can be from a local or remote source.
In following sections below, you will find sample code in JavaScript, Angular, React and Vue that shows how to add image list to grid cells.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, the developer skill is displayed using an image. If a developer has skills in different programming languages, multiple images appear in the corresponding cell.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Place Multiple Images in Single Grid Cell
When you want to display one or more images in grid cells, the best way is to create a template when you add custom content to specified cell. In this case, the cell value is an image list and the template creates an image element for each item from the list:
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Each cell can have a different image list. Images are displayed based on their order in the list. You can use images from a local or remote source. In this case, because all images come from the same source, the src value of img element uses the predefined variable iconSrc (points to a remote source) and applies a new image based on current item in the list.
In this example, each programming skill f a developer is represented by a different image. For developers that have multiple programming skills, the cell value contains an image list of all corresponding images. Whenever a developer acquires a new skill, you only need to update image list in the cell value with a related image.
We are using 3rd party images from Konpa to create the image list.
To apply a different cell template, use the cell cid field, which is related to column id, to determine the column to which cells with images belong. In this case, this column has id set to 3. For cells in other columns, just display the cell text.
How to Change Image List Appearance in the Grid Cells
In general, for keeping the grid structure you need to use images in the same format, where images have same width and height. When multiple images are placed in a single cell, you can set the space between them by modifying the corresponding CSS style.
Because templates are in use, you can't add CSS class directly to web components. Instead, you can create a CSS file and apply it to the customStyle property of the Grid component.
In this example, all images are aligned to the left, have the same width and height of 32x32 pixels, and the space between them is set to 6px.
Conclusion
When you want to display multiple images in a single grid cell, you can use the built-in option if IntegralUI Grid component that allows you to add images to specific column cells using templates. Once this is set, you can apply an image list to grid cells for each cell separately. As a result, one or multiple images are displayed in the cells based on their order. In addition, you can modify the alignment, space between images, their size and other settings, using CSS.
The Grid is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.