Using IndexTable and IndexFilters in .jsx file

Shopify Discussion

Topic summary

A developer is struggling to convert Polaris IndexTable and IndexFilters code from TypeScript (.tsx) to JavaScript (.jsx). The main issue involves TypeScript-specific syntax that doesn’t translate directly.

Core Problem:

  • Official Polaris documentation uses TypeScript examples
  • Developer is stuck on type imports and type annotations in their .jsx implementation

Solution Provided:
Another user explains that .tsx is simply the TypeScript version of .jsx and provides conversion guidance:

  • Remove all TypeScript type imports (e.g., import type {IndexFiltersProps, TabProps})
  • Strip type annotations that appear after variable declarations (the colon and everything following it before the assignment operator)
  • The remaining JavaScript code should work in .jsx files

Additional Recommendation:
The responder suggests considering learning TypeScript, noting that while initially intimidating, it becomes a powerful development tool.

Status: The question appears answered with concrete conversion steps, though no confirmation of successful implementation has been posted.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’m trying to implement a simple data table with using indexTable and indexFilters from polaris. The documentation is there but it is using a .tsx file and I can’t seem to implement this in my .jsx file.

I’m basically stucked at this parts of coding:

import type {IndexFiltersProps, TabProps} from '@shopify/polaris';
 
const sortOptions: IndexFiltersProps['sortOptions'] = [
    {label: 'Order', value: 'order asc', directionLabel: 'Ascending'},
    ...,
    ...
];

const tabs: TabProps[] = itemStrings.map((item, index) => ({
  content: item,
  index,
  onAction: () => {},
  ...,
}));

Any help is appreciated. Thanks!

2

At the risk of stating something you already know, .tsx is the TypeScript equivalent of .jsx. TypeScript is a superset of JavaScript that “[…] offers all of JavaScript’s features, and an additional layer on top of these: TypeScript’s type system.”

To translate this to jsx you need to remove the TS types and syntax including the types import. The types follow the variable declarations from the colon up to before the assignment operator (e.g. const sortOptions__: IndexFiltersProps[‘sortOptions’]__ = […]):

const sortOptions = [
    {label: 'Order', value: 'order asc', directionLabel: 'Ascending'},
    ...,
    ...
];

const tabs = itemStrings.map((item, index) => ({
  content: item,
  index,
  onAction: () => {},
  ...,
}));

On a side note, consider learning & using TypeScript. It’s scary at first, but then it feels like a superpower.