> 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/dynamic-components/tutorials/components/data-table/use-rich-column-types.md).
# Use Rich Column Types
Turn plain Data Table columns into record links, owner avatars, progress bars and star ratings, so a manager reviews deals without opening each one.
In a weekly deal review, a manager scans twenty opportunities and wants to know who owns each one, how likely it is to close and how healthy it looks, then open the deal or its account in one click. Each column's **Type** decides how its value is drawn, so the same fields can show as links, avatars, bars and stars instead of plain text.
Linked deal names, an owner avatar, a probability bar and star ratings in one deal review table.
## Before you start
* A Data Table with a **Query** data source on Opportunity. See [Data Table](/dynamic-components/components/data-table.md).
* For the rating column, a number field that holds a score from 1 to 5. This tutorial uses a custom field **Deal Health** (`Deal_Health__c`, Number, no decimals). Any number field works.
* **Lookup** columns need a **Query** or **Variable** data source. They are not offered with the Manual data source.
## Steps
{% stepper %}
{% step %}
### Show the opportunity name as a link
1. In **Data Mappings**, open **Columns** and click the **Opportunity Name** (`Name`) column.
2. Keep **Type** on **Text**.
3. In **Type Attributes**, turn on **Linkify**.
Each name now opens its opportunity. Do not use the **Url** type for this: it would turn the name into a web address.
{% endstep %}
{% step %}
### Link the account
1. Add a column on **Account ID** (`AccountId`).
2. Set **Type** to **Lookup**.
3. In **Type Attributes**, turn on **Linkify**.
The column shows the account name, linked to the account record.
{% endstep %}
{% step %}
### Show the owner as an avatar
1. Add a column on the owner's photo, `Owner.SmallPhotoUrl`. The column's value is used as the image.
2. Set **Type** to **Avatar**.
3. In **Type Attributes**, map **Primary Text** to `Owner.Name` so the name shows beside the picture.
4. Set **Variant** to **Circle**. **Size** is **Small** by default, which fits a table row.
{% endstep %}
{% step %}
### Show the probability as a progress bar
1. Click the **Probability (%)** (`Probability`) column.
2. Set **Type** to **Progress Bar**.
3. In **Type Attributes**, turn on **Show Value**. Leave **Value Suffix** empty: a percent field already prints its `%` sign.
The bar fills from 0 to 100, so a deal at 75% shows three quarters full. **Progress Ring** and **Progress Circle** draw the same value as a ring, for narrower columns.
{% endstep %}
{% step %}
### Show the deal health as stars
1. Add a column on **Deal Health** (`Deal_Health__c`).
2. Set **Type** to **Rating**.
3. In **Type Attributes**, set **Max** to `5` and **Icon Name** to `utility:favorite`. Without an icon, the rating shows numbered buttons instead of stars.
4. Optional: turn on **Value Hidden** to remove the `4/5` text printed next to the stars.
A deal scored 4 shows four filled stars out of five.
{% endstep %}
{% step %}
### Save and test
Save and open the page. Each row shows a linked opportunity name, a linked account, the owner's photo and name, a filled bar with its percentage, and up to five stars. Click a name: the opportunity opens.
{% endstep %}
{% endstepper %}
{% hint style="info" %}
The **Type** list only offers types that fit the source field. **Progress Bar**, **Progress Ring**, **Progress Circle** and **Rating** need a number or percent field, **Avatar** a text field. If a type is missing, check the field's data type first.
{% endhint %}
## Troubleshooting
The name shows as a broken web address
The column uses the **Url** type. Switch it back to **Text** and turn on **Linkify**. The **Record Link** option of the **Url** type is meant for a field that holds a record ID, not a name.
Linkify does nothing on a Text column
**Linkify** on a **Text** column only links the object's name field (`Name`, or `CaseNumber` on Case, for example). For any other field that points to a record, use a lookup field with the **Lookup** type.
## Related tutorials
* [Open a Record from a Row](/dynamic-components/tutorials/components/data-table/open-a-record-from-a-row.md): open the record when the user clicks anywhere on the row.
* [Add Status Indicators](/dynamic-components/tutorials/components/data-table/add-status-indicators.md): a colored dot that shows each deal's stage in a narrow table.
* [Apply Badge Color-Coding](/dynamic-components/tutorials/components/data-table/apply-badge-color-coding.md): show the stage as a colored badge.
---
# 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/dynamic-components/tutorials/components/data-table/use-rich-column-types.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.
