How can I use IndexFilter from Polaris in jsx?

Shopify Discussion

Topic summary

A developer is trying to implement Polaris’s IndexFilter component in JavaScript but faces challenges because the official documentation only provides TypeScript examples.

Main Issue:

  • Needs to convert TypeScript type annotations to JavaScript, specifically the IndexFiltersProps['sortOptions'] type definition
  • The code snippet shows a sortOptions array with objects containing label, value, and directionLabel properties for sorting (Order, Customer, Date, Total)

Current Status:

  • The question remains unanswered
  • No solutions or workarounds have been proposed yet
  • The developer is seeking guidance on proper JavaScript/JSX implementation of this Polaris component
Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Currently wanting this IndexFilter feature from Polaris but I’m not sure how to use it in javascript because it is documentated only on how to use in TypeScripts at the moment.

Current issue that I’m facing is how to convert this to javascript:

import type {IndexFiltersProps} from '@shopify/polaris';

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'},
  ];

can anyone knows how to use it in JSX?

Thanks in advance.