> 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/open-a-record-from-a-row.md).

# Open a Record from a Row

Let users open an Opportunity from the table by its name, by a click on the row, or in a side panel, and choose how long lists load.

An account manager scans thirty open Opportunities and wants to open one without hunting for a button. The Data Table offers three ways to do it: the record name as a link, a click anywhere on the row, or a details panel beside the table. This page sets up each one, then covers how long lists load.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FkpuJEqSY3be0zHOXX4eY%2Fdata-table-tutorial-open-a-record-from-a-row-result.png?alt=media" alt="Opportunity table with linked names and a details panel open beside it"><figcaption><p>Names link to their records, and the details panel shows a deal without leaving the table.</p></figcaption></figure>

## Before you start

* A Data Table on the Opportunity object with a **Query** data source and a **Name** column. See [Data Table](/dynamic-components/components/data-table.md).

| Option                  | What the user does                   | Setup                                      |
| ----------------------- | ------------------------------------ | ------------------------------------------ |
| Record name as a link   | Clicks the name                      | One setting on the Name column             |
| Clickable row           | Clicks anywhere on the row           | A setting plus a **Row Click** interaction |
| Show More Details Panel | Clicks an icon at the end of the row | One setting, read-only panel               |

## Steps

{% stepper %}
{% step %}

### Show the record name as a link

1. Select the Data Table, stay on the **Properties** tab, and open the **Name** column under **Columns**.
2. Set **Type** to **Text** and turn on **Linkify** under **Type Attributes**.

Each name now links to its record. [Use Rich Column Types](/dynamic-components/tutorials/components/data-table/use-rich-column-types.md) covers this setting and the **Lookup** column that links a related record, such as the Account.
{% endstep %}

{% step %}

### Make the whole row clickable

1. In the **Content** section, turn on **Clickable Row**. Editable cells keep their own behaviour and do not trigger the click.
2. Open the **Interactions** tab and add an interaction under **Row Click**.
3. **Type**: **Navigate**. **Page Reference Type**: **Record Page**. **Object Api Name**: Opportunity.
4. **Record Id**: the row's Id from the **Record** entries (the field then reads `Record: Id`). **Action Name**: **View**.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FSSCcnq6F4vMStmHuIOMY%2Fdata-table-tutorial-open-a-record-from-a-row-interaction.png?alt=media" alt="Row Click interaction navigating to the clicked record" width="320"><figcaption><p>A click anywhere on the row opens that Opportunity.</p></figcaption></figure>

To keep the user on the page, choose **Open Dynamic Component Panel** as the **Type** instead, and pass the row's Id through **Input Variables**. Raise **Size** if the panel content looks cramped. See [Open Dynamic Component Panel](/dynamic-components/component-builder/interactions/open-dynamic-component-panel.md).
{% endstep %}

{% step %}

### Or add the built-in details panel

In the **Header** section, turn on **Show More Details Panel**. A small icon button appears at the end of a row when the pointer is over it. A click opens a panel on the right with that record's details, read only, laid out like the record's page layout (not the table's columns). Nothing else to configure.

Pick this one when users only need to read the record. Pick the clickable row when they need a page of your own or the full record page.
{% endstep %}

{% step %}

### Choose how long lists load

Open the **Pagination** section:

* **Show Pagination** on: the table shows page controls at the bottom, and **Number of Items per Page** (1 to 500, default 100) sets the page size. Good when users need to know where they are in a long list.
* **Show Pagination** off: the table loads **Number of Items per Page** rows first. A **Show More** button loads the next batch, or, when the component has a fixed height, more rows load as the user scrolls.
  {% endstep %}

{% step %}

### Save and test

Save the component and open the page where it is placed. Click a deal name: its record opens. Click elsewhere on another row: that Opportunity opens too. With **Show More Details Panel** on, hover a row and click the icon at its end: the panel opens beside the table with that deal's details.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
The **Show More** button and loading on scroll appear on the live page only, not on the builder canvas.
{% endhint %}

## Troubleshooting

<details>

<summary>The name shows as a broken web address</summary>

The column uses the **Url** type. Switch it to **Text** with **Linkify** on, as in [Use Rich Column Types](/dynamic-components/tutorials/components/data-table/use-rich-column-types.md).

</details>

<details>

<summary>Clicking a row does nothing</summary>

Check that **Clickable Row** is on and that a **Row Click** interaction exists. A click on an editable cell does not fire it.

</details>

<details>

<summary>An export misses rows that exist in the list</summary>

Without pagination, an export covers the rows already loaded. See [Enable Data Export](/dynamic-components/tutorials/components/data-table/enable-data-export.md) for exporting every record.

</details>

## Related tutorials

* [Add Custom Buttons](/dynamic-components/tutorials/components/data-table/add-custom-buttons.md): a visible button per row for a specific task.
* [Define Row Actions](/dynamic-components/tutorials/components/data-table/define-row-actions.md): several row actions in a compact menu.
* [Enable Data Export](/dynamic-components/tutorials/components/data-table/enable-data-export.md): export what the table shows, or everything.


---

# 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/open-a-record-from-a-row.md?ask=<question>&goal=<user_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.