---

title: PartialResultsList

---

# PartialResultsList

It renders a list of partial results from SearchState.partialResults by default.
It also provides the partial result slot to customize the item with the partial result bound.

## Props

| Name                          | Description                                                           | Type                       | Default           |
| ----------------------------- | --------------------------------------------------------------------- | -------------------------- | ----------------- |
| <code>animation</code>        | Animation component that will be used to animate the partial results. | <code>AnimationProp</code> | <code>'ul'</code> |
| <code>maxItemsToRender</code> | Maximum number of partial results to show.                            | <code>number</code>        | <code>5</code>    |

## Slots

| Name                 | Description                             | Bindings<br />(name - type - description) |
| -------------------- | --------------------------------------- | ----------------------------------------- |
| <code>default</code> | (Required) Partial results item content |                                           |

## Examples

This component loops through an array of partials and exposes a slot to customize each partial.

### Basic example

It renders a list of partial results using the default slot:

```vue
<template>
  <PartialResultsList>
    <template #default="{ partialResult }">
      <ResultsList :results="partialResult.results" />
    </template>
  </PartialResultsList>
</template>

<script setup>
import { PartialResultsList } from "@empathyco/x-components/search";
import { ResultsList } from "@empathyco/x-components/search";
</script>
```

### Configuring the number of partials

Set the maximum partials to show to 3.

```vue
<template>
  <PartialResultsList :maxItemsToRender="3">
    <template #default="{ partialResult }">
      <ResultsList :results="partialResult.results" />
    </template>
  </PartialResultsList>
</template>

<script setup>
import { PartialResultsList } from "@empathyco/x-components/search";
import { ResultsList } from "@empathyco/x-components/search";
</script>
```

### Rendering usage

It renders a list of partial results using the default slot. It will show the query, the partial
results and a button to update the query with the partial one.

```vue
<template>
  <PartialResultsList>
    <template #default="{ partialResult }">
      <span>{{ partialResult.query }}</span>
      <BaseGrid :columns="4" :items="partialResult.results">
        <template #result="{ item }">
          <BaseResultLink :result="item">
            <template #default="{ item }">
              <BaseResultImage :result="item" />
              <span class="x-result__title">{{ item.name }}</span>
            </template>
          </BaseResultLink>
        </template>
      </BaseGrid>
      <PartialQueryButton :query="partialResult.query">
        <template #default="{ query }">Ver todos {{ query }}</template>
      </PartialQueryButton>
    </template>
  </PartialResultsList>
</template>

<script setup>
import { PartialResultsList } from "@empathyco/x-components/search";
import {
  BaseGrid,
  BaseResultLink,
  BaseResultImage,
} from "@empathyco/x-components";
import { PartialQueryButton } from "@empathyco/x-components/search";
</script>
```