Using IndexTable and IndexFilters in .jsx file

[Devejo]

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! 

[UncleBabyKern]

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.