---
title: "Views"
slug: "views"
abstract: "Overview of the Views section, which lets you specify how search results are displayed."
---
# Views

You can specify how the **Search** component displays the output of a search using settings in the **Views** section of the **Search component** details page. Each view has its own [specific settings](https://doc.sitecore.com/ch/en/users/content-hub/configure-how-search-results-display.html "Configure how search results display"), which you can configure. You can enable one, several, or all views on the same component. When you enable multiple views, the **Show view selector** [functionality](https://doc.sitecore.com/ch/en/users/content-hub/functionality.html "Functionality") provides a view selector to switch between available views.

The following views are available.

| View | Displays |
| --- | --- |
| [Grid](https://doc.sitecore.com/ch/en/users/content-hub/views.html#UUID-483fea56-8058-cee5-20e3-2d668bfa8b91_N1708001599410) | Content with thumbnails, and one or more fields depending on the selected [template](https://doc.sitecore.com/ch/en/users/content-hub/configure-how-search-results-display.html). This is the default view. |
| [Inline preview](https://doc.sitecore.com/ch/en/users/content-hub/views.html#UUID-483fea56-8058-cee5-20e3-2d668bfa8b91_N1708001590702) | Entity details without leaving the search page, or losing the search progress, when [Infinite scrolling](https://doc.sitecore.com/ch/en/users/content-hub/paging-tab.html) is enabled. |
| [Table](https://doc.sitecore.com/ch/en/users/content-hub/views.html#UUID-483fea56-8058-cee5-20e3-2d668bfa8b91_N1708001617037) | Search results as a table with each row representing one entity. |
| [List](https://doc.sitecore.com/ch/en/users/content-hub/views.html#UUID-483fea56-8058-cee5-20e3-2d668bfa8b91_N1708001607636) | The search results as a list. Each item in the list represents one entity. |
| [Calendar](https://doc.sitecore.com/ch/en/users/content-hub/views.html#UUID-483fea56-8058-cee5-20e3-2d668bfa8b91_N1708001625507) | Contents with different timelines. It is particularly useful for entities with a start date and an end date (for example, projects). |
| [Pivot table](https://doc.sitecore.com/ch/en/users/content-hub/views.html#UUID-483fea56-8058-cee5-20e3-2d668bfa8b91_N1708001639330) | Search results in the form of a statistics chart that summarizes the data and provides insightful aggregations. |
| [Chart](https://doc.sitecore.com/ch/en/users/content-hub/views.html#UUID-483fea56-8058-cee5-20e3-2d668bfa8b91_N1708001648321) | Search results as a multi-dimensional chart with various aggregation operations and drill-down types. |

## Grid

To configure the grid view:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, select the page you want to modify.
4. On the **Layout** tab, [add the **Search** component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components").
5. Click the component to open its details page.
6. On the component details page, in the left pane, in the **Views** section, turn on the **Grid** switch.
7. On the **Template** tab, to display the entity definition name at the bottom of each thumbnail, turn on the **Show definition name on thumbnail** switch.
8. To crop thumbnails to fill the entire display space, turn on the **Crop to fit** switch. This option is only available for the **Wide image** template.
9. Configure the [main settings](https://doc.sitecore.com/ch/en/users/content-hub/configure-how-search-results-display.html "Configure how search results display").
10. Click **Save**.

## Inline preview

To view the inline preview of an entity, click **Preview** :mdiEyeOutline:.

> [!note]
> To help you configure an inline preview and format date/time fields, [an example](https://doc.sitecore.com/ch/en/users/content-hub/example---nested-entity-details.html "Example - nested entity details") of how to display the fields from an Entity details component nested inside a Search component is available.

To configure the inline preview:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, select the page you want to modify.
4. On the **Layout** tab, [add a **Search** component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components").
5. Click the component to open its details page.
6. On the component details page, in the left pane, in the **Views** section, turn on the **Inline preview** switch.
7. On the **Template** tab, to enable users to edit the entity data directly from the inline preview, turn on the **Enable quick edit** switch.
8. To disable the deep zoom feature, turn on the **Disable deep zoom** switch.
9. Configure applicable [settings](https://doc.sitecore.com/ch/en/users/content-hub/configure-how-search-results-display.html "Configure how search results display") for the inline preview, including selected template, image, icon and color, the fields displayed in search results, the operations available, as well as indicators.
10. Click **Save**.

> [!tip]
> For the inline preview, we recommend that you automatically configure the *Fields* section using a pre-configured [details component](https://doc.sitecore.com/ch/en/users/content-hub/entity-details.html "Entity details").

## List

To configure the list view:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, select the page you want to modify.
4. On the **Layout** tab, [add the **Search** component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components").
5. Click the component to open its details page.
6. On the component details page, in the left pane, in the **Views** section, turn on the **List** switch.
7. Configure the [main settings](https://doc.sitecore.com/ch/en/users/content-hub/configure-how-search-results-display.html "Configure how search results display").
8. Click **Save**.

> [!note]
> If you select the *CardWithImage* template and React is deactivated, then the *Card* template is used instead. To see if React is activated, on the menu bar, click **Manage** :mdiCogOutline: then **Settings**. On the **Settings** page, search for the *React* setting.

## Table

To configure the table view:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, select the page you want to modify.
4. On the **Layout** tab, [add the **Search** component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components").
5. Click the component to open its details page.
6. On the component details page, in the left pane, in the **Views** section, turn on the **Table** switch.
7. On the **Template** tab, to display a sticky table header, turn on the **Show table header** switch.

    > [!note]
    > If the [Sticky search bar and facets](https://doc.sitecore.com/ch/en/users/content-hub/functionality.html "Functionality") feature is enabled, the table header won't be sticky.

8. Configure the [main settings](https://doc.sitecore.com/ch/en/users/content-hub/configure-how-search-results-display.html "Configure how search results display").
9. Click **Save**.

## Calendar

To configure the calendar view:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, select the page you want to modify.
4. On the **Layout** tab, [add the **Search** component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components").
5. Click the component to open its details page.
6. On the component details page, in the left pane, in the **Views** section, turn on the **Calendar** switch.
7. Configure the [main settings](https://doc.sitecore.com/ch/en/users/content-hub/configure-how-search-results-display.html "Configure how search results display").
8. Click **Save**.

## Pivot table

The pivot table view provides several displays (such as area chart, bar chart, heatmap, table) and several aggregations (such as balance, first, maximum, sum).

To configure the pivot table view:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, select the page you want to modify.
4. On the **Layout** tab, [add the **Search** component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components").
5. Click the component to open its details page.
6. On the component details page, in the left pane, in the **Views** section, turn on the **Pivot table** switch.
7. Configure the [specific settings](https://doc.sitecore.com/ch/en/users/content-hub/configure-pivot-table-view-settings.html "Configure pivot table view settings").

## Chart

To configure the chart view:

1. On the menu bar, click **Manage** :mdiCogOutline:.
2. On the **Manage** page, click **Pages**.
3. On the **Pages** page, select the page you want to modify.
4. On the **Layout** tab, [add the **Search** component](https://doc.sitecore.com/ch/en/users/content-hub/add,-modify,-or-delete-page-components.md "Add, modify, or delete page components").
5. Click the component to open its details page.
6. On the component details page, in the left pane, in the **Views** section, turn on the **Chart** switch.
7. Configure the [specific settings](https://doc.sitecore.com/ch/en/users/content-hub/configure-chart-view-settings.html "Configure Chart view settings").