---
title: ResourceList
description: >-
  `ResourceList` displays a filterable collection of objects of the same type,
  like products or customers.
api_name: product-subscription-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/resourcelist
  md: >-
    https://shopify.dev/docs/api/product-subscription-extensions/components/resourcelist.md
---

ExpandOn this page

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/resourcelist.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/resourcelist.md#guidelines)

# ResourceList

Deprecated

Product subscription app extensions won't be supported as of February 9, 2026. You should migrate existing product subscription app extensions to [purchase options extensions](https://shopify.dev/docs/apps/build/purchase-options/purchase-options-extensions).

`ResourceList` displays a filterable collection of objects of the same type, like products or customers.

`ResourceList` should help merchants find an object and navigate to a full-page representation of it. A resource list should contain `ResourceItem` components.

##### JavaScript

```ts
import {extend, ResourceList, ResourceItem} from '@shopify/admin-ui-extensions';

extend('Playground', (root) => {
  const resourceitem1 = root.createComponent(ResourceItem, {
    id: '1234',
    onPress: () => console.log('Pressed 1'),
  });
  resourceitem1.appendChild('Cool item');
  const resourceitem2 = root.createComponent(ResourceItem, {
    id: '5678',
    onPress: () => console.log('Pressed 2'),
  });
  resourceitem2.appendChild('Cooler item');

  const resourcelist = root.createComponent(ResourceList, {
    filterControl: {
      queryValue: '123',
      queryPlaceholder: 'Filter list',
      onQueryChange: (queryValue) => console.log('Filtering for', queryValue),
      onQueryClear: () => console.log('Clear value'),
    },
  });

  resourcelist.appendChild(resourceitem1);
  resourcelist.appendChild(resourceitem2);

  root.appendChild(resourcelist);
  root.mount();
});
```

##### React

```tsx
import React from 'react';
import {extend, render, ResourceList, ResourceItem} from '@shopify/admin-ui-extensions-react';

function App() {
  return (
    <ResourceList
      filterControl={{
        queryValue: '123',
        queryPlaceholder: 'Filter list',
        onQueryChange: (queryValue) => console.log('Filtering for', queryValue),
        onQueryClear: () => console.log('Clear filters'),
      }}
    >
      <ResourceItem id="1234" onPress={() => console.log('Pressed 1')}>
        Cool item
      </ResourceItem>
      <ResourceItem id="5678" onPress={() => console.log('Pressed 2')}>
        Cooler item
      </ResourceItem>
    </ResourceList>
  );
}

extend(
  'Playground',
  render(() => <App />),
);
```

***

## Props

optional = ?

| Name | Type | Description |
| - | - | - |
| filterControl? | `FilterControl` | |

### Filter​Control

| Name | Type | Description |
| - | - | - |
| queryValue? | `string` | Search query value |
| queryPlaceholder? | `string` | Placeholder for search query field |
| onQueryChange | `(queryValue: string) => void` | Callback when search query changes |
| onQueryClear | `() => void` | Callback when the search field is cleared |

***

## Guidelines

A resource list should contain only `ResourceItem` components.

| ✅ Do | 🛑 Don't |
| - | - |
| Use ResourceList to show a summary of the resource | ResourceLists should not contain elements other than ResourceItems |

For more guidelines, refer to Polaris' [Resource List best practices](https://polaris.shopify.com/components/lists/resource-list#best-practices).

***

* [Props](https://shopify.dev/docs/api/product-subscription-extensions/components/resourcelist.md#props)
* [Guidelines](https://shopify.dev/docs/api/product-subscription-extensions/components/resourcelist.md#guidelines)