> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/column-types-gallery.md). # Column Types Gallery See every column type of the screen flow Data Table, from progress bars and star ratings to pickers and buttons, and pick the right one for each field. The same Probability field can be a plain `75%` or a green bar, and a deal health score from 1 to 5 can be a row of stars. A sales manager reviewing open deals on a flow screen spots the weak ones faster in bars and stars than in a column of numbers. Each column's **Type** decides how its value is drawn, and whether the user can change it in the cell.
Data Table of open opportunities with linked names, stage badges, probability progress bars and star ratings for deal health

One table, five column types: Text with Linkify, Badge, Currency, Progress Bar and Rating.

## Before you start * A screen with an Avonni Data Table on Opportunity, fed by a **Query** or a **Variable** (Get Records) data source. [Learn the Basics](/flow/tutorials/components/data-table/learn-the-basics.md) sets one up. The examples use the API Name `DealsTable`. * Every option of every type is listed in the reference: [Enhance Data Presentation](/flow/flow-components/data-table.md#enhance-data-presentation) and [Tailor Each Column](/flow/flow-components/data-table.md#tailor-each-column). ## The Type list depends on the field A column's **Type** list only offers the types that fit its **Source Field**. If a type you expect is missing, check the field type first. | Source field type | Types offered | | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------- | | Number, Currency, Percent | Counter, Currency, Number, Percent, Progress Bar, Progress Circle, Progress Ring, Rating, Slider | | Text, Text Area, URL, Email, Phone, Lookup | Avatar, Badge, Color Picker, Email, Icon Picker, Lookup, Phone, QRcode, Record Picker, Rich Text, Text, Textarea, Url | | Picklist | Badge, Combobox, Text | | Multi-Select Picklist | Combobox (Multi-Select), Text | | Checkbox | Boolean, Checkbox Button, Toggle | | Date | Date | | Date/Time | Date Time | | Time | Time | | Any field, or a **Custom** column | Action, Button, Button Icon, Content Document, File Upload, Location | {% hint style="info" %} A formula field counts as the type it returns. A formula that returns a number can be drawn as a Rating or a Progress Bar, a formula that returns text can become a Badge or a QRcode. {% endhint %} ## Change the type of a column {% stepper %} {% step %} ### Open the column 1. Select the Data Table on the screen and click **Open Component Builder**. 2. In the preview, click the chevron on the column header and choose **Type Attributes**. The same settings sit in the **Properties** tab, under **Data Mappings** > **Columns**. 3. Check the **Source Field** of the column: it decides which types the list offers. A column with no field behind it (a button, a menu) is a **Custom** column. {% endstep %} {% step %} ### Pick the Type Open **Type** and choose how the value is drawn, for example **Progress Bar** on Probability or **Rating** on Deal Health. {% endstep %} {% step %} ### Set the type's options The options change with the type you picked. Set what matters for the reader: a **Max** of `5` for a Rating, **Show Value** for a Progress Bar, a **Label** for a Button. Many options have a field picker next to them, so the value can change per row. A Badge **Variant** read from a formula field turns each row green, orange or red on its own. See [Customizing the badge color using a formula](/flow/tutorials/components/data-table/tips-and-tricks/customizing-the-badge-color-using-a-formula.md). {% endstep %} {% step %} ### Decide if users can change the value For the input types (Combobox, Date, Slider, Toggle, Rating), turn on **Editable** to let users change the value in the cell. Turn on **Display as Input** when the cell should look like a form field from the start, without a click on the pencil. Edits stay in the flow until they are saved. [Making a field editable](/flow/tutorials/components/data-table/making-a-field-editable.md) shows how. {% endstep %} {% step %} ### Save and test Click **Save** in the popover, then **Done**, save the flow and run it with **Debug**. Each row shows the value in its new form: a bar, a star rating, a badge. {% endstep %} {% endstepper %} ## Show progress and scores ### Progress Bar For a share of a whole: Probability, percent complete, budget used. Options: **Variant** (Base, Rounded), **Theme** (Base, Success, Warning, Error and more), **Thickness**, **Show Value**, **Value Prefix**, **Value Suffix**. ### Progress Ring For a narrow column where a small ring reads better than a bar. On a **Percent** field the ring currently stays empty: use a **Progress Bar** for percentages, or a **Number** field for the ring. Options: **Variant** (Base, Active Step, Warning, Expired, Base Autocomplete), **Size** (Medium, Large), **Direction** (Fill, Drain), **Hide Icon**. ### Progress Circle For a larger circle with the value in its center, on a table with few rows. Options: **Size**, **Thickness**, **Direction** (Fill, Drain). ### Rating For a score: deal health from 1 to 5, customer satisfaction. Options: **Icon Name** (set `utility:favorite` for stars; left empty, the rating draws numbered pills), **Min**, **Max**, **Selection** (Continuous, Single), **Value Hidden**, **Disabled**. ### Slider and Counter **Slider** lets users adjust a number within a range, like a discount between 0 and 30 (**Min**, **Max**, **Step**, **Size**, **Disabled**). **Counter** changes a quantity by small steps with plus and minus buttons (**Step**, **Min**, **Max**). ## Show status at a glance ### Badge For a status or a category: Stage, Priority, Type. On a picklist, the badge shows the picklist label. Options: **Variant** (Base, Brand, Inverse, Alt Inverse, Success, Info, Error, Warning, Offline), **Background Color**, **Text Color**, **Hide Text**. ### Toggle, Checkbox Button and Boolean For checkbox fields. **Toggle** draws an on and off switch, **Checkbox Button** a selectable button, **Boolean** a check mark for true. Toggle options: **Size**, **Message Toggle Active**, **Message Toggle Inactive**, **Hide Mark**, **Disabled**. ### Avatar For an image from a URL field (a photo, a logo) or initials, with an optional name next to it. Options: **Variant** (Circle, Square), **Size**, **Initials**, **Fallback Icon Name**, **Primary Text**, **Secondary Text**. Step by step: [How to add images on the Data Table](/flow/tutorials/components/data-table/how-to-add-images-onthe-data-table.md). ### QRcode For a value scanned from a phone: a record link, a tracking URL, a serial number. Options: **Size**, **Encoding**, **Error Correction**. Step by step: [Displaying a record as a QR code](/flow/tutorials/components/data-table/displaying-a-record-as-a-qr-code.md). ### Color Picker and Icon Picker For a text field that stores a color (`#0176D3`) or an SLDS icon name (`standard:account`), when users should see it and pick a new one. ## Let users pick values in the cell Combine these with **Editable** and **Display as Input** to turn the table into a bulk edit form. ### Combobox and Combobox (Multi-Select) For picklist fields, so users pick a value from the field's own list: a new Stage, a Lead Source. Options: **Allow Searching**, **Placeholder**. ### Lookup and Record Picker For a lookup field, like the Account or the Owner of an opportunity. **Lookup** shows the parent record's name, **Record Picker** lets users search for another record. **Linkify** makes the name open the record ([Displaying record name field as a link](/flow/tutorials/components/data-table/displaying-record-name-field-as-a-link.md)). ### Date, Date Time and Time Use **Date** on a Date field (Close Date) and **Date Time** on a Date/Time field (Created Date). **Date Time** on a date-only value can show the day before for users west of UTC.
Opportunity table where Stage, Lead Source, Close Date and Owner are shown as editable inputs

