(TypeScript) Type definitions are incomplete for sortable tables.

[AlexKvazos]

Describe the bug (required)
Some type definitions are incomplete -- in the column for example.
Property 'getSortByToggleProps' does not exist on type 'HeaderGroup<object>'.ts(2339)
Property 'isSorted' does not exist on type 'HeaderGroup<object>'.ts(2339)
Property 'isSortedDesc' does not exist on type 'HeaderGroup<object>'.ts(2339)

Provide an example via Codesandbox! (required)
https://codesandbox.io/s/react-table-incomplete-types-x1es6

Steps To Reproduce (required)
Try to use useSortBy on react-table and consume the getSortByToggleProps function or isSorted and isSortedDesc properties on a TypeScript project.

Expected behavior (Recommended)
The types shouldn't error

Screenshots

This bug was reported without any information before and noticed they were also using TypeScript so I could only figure it was TypeScript specific.
#1481

[samyan]

I had a similar issue with another plugin. The solution i got, was creating folder called types in /src directory and then creating a file called react-table-config.d.ts. Then put the definitions that you can find in: types/react-table.

Now you can check:

Example:
https://codesandbox.io/s/react-table-incomplete-types-fixed-2r4us

Regards.

[AlexKvazos]

Interesting, seems kinda hacky -- I wonder why its not part of the @types/react-table package in npm.

Thank you anyhow @samyan

[samyan]

Interesting, seems kinda hacky -- I wonder why its not part of the @types/react-table package in npm.

Thank you anyhow @samyan

Ni idea pero estuve días dando vueltas y al final la solución más óptima fue esa. No hay de que.

Saludos.

[jamieweavis]

After some digging it appears that this is expected behaviour of the @types/react-table package, and it has documentation on how to include types for the table plugins that you are using, not ideal but presumably this is because the plugins are optional...

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table#configuration-using-declaration-merging

[yotam707]

Had this issue also, would love a resolution from the maintainers because setting it up locally doesn't scale too well with changes being made for this library.

[nikaupp]

After some digging it appears that this is expected behaviour of the @types/react-table package, and it has documentation on how to include types for the table plugins that you are using, not ideal but presumably this is because the plugins are optional...

https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-table#configuration-using-declaration-merging

In all fairness, the plugins don't feel all that optional as they are included in base package.

[dkumar431]

https://codesandbox.io/s/react-table-incomplete-types-forked-0hdd1

@samyan
The sandbox link seems to be not working. I am facing the same issue with ts. After creating a type defination file also I am getting the below error
Parameter 'headerGroup' implicitly has an 'any' type.ts(7006)

[samyan]

https://codesandbox.io/s/react-table-incomplete-types-forked-0hdd1

@samyan
The sandbox link seems to be not working. I am facing the same issue with ts. After creating a type defination file also I am getting the below error
Parameter 'headerGroup' implicitly has an 'any' type.ts(7006)

Updated:

https://codesandbox.io/s/react-table-incomplete-types-fixed-2r4us

[donnfelker]

Note for anyone having this problem. I just fought this for a number of hours and almost abandoned TS until I realized I had put the react-table-config.d.ts in the wrong location. My project looks like this:

/ 
 - /api
 - /client
   - /src

I needed this in my client app. I placed it in /client/types/react-table-config.d.ts and it did not work. Once I moved it into /client/src/types/ everything started working. Hope that helps someone.

[pedrogallon]

@samyan
Your example saved me, just used your /types and boom.
Thank you very much. Hope the mantainers take note of the problem

[GeeWee]

The typing solution works for me as well - even though it's a global type. It seems to me like if you have different tables with different plugins typing them all globally that way will start to fall apart at some point. I'd love for some way to specify on a per-table basis what plugins the table uses.

[tostavio]

Still not working on 7.7.

• "react-table": "^7.7.0",
• "@types/react-table": "^7.7.1",

Property 'getSortByToggleProps' does not exist on type 'HeaderGroup<{ firstName: string; lastName: string; age: number; visits: number; progress: number; status: string; }>'.

OrderBy works but types is not correct.

[samyan]

Still not working on 7.7.

• "react-table": "^7.7.0",
• "@types/react-table": "^7.7.1",

Property 'getSortByToggleProps' does not exist on type 'HeaderGroup<{ firstName: string; lastName: string; age: number; visits: number; progress: number; status: string; }>'.

OrderBy works but types is not correct.

Check it #2970 (comment)

[lararosekelley]

Checking in on this issue - attached screenshot of the build errors I get, despite everything working properly. Also on v7.7

[Kyhaiu]

I have the same issue, but the correction suggested by @samyan worked for me. btw Thanks for suggesting.