> This page is for Glide Classic.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://www.glideapps.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://www.glideapps.com/docs/_mcp/server.

# Data Grid

> Display data in a layout that resembles a spreadsheet.

#### Data Grid

The **Data Grid Collection** can be used to display your data in a layout that is similar to the way it appears in the [Data Editor](/docs/getting-started/introduction-to-the-data-editor). This provides a more spreadsheet-like experience for users who require a denser, edit-first interface directly from the app.

The Data Grid component has eight column types, as well as an auto detect column that will automatically create a column based on the type of source data. The eight types are:

* **Text:** Display text values from your data, such as locations, names, addresses, and more.
* **Number:** Only allows number values to be in the cell.
* **Boolean**: Include boolean toggles that provide an intuitive way for users to capture true/false values.
* **Image:** Enhance your data grid's visual appeal and provide additional context by displaying images inline.
* **Link:** Integrate clickable links that enable users to access related resources or navigate to external pages.
* **Button:** Add clickable buttons that enable users to interact with your data and take immediate actions.
* **Choice:** Allow users to select from predefined options, ensuring simpler and more consistent data input.
* **Tag:** Categorize your data with color-coded tags for easy organization and visual distinction.

When users select an item and hit enter or return on their keyboard, they will be able to edit columns you choose directly in the app.

> **Note**
>
> Only Basic Columns can be edited by users. [Computed Columns](/docs/automation/computed-columns) cannot be edited directly from the Data Grid.

## Adding and Setting up a Data Grid Collection

#### Data Grid Setup Arcade

In the [Layout Editor](/docs/getting-started/intro-to-layout) of your app, select the tab you want to edit.

Click on the plus (+) symbol in the [Components](/docs/essentials/components) panel.

Find **Collections** in the menu and select **Data Grid**.

Choose what [Data Source](/docs/essentials/data-sources) it should use.

Add a title for the data grid.

The style will be **Data Grid** by default. If you change this, you will change the component to a different collection style.

Glide will automatically create columns based on the data source you've chosen. Column headers will match the column headers in your table in the Data Editor.

* To remove a column, click the **x** symbol at the right of the column.
* To add a column, select **+ Add item** at the bottom of the columns section.
* Columns can be rearranged by hovering over the left of the column title and dragging by the three dots that appear.

In the **Options** menu, you can **Limit the number of items** in your Data Grid, include **Row markers** (or row numbers for every row that is shown), and configure the **Page Size.**

## Customizing Each Column in the Data Grid

Each column has additional configuration settings accessed by clicking on the column in the **General →** **Columns** menu.

* **Value** is the source data for that column. This can be a custom value or a value from your data.
* **Title** is the header title for that column in your Data Grid component. By default this will match the column name in the Data Editor, if that is the source for the column.
* **Type** is autodetected by default but can be adjusted. Available column types are: Text, Number, Boolean, Image, Link, Button, Choice, and Tag.
* **Design** is where you can adjust the column width. By default this will automatically optimize based on the size of the data grid. If set to **auto**, Glide will automatically optimize the width. If set to **fixed**, you can specify a width in pixels.

Some column types have additional options:

* **Link, Text, and Number** columns have a **Display as** option where you can replace the full link with display text. To make this dynamic for every value in your column, consider creating another column in your data with the display text and using that column as the source for this option. A computed column can also be used as the display as value.

![Data Grid - Image 1](/docs/_fern-img/ff8c3559bd99780a6b6b4282e5df8efdefb46d932251e4f7f8ea092061f28cea.webp)

* **Boolean** can allow app users to edit (default) or view. Enabling editing allows users to select and unselect the box in the data grid.

![Data Grid - Image 2](/docs/_fern-img/0d80ad7d0088f66fd320987d6e38b78b419f662e910a5630a158b95ba368abce.webp)

* **Button** creates a column of buttons. These can have an icon, though the icon will be the same for every button in the column. You can then configure an Action to run when the button is selected by a user.

