> 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/flow-components/record-grid.md).

# Record Grid

The **Record Grid** displays a collection of records in a grid with the axes flipped: each record is shown as a column (headed by a chosen field's value) and each configured field is shown as a row. It is well suited to comparing a handful of records side by side.

## Overview

Use the Record Grid when you want to lay records out for side-by-side comparison rather than in a conventional row-per-record table. The records come from an **in-flow record collection** — a Get Records output or another component's selection — or from designer-authored static rows; the component never runs its own query. It supports a frozen header row and first column, resizable columns, per-field help text, inline editing, and exporting the underlying records.

## Configuration

To configure it, click the component on the Flow screen. The **Edit Record Grid Component** panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

The grid's data is defined by the **record collection** you bind to it, the **Column Header Field** (the field whose value heads each record's column, such as the record name), and the **fields** you choose to display down the side of the grid (one row per field).

### Properties

* **Row Label Header** — text displayed in the top-left corner cell, above the field labels.
* **Enable Export** — when enabled, a download action is displayed so users can export the underlying records.
* **Read Only** — when enabled, the grid is read-only even if some fields are marked editable.
* **Display As Input** — for editable fields, always render cells as inputs instead of leaving them read-only until clicked. Edits are held as drafts until saved from the Save/Cancel footer.

### Layout

* **Disable Frozen Header** — when enabled, the top header row is not pinned while scrolling.
* **Disable Frozen First Column** — when enabled, the leftmost column (the field labels) is not pinned while scrolling.
* **Records Per Page** — number of record columns shown per page (1–25, default 5). When there are more records, the header shows previous/next chevrons to page through them.

### Column Widths

* **Column Width** — initial width applied to every record column in fixed mode (e.g. 12rem or 200px).
* **Column Widths Mode** — how column widths are calculated: **Fixed** (default) honors the column width, **Auto** sizes columns to their content. Both modes respect the min/max bounds and user resize.
* **Max Column Width** — the maximum width (px) a column can be resized to (default 1000).
* **Min Column Width** — the minimum width (px) a column can be resized to (default 50).
* **Wrap Text Max Lines** — when set, cell text wraps up to this many lines and is clipped beyond it.
* **Resize Column Disabled** — when enabled, columns cannot be resized by dragging their right border.
* **Resize Step** — the width (px) a column resizes by when its handle is focused and the left/right arrow keys are pressed (default 10).

### Header

* **Title** — the title displayed in the header.
* **Caption** — caption displayed in the header, above the title.
* **Avatar** — an avatar shown in the header, configured with a fallback icon, image, initials, alternative text, size (X-Small through Xx-Large), and variant (Circle or Square).
* **Is Joined** — removes the bottom border and shadow so the header can sit flush with another component.

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Record Grid. Configure them from the **Interactions** tab of the Edit Record Grid panel.

### Save

Fires when the user saves inline edits from the Save/Cancel footer. Use it to persist the edited records — the changes are available as the grid's edited-rows data.

### Cancel

Fires when the user discards inline edits from the Save/Cancel footer.

## Styling

The **Style** tab controls the spacing, dimensions, and appearance of the Record Grid on the Flow screen. Configure it from the **Style** tab of the Edit Record Grid panel.

{% tabs %}
{% tab title="Margin" %}
Controls outer spacing around the component.

* **Top / Right / Bottom / Left:** Space on each side of the component.
  {% endtab %}

{% tab title="Padding" %}
Controls inner spacing between the component's border and its content.

* **Top / Right / Bottom / Left:** Inner space on each side.
  {% endtab %}

{% tab title="Size" %}

* **Width / Height:** Set the dimensions of the grid.
  {% endtab %}

{% tab title="Border" %}
Customizes the border drawn around the component.

* **Color:** Border color.
* **Size:** Border thickness.
* **Style:** Border style (solid, dashed, dotted, etc.).
* **Radius:** Corner rounding of the border.
  {% endtab %}

{% tab title="Header" %}
Styles the header section above the grid.
{% endtab %}

{% tab title="Record Grid Cell" %}
Controls the individual cells of the grid.

* **Row Height:** Height of each field row.
* **Cell Padding:** Inner spacing within each cell.
  {% endtab %}

{% tab title="Footer" %}
Styles the Save/Cancel footer shown during inline editing.

* **Background Color:** Footer background.
* **Border Color:** Footer border color.
* **Border Size:** Footer border thickness.
* **Border Style:** Footer border style.
* **Border Radius:** Footer border corner rounding.
  {% endtab %}
  {% endtabs %}

## Troubleshooting

* **No columns appear** — confirm a record collection is bound to the grid and that **Column Header Field** is set to a field present on those records.
* **Cells won't edit** — check that **Read Only** is off and that the fields you want to edit are marked editable.


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/record-grid.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.