Filters
Filters is a composite component that filters the items of a list or table.
Examples
import {
ChoiceList,
TextField,
RangeSlider,
Card,
ResourceList,
Filters,
Avatar,
TextStyle,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function ResourceListFiltersExample() {
const [accountStatus, setAccountStatus] = useState(null);
const [moneySpent, setMoneySpent] = useState(null);
const [taggedWith, setTaggedWith] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleAccountStatusChange = useCallback(
(value) => setAccountStatus(value),
[],
);
const handleMoneySpentChange = useCallback(
(value) => setMoneySpent(value),
[],
);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleFiltersQueryChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleAccountStatusRemove = useCallback(
() => setAccountStatus(null),
[],
);
const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleFiltersClearAll = useCallback(() => {
handleAccountStatusRemove();
handleMoneySpentRemove();
handleTaggedWithRemove();
handleQueryValueRemove();
}, [
handleAccountStatusRemove,
handleMoneySpentRemove,
handleQueryValueRemove,
handleTaggedWithRemove,
]);
const filters = [
{
key: 'accountStatus',
label: 'Account status',
filter: (
<ChoiceList
title="Account status"
titleHidden
choices={[
{label: 'Enabled', value: 'enabled'},
{label: 'Not invited', value: 'not invited'},
{label: 'Invited', value: 'invited'},
{label: 'Declined', value: 'declined'},
]}
selected={accountStatus || []}
onChange={handleAccountStatusChange}
allowMultiple
/>
),
shortcut: true,
},
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
{
key: 'moneySpent',
label: 'Money spent',
filter: (
<RangeSlider
label="Money spent is between"
labelHidden
value={moneySpent || [0, 500]}
prefix="$"
output
min={0}
max={2000}
step={1}
onChange={handleMoneySpentChange}
/>
),
},
];
const appliedFilters = [];
if (!isEmpty(accountStatus)) {
const key = 'accountStatus';
appliedFilters.push({
key,
label: disambiguateLabel(key, accountStatus),
onRemove: handleAccountStatusRemove,
});
}
if (!isEmpty(moneySpent)) {
const key = 'moneySpent';
appliedFilters.push({
key,
label: disambiguateLabel(key, moneySpent),
onRemove: handleMoneySpentRemove,
});
}
if (!isEmpty(taggedWith)) {
const key = 'taggedWith';
appliedFilters.push({
key,
label: disambiguateLabel(key, taggedWith),
onRemove: handleTaggedWithRemove,
});
}
return (
<div style={{height: '568px'}}>
<Card>
<ResourceList
resourceName={{singular: 'customer', plural: 'customers'}}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleFiltersQueryChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleFiltersClearAll}
/>
}
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
},
{
id: 256,
url: 'customers/256',
name: 'Ellen Ochoa',
location: 'Los Angeles, USA',
},
]}
renderItem={(item) => {
const {id, url, name, location} = item;
const media = <Avatar customer size="medium" name={name} />;
return (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
);
}}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'moneySpent':
return `Money spent is between $${value[0]} and $${value[1]}`;
case 'taggedWith':
return `Tagged with ${value}`;
case 'accountStatus':
return value.map((val) => `Customer ${val}`).join(', ');
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
import {
ChoiceList,
TextField,
Card,
Filters,
DataTable,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function DataTableFiltersExample() {
const [availability, setAvailability] = useState(null);
const [productType, setProductType] = useState(null);
const [taggedWith, setTaggedWith] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleAvailabilityChange = useCallback(
(value) => setAvailability(value),
[],
);
const handleProductTypeChange = useCallback(
(value) => setProductType(value),
[],
);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleFiltersQueryChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleAvailabilityRemove = useCallback(() => setAvailability(null), []);
const handleProductTypeRemove = useCallback(() => setProductType(null), []);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleFiltersClearAll = useCallback(() => {
handleAvailabilityRemove();
handleProductTypeRemove();
handleTaggedWithRemove();
handleQueryValueRemove();
}, [
handleAvailabilityRemove,
handleQueryValueRemove,
handleProductTypeRemove,
handleTaggedWithRemove,
]);
const filters = [
{
key: 'availability',
label: 'Availability',
filter: (
<ChoiceList
title="Availability"
titleHidden
choices={[
{label: 'Online Store', value: 'Online Store'},
{label: 'Point of Sale', value: 'Point of Sale'},
{label: 'Buy Button', value: 'Buy Button'},
]}
selected={availability || []}
onChange={handleAvailabilityChange}
allowMultiple
/>
),
shortcut: true,
},
{
key: 'productType',
label: 'Product type',
filter: (
<ChoiceList
title="Product type"
titleHidden
choices={[
{label: 'T-Shirt', value: 'T-Shirt'},
{label: 'Accessory', value: 'Accessory'},
{label: 'Gift card', value: 'Gift card'},
]}
selected={productType || []}
onChange={handleProductTypeChange}
allowMultiple
/>
),
},
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
},
];
const appliedFilters = [];
if (!isEmpty(availability)) {
const key = 'availability';
appliedFilters.push({
key,
label: disambiguateLabel(key, availability),
onRemove: handleAvailabilityRemove,
});
}
if (!isEmpty(productType)) {
const key = 'productType';
appliedFilters.push({
key,
label: disambiguateLabel(key, productType),
onRemove: handleProductTypeRemove,
});
}
if (!isEmpty(taggedWith)) {
const key = 'taggedWith';
appliedFilters.push({
key,
label: disambiguateLabel(key, taggedWith),
onRemove: handleTaggedWithRemove,
});
}
return (
<div style={{height: '568px'}}>
<Card>
<Card.Section>
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleFiltersQueryChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleFiltersClearAll}
/>
</Card.Section>
<DataTable
columnContentTypes={[
'text',
'numeric',
'numeric',
'numeric',
'numeric',
]}
headings={[
'Product',
'Price',
'SKU Number',
'Net quantity',
'Net sales',
]}
rows={[
['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
[
'Navy Merino Wool Blazer with khaki chinos and yellow belt',
'$445.00',
124518,
32,
'$14,240.00',
],
]}
totals={['', '', '', 255, '$155,830.00']}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'taggedWith':
return `Tagged with ${value}`;
case 'availability':
return value.map((val) => `Available on ${val}`).join(', ');
case 'productType':
return value.join(', ');
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
import {
TextField,
Card,
ResourceList,
Filters,
Button,
Avatar,
TextStyle,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function FiltersExample() {
const [taggedWith, setTaggedWith] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleQueryValueChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleClearAll = useCallback(() => {
handleTaggedWithRemove();
handleQueryValueRemove();
}, [handleQueryValueRemove, handleTaggedWithRemove]);
const filters = [
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
];
const appliedFilters = !isEmpty(taggedWith)
? [
{
key: 'taggedWith',
label: disambiguateLabel('taggedWith', taggedWith),
onRemove: handleTaggedWithRemove,
},
]
: [];
return (
<div style={{height: '568px'}}>
<Card>
<ResourceList
resourceName={{singular: 'customer', plural: 'customers'}}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleQueryValueChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleClearAll}
>
<div style={{paddingLeft: '8px'}}>
<Button onClick={() => console.log('New filter saved')}>
Save
</Button>
</div>
</Filters>
}
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
},
{
id: 256,
url: 'customers/256',
name: 'Ellen Ochoa',
location: 'Los Angeles, USA',
},
]}
renderItem={(item) => {
const {id, url, name, location} = item;
const media = <Avatar customer size="medium" name={name} />;
return (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
);
}}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'taggedWith':
return `Tagged with ${value}`;
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
import {
TextField,
Card,
ResourceList,
Filters,
Button,
Avatar,
TextStyle,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function DisableAllFiltersExample() {
const [taggedWith, setTaggedWith] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleQueryValueChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleClearAll = useCallback(() => {
handleTaggedWithRemove();
handleQueryValueRemove();
}, [handleQueryValueRemove, handleTaggedWithRemove]);
const filters = [
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
];
const appliedFilters = !isEmpty(taggedWith)
? [
{
key: 'taggedWith',
label: disambiguateLabel('taggedWith', taggedWith),
onRemove: handleTaggedWithRemove,
},
]
: [];
return (
<div style={{height: '568px'}}>
<Card>
<ResourceList
resourceName={{singular: 'customer', plural: 'customers'}}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleQueryValueChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleClearAll}
disabled
>
<div style={{paddingLeft: '8px'}}>
<Button
disabled
onClick={() => console.log('New filter saved')}
>
Save
</Button>
</div>
</Filters>
}
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
},
{
id: 256,
url: 'customers/256',
name: 'Ellen Ochoa',
location: 'Los Angeles, USA',
},
]}
renderItem={(item) => {
const {id, url, name, location} = item;
const media = <Avatar customer size="medium" name={name} />;
return (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
);
}}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'taggedWith':
return `Tagged with ${value}`;
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
import {
TextField,
Card,
ResourceList,
Filters,
Button,
Avatar,
TextStyle,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function DisableSomeFiltersExample() {
const [taggedWith, setTaggedWith] = useState(null);
const [vendor, setVendor] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleQueryValueChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleVendorChange = useCallback((value) => setVendor(value), []);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleVendorRemove = useCallback(() => setVendor(null), []);
const handleClearAll = useCallback(() => {
handleTaggedWithRemove();
handleQueryValueRemove();
handleVendorRemove();
}, [handleQueryValueRemove, handleTaggedWithRemove, handleVendorRemove]);
const filters = [
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
{
key: 'vendor',
label: 'Vendor',
filter: (
<TextField
label="Vendor"
value={vendor}
onChange={handleVendorChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
disabled: true,
},
];
const appliedFilters = !isEmpty(taggedWith)
? [
{
key: 'taggedWith',
label: disambiguateLabel('taggedWith', taggedWith),
onRemove: handleTaggedWithRemove,
},
]
: [];
return (
<div style={{height: '568px'}}>
<Card>
<ResourceList
resourceName={{singular: 'customer', plural: 'customers'}}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleQueryValueChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleClearAll}
>
<div style={{paddingLeft: '8px'}}>
<Button
disabled
onClick={() => console.log('New filter saved')}
>
Save
</Button>
</div>
</Filters>
}
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
},
{
id: 256,
url: 'customers/256',
name: 'Ellen Ochoa',
location: 'Los Angeles, USA',
},
]}
renderItem={(item) => {
const {id, url, name, location} = item;
const media = <Avatar customer size="medium" name={name} />;
return (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
);
}}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'taggedWith':
return `Tagged with ${value}`;
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
import {
TextField,
Card,
ResourceList,
Filters,
Button,
Avatar,
TextStyle,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function Playground() {
const [taggedWith, setTaggedWith] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleQueryValueChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleClearAll = useCallback(() => {
handleTaggedWithRemove();
handleQueryValueRemove();
}, [handleQueryValueRemove, handleTaggedWithRemove]);
const filters = [
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
hideClearButton: true,
},
];
const appliedFilters = !isEmpty(taggedWith)
? [
{
key: 'taggedWith',
label: disambiguateLabel('taggedWith', taggedWith),
onRemove: handleTaggedWithRemove,
},
]
: [];
return (
<div style={{height: '568px'}}>
<Card>
<ResourceList
resourceName={{singular: 'customer', plural: 'customers'}}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleQueryValueChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleClearAll}
>
<div style={{paddingLeft: '8px'}}>
<Button
disabled
onClick={() => console.log('New filter saved')}
>
Save
</Button>
</div>
</Filters>
}
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
},
{
id: 256,
url: 'customers/256',
name: 'Ellen Ochoa',
location: 'Los Angeles, USA',
},
]}
renderItem={(item) => {
const {id, url, name, location} = item;
const media = <Avatar customer size="medium" name={name} />;
return (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
);
}}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'taggedWith':
return `Tagged with ${value}`;
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
import {
ChoiceList,
TextField,
RangeSlider,
Card,
ResourceList,
Filters,
Avatar,
TextStyle,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function ResourceListFiltersExample() {
const [accountStatus, setAccountStatus] = useState(null);
const [moneySpent, setMoneySpent] = useState(null);
const [taggedWith, setTaggedWith] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleAccountStatusChange = useCallback(
(value) => setAccountStatus(value),
[],
);
const handleMoneySpentChange = useCallback(
(value) => setMoneySpent(value),
[],
);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleFiltersQueryChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleAccountStatusRemove = useCallback(
() => setAccountStatus(null),
[],
);
const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleFiltersClearAll = useCallback(() => {
handleAccountStatusRemove();
handleMoneySpentRemove();
handleTaggedWithRemove();
handleQueryValueRemove();
}, [
handleAccountStatusRemove,
handleMoneySpentRemove,
handleQueryValueRemove,
handleTaggedWithRemove,
]);
const filters = [
{
key: 'accountStatus',
label: 'Account status',
filter: (
<ChoiceList
title="Account status"
titleHidden
choices={[
{label: 'Enabled', value: 'enabled'},
{label: 'Not invited', value: 'not invited'},
{label: 'Invited', value: 'invited'},
{label: 'Declined', value: 'declined'},
]}
selected={accountStatus || []}
onChange={handleAccountStatusChange}
allowMultiple
/>
),
shortcut: true,
},
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
{
key: 'moneySpent',
label: 'Money spent',
filter: (
<RangeSlider
label="Money spent is between"
labelHidden
value={moneySpent || [0, 500]}
prefix="$"
output
min={0}
max={2000}
step={1}
onChange={handleMoneySpentChange}
/>
),
},
];
const appliedFilters = [];
if (!isEmpty(accountStatus)) {
const key = 'accountStatus';
appliedFilters.push({
key,
label: disambiguateLabel(key, accountStatus),
onRemove: handleAccountStatusRemove,
});
}
if (!isEmpty(moneySpent)) {
const key = 'moneySpent';
appliedFilters.push({
key,
label: disambiguateLabel(key, moneySpent),
onRemove: handleMoneySpentRemove,
});
}
if (!isEmpty(taggedWith)) {
const key = 'taggedWith';
appliedFilters.push({
key,
label: disambiguateLabel(key, taggedWith),
onRemove: handleTaggedWithRemove,
});
}
return (
<div style={{height: '568px'}}>
<Card>
<ResourceList
resourceName={{singular: 'customer', plural: 'customers'}}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleFiltersQueryChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleFiltersClearAll}
helpText="To reactivate filtering, remove your current filters."
disabled
/>
}
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
},
{
id: 256,
url: 'customers/256',
name: 'Ellen Ochoa',
location: 'Los Angeles, USA',
},
]}
renderItem={(item) => {
const {id, url, name, location} = item;
const media = <Avatar customer size="medium" name={name} />;
return (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
);
}}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'moneySpent':
return `Money spent is between $${value[0]} and $${value[1]}`;
case 'taggedWith':
return `Tagged with ${value}`;
case 'accountStatus':
return value.map((val) => `Customer ${val}`).join(', ');
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
import {
ChoiceList,
TextField,
RangeSlider,
Card,
ResourceList,
Filters,
Avatar,
TextStyle,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function ResourceListFiltersExample() {
const [accountStatus, setAccountStatus] = useState(null);
const [moneySpent, setMoneySpent] = useState(null);
const [taggedWith, setTaggedWith] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleAccountStatusChange = useCallback(
(value) => setAccountStatus(value),
[],
);
const handleMoneySpentChange = useCallback(
(value) => setMoneySpent(value),
[],
);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleFiltersQueryChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleAccountStatusRemove = useCallback(
() => setAccountStatus(null),
[],
);
const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleFiltersClearAll = useCallback(() => {
handleAccountStatusRemove();
handleMoneySpentRemove();
handleTaggedWithRemove();
handleQueryValueRemove();
}, [
handleAccountStatusRemove,
handleMoneySpentRemove,
handleQueryValueRemove,
handleTaggedWithRemove,
]);
const filters = [
{
key: 'accountStatus',
label: 'Account status',
filter: (
<ChoiceList
title="Account status"
titleHidden
choices={[
{label: 'Enabled', value: 'enabled'},
{label: 'Not invited', value: 'not invited'},
{label: 'Invited', value: 'invited'},
{label: 'Declined', value: 'declined'},
]}
selected={accountStatus || []}
onChange={handleAccountStatusChange}
allowMultiple
/>
),
shortcut: true,
},
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
{
key: 'moneySpent',
label: 'Money spent',
filter: (
<RangeSlider
label="Money spent is between"
labelHidden
value={moneySpent || [0, 500]}
prefix="$"
output
min={0}
max={2000}
step={1}
onChange={handleMoneySpentChange}
/>
),
},
];
const appliedFilters = [];
if (!isEmpty(accountStatus)) {
const key = 'accountStatus';
appliedFilters.push({
key,
label: disambiguateLabel(key, accountStatus),
onRemove: handleAccountStatusRemove,
});
}
if (!isEmpty(moneySpent)) {
const key = 'moneySpent';
appliedFilters.push({
key,
label: disambiguateLabel(key, moneySpent),
onRemove: handleMoneySpentRemove,
});
}
if (!isEmpty(taggedWith)) {
const key = 'taggedWith';
appliedFilters.push({
key,
label: disambiguateLabel(key, taggedWith),
onRemove: handleTaggedWithRemove,
});
}
return (
<div style={{height: '568px'}}>
<Card>
<ResourceList
resourceName={{singular: 'customer', plural: 'customers'}}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleFiltersQueryChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleFiltersClearAll}
hideQueryField
/>
}
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
},
{
id: 256,
url: 'customers/256',
name: 'Ellen Ochoa',
location: 'Los Angeles, USA',
},
]}
renderItem={(item) => {
const {id, url, name, location} = item;
const media = <Avatar customer size="medium" name={name} />;
return (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
);
}}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'moneySpent':
return `Money spent is between $${value[0]} and $${value[1]}`;
case 'taggedWith':
return `Tagged with ${value}`;
case 'accountStatus':
return value.map((val) => `Customer ${val}`).join(', ');
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
import {
ChoiceList,
TextField,
RangeSlider,
Card,
ResourceList,
Filters,
Avatar,
TextStyle,
} from '@shopify/polaris';
import {useState, useCallback} from 'react';
function ResourceListFiltersExample() {
const [accountStatus, setAccountStatus] = useState(null);
const [moneySpent, setMoneySpent] = useState(null);
const [taggedWith, setTaggedWith] = useState(null);
const [queryValue, setQueryValue] = useState(null);
const handleAccountStatusChange = useCallback(
(value) => setAccountStatus(value),
[],
);
const handleMoneySpentChange = useCallback(
(value) => setMoneySpent(value),
[],
);
const handleTaggedWithChange = useCallback(
(value) => setTaggedWith(value),
[],
);
const handleFiltersQueryChange = useCallback(
(value) => setQueryValue(value),
[],
);
const handleAccountStatusRemove = useCallback(
() => setAccountStatus(null),
[],
);
const handleMoneySpentRemove = useCallback(() => setMoneySpent(null), []);
const handleTaggedWithRemove = useCallback(() => setTaggedWith(null), []);
const handleQueryValueRemove = useCallback(() => setQueryValue(null), []);
const handleFiltersClearAll = useCallback(() => {
handleAccountStatusRemove();
handleMoneySpentRemove();
handleTaggedWithRemove();
handleQueryValueRemove();
}, [
handleAccountStatusRemove,
handleMoneySpentRemove,
handleQueryValueRemove,
handleTaggedWithRemove,
]);
const filters = [
{
key: 'accountStatus',
label: 'Account status',
filter: (
<ChoiceList
title="Account status"
titleHidden
choices={[
{label: 'Enabled', value: 'enabled'},
{label: 'Not invited', value: 'not invited'},
{label: 'Invited', value: 'invited'},
{label: 'Declined', value: 'declined'},
]}
selected={accountStatus || []}
onChange={handleAccountStatusChange}
allowMultiple
/>
),
shortcut: true,
},
{
key: 'taggedWith',
label: 'Tagged with',
filter: (
<TextField
label="Tagged with"
value={taggedWith}
onChange={handleTaggedWithChange}
autoComplete="off"
labelHidden
/>
),
shortcut: true,
},
{
key: 'moneySpent',
label: 'Money spent',
filter: (
<RangeSlider
label="Money spent is between"
labelHidden
value={moneySpent || [0, 500]}
prefix="$"
output
min={0}
max={2000}
step={1}
onChange={handleMoneySpentChange}
/>
),
},
];
const appliedFilters = [];
if (!isEmpty(accountStatus)) {
const key = 'accountStatus';
appliedFilters.push({
key,
label: disambiguateLabel(key, accountStatus),
onRemove: handleAccountStatusRemove,
});
}
if (!isEmpty(moneySpent)) {
const key = 'moneySpent';
appliedFilters.push({
key,
label: disambiguateLabel(key, moneySpent),
onRemove: handleMoneySpentRemove,
});
}
if (!isEmpty(taggedWith)) {
const key = 'taggedWith';
appliedFilters.push({
key,
label: disambiguateLabel(key, taggedWith),
onRemove: handleTaggedWithRemove,
});
}
return (
<div style={{height: '568px'}}>
<Card>
<ResourceList
resourceName={{singular: 'customer', plural: 'customers'}}
filterControl={
<Filters
queryValue={queryValue}
filters={filters}
appliedFilters={appliedFilters}
onQueryChange={handleFiltersQueryChange}
onQueryClear={handleQueryValueRemove}
onClearAll={handleFiltersClearAll}
disableQueryField
/>
}
items={[
{
id: 341,
url: 'customers/341',
name: 'Mae Jemison',
location: 'Decatur, USA',
},
{
id: 256,
url: 'customers/256',
name: 'Ellen Ochoa',
location: 'Los Angeles, USA',
},
]}
renderItem={(item) => {
const {id, url, name, location} = item;
const media = <Avatar customer size="medium" name={name} />;
return (
<ResourceList.Item
id={id}
url={url}
media={media}
accessibilityLabel={`View details for ${name}`}
>
<h3>
<TextStyle variation="strong">{name}</TextStyle>
</h3>
<div>{location}</div>
</ResourceList.Item>
);
}}
/>
</Card>
</div>
);
function disambiguateLabel(key, value) {
switch (key) {
case 'moneySpent':
return `Money spent is between $${value[0]} and $${value[1]}`;
case 'taggedWith':
return `Tagged with ${value}`;
case 'accountStatus':
return value.map((val) => `Customer ${val}`).join(', ');
default:
return value;
}
}
function isEmpty(value) {
if (Array.isArray(value)) {
return value.length === 0;
} else {
return value === '' || value == null;
}
}
}
Props
Want to help make this feature better? Please share your feedback.
onQueryFocus
Required() => voidCallback when the query field is focused
onQueryBlur
Required() => voidCallback when the query field is blurred
onClearAll
Required() => voidCallback when the reset all button is pressed
onQueryClear
Required() => voidCallback when the clear button is triggered
onQueryChange
Required(queryValue: string) => voidCallback when the query field is changed
filters
RequiredFilterInterface[]Available filters added to the sheet. Shortcut filters are exposed outside of the sheet.
queryValue? string
Currently entered text in the query field
queryPlaceholder? string
Placeholder text for the query field
focused? boolean
Whether the query field is focused
appliedFilters? AppliedFilterInterface[]
Applied filters which are rendered as tags. The remove callback is called with the respective key
children? React.ReactNode
The content to display inline with the controls
disabled? boolean
Disable all filters
helpText? any
Additional hint text to display below the filters
hideTags? boolean
Hide tags for applied filters
hideQueryField? boolean
Hide the query field
disableQueryField? boolean
Disable the query field
Merchants use filters to:
- view different subsets of items in a list or table
- filter by typing into a text field
- filter by selecting filters or promoted filters
The way that merchants interact with filters depends on the components that you decide to incorporate. In its simplest form, filters includes a text field and a set of filters, which can be displayed in different ways. For example, you could show promoted filters and a More button that opens a sheet containing more filters. What the filters are and how they’re exposed to merchants is flexible.
Accessibility
The filters component relies on the accessibility features of multiple other components:
Maintain accessibility with custom features
Since custom HTML can be passed to the component for additional actions, ensure that the filtering system you build is accessible as a whole.
All merchants must:
- be able to identify and understand labels for all controls
- be notified of state changes
- be able to complete all actions with the keyboard
Best practices
The filters component should:
- help reduce merchant effort by promoting the filtering categories that are most commonly used
- include no more than 2 or 3 promoted filters
- consider small screen sizes when designing the interface for each filter and the total number filters to include
- use children only for content that’s related or relevant to filtering
Content guidelines
Text field
The text field should be clearly labeled so it’s obvious to merchants what they should enter into the field.
Do
- Filter orders
Don’t
- Enter text here
Filter badges
Use the name of the filter if the purpose of the name is clear on its own. For example, when you see a filter badge that reads Fulfilled, it’s intuitive that it falls under the Fulfillment status category.
Do
- Fulfilled, Unfulfilled
Don’t
- Fulfillment: Fulfilled, Unfulfilled
If the filter name is ambiguous on its own, add a descriptive word related to the status. For example, Low doesn’t make sense out of context. Add the word “risk” so that merchants know it’s from the Risk category.
Do
- High risk, Low risk
Don’t
- High, Low
Group tags from the same category together.
Do
- (Unfulfilled, Fulfilled)
Don’t
- (Unfulfilled) (fulfilled)
If all tag pills selected: truncate in the middle
Do
- Paid, par… unpaid
Don’t
- All payment status filters selected, Paid, unpa…