![Data Grid - Image 3](/docs/_fern-img/8add2f33316d92a3789a102560115ef656c6bf40bb6d9323fcce3c64dfb793b0.webp)

* **Choice** can have a data source, values from a column in that data source, and be displayed in a variety of ways. This will create a dropdown menu of choices for the user when selected.

![Data Grid - Image 4](/docs/_fern-img/2fb0c043d307ee93729cba9221b2c9a22277ff9ee63b6872946d72a1cf7cc9ec.webp)

* **Tag** has the option for users to view only or also edit. Tags can have a data source, values, and display values. The colors for tags are automatically generated based on your app's accent color setting. You can set manual colors with hex colors, CSS, or you can create a column of colors in your data and use that column for the manual color setting. This will create a dropdown menu of tag choices for the user when selected.

![Data Grid - Image 5](/docs/_fern-img/93c21f448cca5d71054d8eacf76adf28a9bb26eeadfb79ddfc4a5a33bfe6263b.webp)

## Using the Data Grid Collection Component

#### Data Grid - Arcade 2

### Options

All components have [visibility](/docs/use-cases/conditions-filtering-and-visibility), [filter data](/docs/reference/user-experience/filter), and [sort data](/docs/reference/user-experience/sort) options in the configuration menu. A search bar for users can be enabled. This allows user to search for specific alphanumeric values in the data grid.

A search bar can be enabled, placing a search field at the top of the data grid for users to search values as needed.

[In-app filtering](/docs/reference/user-experience/filter#in-app-filtering) can also be enabled. This allows user to change items displayed in the collection. This filtering will only apply to the user who is viewing your app.

### Conditional Visibility

Columns can be made conditionally visible. For example, you can hide options from a dropdown column until a user makes a selection in the previous column. To adjust this, select the column and locate the **Visible** part of the **Options** section in the configuration menu. When you enable the **Visible** setting, you will then be prompted to set the condition for visibility. One condition is required, and you can add more as needed.

You can also show different choices in a column depending on the selection made in a pervious column. To do this, select the column and select a multi-relation as the data source for the displayed row. This will cause the options to change as the multi-relation updates in your data.

### Adding Items

If you'd like users to add rows to your Data Grid, you can enable an action in the **Title Bar** above your collection. In the **Actions** tab on the right side of the **Layout Editor**, toggle on **Allow users to add items**. This will create a [Show Form Screen](/docs/automation/actions/show-form-screen) action that you can configure. You can add text to this button by clicking the small pencil icon under the button settings.

### Deleting Items

By default, users cannot delete rows from your Data Grid. If you'd like to allow the deletion of rows, you can toggle on **Allow users to delete items**. This will add a checkbox in the far left column of your Data Grid. Once a row is selected, it can be deleted by pressing the **delete key** on your keyboard.

> **Warning**
>
> It's important to note that if a row is deleted from your Data Grid, it is also deleted from your data source. This includes all the data associated with this row in your data source, not just the columns displayed in the Data Grid.

### Item Click

You can choose what happens when users click on an item in the data grid. By default this will show the item details in a slide out screen.

### Additional Actions

**Title bar actions** will appear at the top of the component next to the title. The first title bar action will be a button. Any additional title bar actions will appear in a dropdown menu to the right of the first button. Users can open this menu by selecting the three dots.

The **Item click action** will trigger when a user clicks on a value in the first column of the table.

**Collection item actions** will appear to the right of each row in a three dot menu. When users click the three dots, a menu will open with any collection item actions you've created.

## Frequently Asked Questions

#### I had an old version of a Data Grid collection. Will it stop working?

No, the legacy version of the Data Grid component will continue to work, but new legacy Data Grids cannot be made.

#### Will my legacy Data Grid collection automatically convert to the new version?

No. If you would like to convert an existing legacy Data Grid to the new version of the Data Grid collection, create a new Data Grid in your app and configure it with the same data sources as the old Data Grid.