# Displaying a Record as a QR Code

## Overview

This guide teaches you how to display a field value as a QR Code in your [Avonni Data Table](https://docs.avonnicomponents.com/flow/flow-components/data-table).

## Result

The final result will look like this:

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FllmeBSEGF1N0bbIWywQE%2F2023-02-07_16-27-53.png?alt=media&#x26;token=1809873e-6db2-404e-ba91-571d65afcdba" alt=""><figcaption></figcaption></figure>

## Steps

### 1. Create a Get Records collection

First, let's create a "Get Records" collection to retrieve a set of records from the account object.

* **Add an element** > Get Records
* **Label Name** > "GetAccounts"
* **Object Name** > Account
* Filter Account Records
  * **Condition requirements**: None - Get All Account Records
  * Select "**All Records**"
  * Click on the "**Done**" button

{% hint style="info" %}
Adjust your filtering settings to match your use case.
{% endhint %}

{% @arcade/embed flowId="NTzaXxSCRtrz7JwxvlST" url="<https://app.arcade.software/share/NTzaXxSCRtrz7JwxvlST>" %}

### 2. Add a screen element

{% @arcade/embed flowId="keNrVy361mE07pmS1WMz" url="<https://app.arcade.software/share/keNrVy361mE07pmS1WMz>" %}

### 3. Add the Avonni Data table component

* Drag the **Avonni Data Table component**
* Open the **Component Builder**
* Select a **Variable** Data Source
* **Add the source collection** created in [Step 1](#1.-create-a-get-records-collection)

{% @arcade/embed flowId="94JbWWDstAAGI6IiuU7r" url="<https://app.arcade.software/share/94JbWWDstAAGI6IiuU7r>" %}

### 4. Configure Data Mappings

* Create your columns (for example, Account Name, Account Description, and Website)
* For the Website Column, choose **QR code as a Data Type**
* Set a QR Code size if needed

{% @arcade/embed flowId="dRApaqrAMwwsAX6kEmVU" url="<https://app.arcade.software/share/dRApaqrAMwwsAX6kEmVU>" %}