ResourceList

Deprecated

Product subscription app extensions won't be supported as of December 3, 2025. You should migrate existing product subscription app extensions to 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.

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();

});

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 />),

);

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();
});

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 />),
);

Anchor to PropsProps

optional = ?

Name	Type	Description
filterControl?	`FilterControl`

Anchor to FilterControlFilterControl

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

Anchor to GuidelinesGuidelines

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.

Was this page helpful?