How to add Images onthe Data Table
Last updated
Last updated
Incorporating images into your Avonni Data Table can enhance your application's visual appeal and usability. Follow these steps to add images seamlessly.
First, define a URL field type within your data model. This field will store the web links to your images. Ensure each record has a unique URL pointing to the image you wish to display.
There are two ways to retrieve data for your table:
Use a 'Get Records' Collection: This method fetches data from your database or a specified data source.
Query Data Source Directly: Avonni Data Table offers a feature to query your data source from within the interface, streamlining the process.
Navigate to the screen elements within your application builder and drag the Avonni Data Table component to the desired location on your screen.
Configure the data mapping to ensure that the data table correctly displays the information from your data source. This step is crucial for accurate data representation.
Drag the image field (URL field type created in Step 1) into your data table. This action will inform the table where to fetch the images from.
For the image type, choose 'Avatar'. This option is designed to display images in a user-friendly and visually engaging way.
Fine-tune how your images are displayed by configuring the following type attributes:
Fallback Icon Name: In case an image fails to load, you can specify a fallback icon. Toggle the field name option and select the URL field created in Step 1.
Variant: Choose between a circle or square shape for your images.
Size: Determine the size of the images. Options typically range from small to large.
Once you have set up all configurations, click 'Save'. Your data table will display images as avatars next to the corresponding records.
