App reviews, troubleshooting, and recommendations
I want to implement the index table's query, so I add some code in the handleQueryValueChange function, the data is empty now, but the view doesn’t change
const handleQueryValueChange = useCallback((value: string) => { setQueryValue(value); this.orders = []; }, []);
The complete code:
import { TextField, IndexTable, LegacyCard, IndexFilters, useSetIndexFiltersMode, useIndexResourceState, Text, ChoiceList, RangeSlider, Badge, IndexFiltersMode, useBreakpoints, } from "@shopify/polaris"; import type { IndexFiltersProps, TabProps } from "@shopify/polaris"; import { useState, useCallback } from "react"; function IndexTableWithFilteringExample() { const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); const [itemStrings, setItemStrings] = useState([ "All", "Unpaid", "Open", "Closed", "Local delivery", "Local pickup", ]); const tabs: TabProps[] = itemStrings.map((item, index) => ({ content: item, index, onAction: () => {}, id: `${item}-${index}`, isLocked: index === 0, actions: [], })); const [selected, setSelected] = useState(0); const sortOptions: IndexFiltersProps["sortOptions"] = [ { label: "Order", value: "order asc", directionLabel: "Ascending" }, { label: "Order", value: "order desc", directionLabel: "Descending" }, { label: "Customer", value: "customer asc", directionLabel: "A-Z" }, { label: "Customer", value: "customer desc", directionLabel: "Z-A" }, { label: "Date", value: "date asc", directionLabel: "A-Z" }, { label: "Date", value: "date desc", directionLabel: "Z-A" }, { label: "Total", value: "total asc", directionLabel: "Ascending" }, { label: "Total", value: "total desc", directionLabel: "Descending" }, ]; const [sortSelected, setSortSelected] = useState(["order asc"]); const { mode, setMode } = useSetIndexFiltersMode(IndexFiltersMode.Filtering); const onHandleCancel = () => {}; const [accountStatus, setAccountStatus] = useState<string[]>([]); const [moneySpent, setMoneySpent] = useState<[number, number] | undefined>( undefined ); const [taggedWith, setTaggedWith] = useState<string | undefined>(""); const [queryValue, setQueryValue] = useState<string | undefined>(undefined); const handleAccountStatusChange = useCallback( (value: string[]) => setAccountStatus(value), [] ); const handleMoneySpentChange = useCallback( (value: [number, number]) => setMoneySpent(value), [] ); const handleTaggedWithChange = useCallback( (value: string) => setTaggedWith(value), [] ); const handleQueryValueChange = useCallback((value: string) => { setQueryValue(value); this.orders = []; }, []); const handleAccountStatusRemove = useCallback(() => setAccountStatus([]), []); const handleMoneySpentRemove = useCallback( () => setMoneySpent(undefined), [] ); const handleTaggedWithRemove = useCallback(() => setTaggedWith(""), []); const handleQueryValueRemove = useCallback(() => setQueryValue(""), []); const handleFiltersClearAll = useCallback(() => { handleAccountStatusRemove(); handleMoneySpentRemove(); handleTaggedWithRemove(); handleQueryValueRemove(); }, [ handleQueryValueRemove, handleTaggedWithRemove, handleMoneySpentRemove, handleAccountStatusRemove, ]); 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 = taggedWith && !isEmpty(taggedWith) ? [ { key: "taggedWith", label: disambiguateLabel("taggedWith", taggedWith), onRemove: handleTaggedWithRemove, }, ] : []; var orders = [ { id: "1020", order: "#1020", date: "Jul 20 at 4:34pm", customer: "Jaydon Stanton", total: "$969.44", paymentStatus: <Badge progress="complete">Paid</Badge>, fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>, }, { id: "1019", order: "#1019", date: "Jul 20 at 3:46pm", customer: "Ruben Westerfelt", total: "$701.19", paymentStatus: <Badge progress="partiallyComplete">Partially paid</Badge>, fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>, }, { id: "1018", order: "#1018", date: "Jul 20 at 3.44pm", customer: "Leo Carder", total: "$798.24", paymentStatus: <Badge progress="complete">Paid</Badge>, fulfillmentStatus: <Badge progress="incomplete">Unfulfilled</Badge>, }, ]; const resourceName = { singular: "order", plural: "orders", }; const { selectedResources, allResourcesSelected, handleSelectionChange } = useIndexResourceState(orders); const rowMarkup = orders.map( ( { id, order, date, customer, total, paymentStatus, fulfillmentStatus }, index ) => ( <IndexTable.Row id={id} key={id} selected={selectedResources.includes(id)} position={index} > <IndexTable.Cell> <Text variant="bodyMd" fontWeight="bold" as="span"> {order} </Text> </IndexTable.Cell> <IndexTable.Cell>{date}</IndexTable.Cell> <IndexTable.Cell>{customer}</IndexTable.Cell> <IndexTable.Cell> <Text as="span" alignment="end" numeric> {total} </Text> </IndexTable.Cell> <IndexTable.Cell>{paymentStatus}</IndexTable.Cell> <IndexTable.Cell>{fulfillmentStatus}</IndexTable.Cell> </IndexTable.Row> ) ); return ( <LegacyCard> <IndexFilters sortOptions={sortOptions} sortSelected={sortSelected} queryValue={queryValue} queryPlaceholder="Searching in all" onQueryChange={handleQueryValueChange} onQueryClear={() => setQueryValue("")} onSort={setSortSelected} cancelAction={{ onAction: onHandleCancel, disabled: false, loading: false, }} tabs={tabs} selected={selected} onSelect={setSelected} canCreateNewView={false} filters={filters} appliedFilters={appliedFilters} onClearAll={handleFiltersClearAll} mode={mode} setMode={setMode} /> <IndexTable condensed={useBreakpoints().smDown} resourceName={resourceName} itemCount={orders.length} selectedItemsCount={ allResourcesSelected ? "All" : selectedResources.length } onSelectionChange={handleSelectionChange} headings={[ { title: "Order" }, { title: "Date" }, { title: "Customer" }, { title: "Total", alignment: "end" }, { title: "Payment status" }, { title: "Fulfillment status" }, ]} > {rowMarkup} </IndexTable> </LegacyCard> ); function disambiguateLabel(key: string, value: string | string[]): string { switch (key) { case "moneySpent": return `Money spent is between $${value[0]} and $${value[1]}`; case "taggedWith": return `Tagged with ${value}`; case "accountStatus": return (value as string[]).map((val) => `Customer ${val}`).join(", "); default: return value as string; } } function isEmpty(value: string): boolean { if (Array.isArray(value)) { return value.length === 0; } else { return value === "" || value == null; } } } export default IndexTableWithFilteringExample;
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025