---
title: Modify a JavaScript search result template grid
slug: '1929'
canonical_url: https://docs.coveo.com/en/1929/
collection: build-a-search-ui
source_format: adoc
---
# Modify a JavaScript search result template grid
{% include md-includes/version-tags/tag-product-version.liquid changeType='new' product='c4sf' version='2.26' month='7' day='' year='2016' link='1124/#july-2016-maintenance-release-v226' %}

In a Coveo JavaScript Search interface, an [HTML search result template](https://docs.coveo.com/en/413#using-the-html-engine-recommended) is made up of cells into which you can drag components.
You can use the Interface Editor to easily add, delete, or customize the cells of a search result template grid.

## [[AccessGrid]]Access the search result template grid

. In the Coveo Administration Console, on the [**Search Pages**](https://platform.cloud.coveo.com/admin/#/orgid/search/search-pages/) ([platform-ca](https://platform-ca.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-eu](https://platform-eu.cloud.coveo.com/admin/#/orgid/search/search-pages/) | [platform-au](https://platform-au.cloud.coveo.com/admin/#/orgid/search/search-pages/)) page, click the desired page, and then click **Edit interface** in the Action bar.
Alternatively, see [Access the Coveo for Salesforce Interface Editor](https://docs.coveo.com/en/3081/) for Salesforce search interfaces.
. Create a search result template or select the one you want to modify (see [Create a JavaScript Search Result Template](https://docs.coveo.com/en/1585/) or [Select a JavaScript search result template to modify](https://docs.coveo.com/en/1593/)).
. Access the layout options:
 ** If you just created a search result template or selected your template in the template, select the **Layout** tab.
 ** If you opened the edit panel directly from the result list, click ![Layout](https://docs.coveo.com/en/assets/images/build-a-search-ui/admin-interface-editor-layout-button.png).

## [[AddCell]]Add a cell

. [Access the search result template grid](#AccessGrid).
. Click a cell that would be adjacent to the cell you want to add, and then click the corresponding [edit].

The selected cell is highlighted and plus signs (**+**) appear on each side.

![Add cell interface in admin editor - Coveo](https://docs.coveo.com/en/assets/images/coveo-platform/admin-interface-editor-add-cell.png)

. Click the plus sign (**+**) where you want to add a cell.

A cell appears and is highlighted.
You can use the **Format** panel to customize it (see [Customize a Cell](#CustomizeCell)), or click in the grid to leave the cell as it is.

## [[CustomizeCell]]Customize a cell

. [Access the search result template grid](#AccessGrid).
. Click the cell you want to customize, and then click the corresponding [edit].

. In the **Format** pane, you may change the following values:
 ** **Width**

Enter a cell width.

 ** **Text align**

Choose a horizontal text alignment from the dropdown menu between the following options: **left**, **right**, **center**, or **justify**.

 ** **Vertical align**

Choose whether the text will be displayed at the **top**, **middle** or **bottom** of the cell.

 ** **Font size**

Enter a text font size.

 ** **Wrap Value**

Select this checkbox to enable line wrapping and allow cell content to be displayed on more than one line rather than to be truncated.
This is especially useful in an Excerpt cell, since search result excerpts are often longer than one line.

 ** **Padding**

Click **Padding** to expand this box, and then enter a value to specify a custom amount of space between each cell border and the cell content (see [Cellpadding](https://en.wikipedia.org/wiki/Cellpadding)).

> **Note**
>
> In the **Width**, **Font size**, and **Padding** boxes, you must enter a numerical value immediately followed by the symbol of a CSS unit.
> 
> Examples:
> 
> * `20px`
> * `2em`
> * `3cm`

## Move a cell

You can't directly move an existing cell.
You must rather:

. [Access the search result template grid](#AccessGrid).
. Add a similar cell where you want to move your current cell (see [Add a Cell](#AddCell)).
. Drag each component from the original cell to the new cell (see [Move a Component from one Cell to Another](https://docs.coveo.com/en/1745#move-a-component-from-one-cell-to-another)).
. Delete the original cell (see [Delete a Cell](#DeleteCell)).

## [[DeleteCell]]Delete a cell

. [Access the search result template grid](#AccessGrid).
. Click the cell you want to delete.
. In the **Delete a component** pop-up, click **Yes**.

## What's next?

Drag search result components in the appropriate template cells (see [Organize components within a search result template grid](https://docs.coveo.com/en/1745/)).