Combobox, Date and Record Picker columns with Display as Input on.

As soon as one column is editable, the table adds a row number column on the left, even with **Show Row Number Column** off. ## Trigger actions and handle files ### Button and Button Icon For one obvious action per row: Log a Call, Open, Approve. **Button** shows a label, **Button Icon** only an icon. Give each a **Name**: the **Row Action** interaction targets it. [Creating Row Actions](/flow/tutorials/components/data-table/creating-row-actions.md) wires them. ### Action For several actions grouped in a menu at the end of the row. Options: **Row Actions** (each with **Label**, **Name**, **Disabled**, **Hidden**), **Menu Alignment**. The column is narrow, so keep its header label short or empty. ### File Upload and Content Document **File Upload** puts an upload button in each row, to attach a signed quote to its opportunity. **Content Document** shows the record's files as thumbnails in the cell. Details: [File Upload Column Type](/flow/flow-components/data-table.md#file-upload-column-type).
Opportunity table with a Log Call button, an edit icon button and a row action menu on each row

Button, Button Icon and Action columns put the next step on each row.

## Format plain values | Type | Use it for | Main options | | ------------- | ---------------------------------------------------- | ------------------------------------------------------------ | | **Currency** | Amounts, prices | **Currency Code**, **Currency Display As**, **Summarize By** | | **Number** | Counts, quantities | Fraction and integer digits, **Summarize By** | | **Percent** | Rates, discounts | Fraction and integer digits, **Summarize By** | | **Text** | Names, short text | **Linkify** (on the record name field) | | **Textarea** | Long notes | **Placeholder**, **Maximum Length** | | **Rich Text** | Formatted text, `IMAGE()` and `HYPERLINK()` formulas | **Variant**, **Formats** | | **Email** | Email addresses, opened in the mail app | none | | **Phone** | Phone numbers | **Click To Dial** | | **Url** | Web links, or a record Id with **Record Link** | **Label**, **Target**, **Tooltip**, **Record Link** | | **Location** | Coordinates | **Latitude**, **Longitude** | {% hint style="warning" %} Do not use **Url** to make a record name clickable: the name becomes a broken web address. Use **Text** with **Linkify** instead. {% endhint %} ## Troubleshooting
The type I want is not in the Type list The list is filtered by the source field type (see the table at the top of this page). A Progress Bar needs a number field, a Toggle a checkbox field, a Combobox a picklist field. Pick another field, or create a formula field that returns the right type.
Dates show one day early The column type is **Date Time** on a value that only holds a date. Switch the column to **Date**.
A cell looks like an input but the user cannot change it **Display as Input** only changes the look. Turn on **Editable** too, then save the change as described in [Making a field editable](/flow/tutorials/components/data-table/making-a-field-editable.md).
## Related tutorials * [Data Table editor](/flow/tutorials/components/data-table/tips-and-tricks/data-table-editor.md): the column menu where **Type Attributes** lives. * [How to conditionally color cells](/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md): color a whole cell from a field value. * [Group rows and show totals](/flow/tutorials/components/data-table/group-rows-and-show-totals.md): add subtotals to Currency and Number columns. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://docs.avonnicomponents.com/flow/tutorials/components/data-table/column-types-gallery.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.