--- title: Result layouts slug: '360' canonical_url: https://docs.coveo.com/en/360/ collection: javascript-search-framework source_format: adoc --- # Result layouts _Result layouts_ determine the format in which your search results are presented. The [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) supports three different layouts, each of which uses its own set of [result templates](https://docs.coveo.com/en/413/). ## Result layouts ### List layout (default) ### Card layout [jsui-new Coveo JavaScript Search Framework v2.3826.10] ### Table layout [jsui-new Coveo JavaScript Search Framework v2.3826.10] ## Enabling multiple result layouts [jsui-new Coveo JavaScript Search Framework v2.3826.10] You can include multiple result layouts in your [search interface](https://docs.coveo.com/en/2741/). This is useful to allow end users to switch to the format with which they're most comfortable. ### Step 1: Add distinct `ResultList` components For each result layout that you want to activate in your search interface, include a [`ResultList`](https://coveo.github.io/search-ui/components/resultlist.html) component and set its [`layout`](https://coveo.github.io/search-ui/components/resultlist.html#options.layout) option to `list`, `card`, or `table`. ```xml

``` > **Note** > > You can embed [result templates](https://docs.coveo.com/en/413/) within any of your `ResultList` components. > A given template can only be evaluated when its parent `ResultList` is being displayed in the search interface. ### Step 2: Add a `ResultLayoutSelector` component To allow end users to switch between `ResultList` components, place a [`ResultLayoutSelector`](https://coveo.github.io/search-ui/components/resultlayoutselector.html) component inside a `coveo-result-layout-section` element in the `coveo-results-header` element. This component automatically populates itself using all of the `ResultList` components which have a valid `data-layout` attribute. ```xml

``` You should now see a result layout selector in the result header of your search interface: If you remove one of the `ResultList` components (for example, the one whose `layout` option is set to `table`), the selector only displays the remaining layouts: ## Setting the default layout for tabs If you have [enabled multiple result layouts](#enabling-multiple-result-layouts) in your search interface, you can use the [`layout`](https://coveo.github.io/search-ui/components/tab.html#options.layout) option of the [`Tab`](https://coveo.github.io/search-ui/components/tab.html) component to specify which layout applies by default when an end user selects a given [tab](https://docs.coveo.com/en/1406/) in your search interface. If you don't specify a value for this option, the List layout applies. ```xml

``` ## Setting the default layout without tabs If you don't want to include `Tab` components in your search interface, you can use the [`changeLayout`](https://coveo.github.io/search-ui/components/resultlayoutselector.html#changelayout) method of the `ResultLayoutSelector` component in an `afterInitialization` [event handler](https://docs.coveo.com/en/417/) to programmatically select a default result layout: ```javascript const root = Coveo.$$(document).find("#search"); Coveo.$$(root).on("afterInitialization", () => { const layoutSelector = Coveo.$$(root).find(".CoveoResultLayoutSelector"); Coveo.get(layoutSelector).changeLayout("card"); }); Coveo.init(root); ``` ## What's next? Learn about [result templates](https://docs.coveo.com/en/413/) and how to use them.