React-table: error with type Partial<TableState<>> when useTable in Pagination example

[chgian]

Using v6?

v6 is now considered feature complete to its current abilities and limitations. We are not actively working to fix any issues for v6 any more. We will, however, merge any non-breaking pull requests submitted to fix anything in v6.

Using v7?

Thanks for using the beta version of React Table v7! We're very excited about it.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Codesandbox!
Use a new react-table codesandbox to reproduce the issue.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[chgian]

I'm using React + Typescript + React Table 7.0.0-rc.15.
I try to use pagination example from codesandbox but I get error .

1. I have created a React Typescript applicaiton using create-react-app.

2. I copied pasted the code form sandbox https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/pagination in my project.

3. Then I added ":any" to clear corresponding errors.

4. Only one error remained for the code below

function Table({ columns, data } ) {
// Use the state and functions returned from useTable to build your UI
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page, // Instead of using 'rows', we'll use page,
// which has only the rows for the active page

    // The rest of these things are super handy, too ;)
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage,
    setPageSize,
    state: { pageIndex, pageSize },
} = useTable(
    {
        columns,
        data,
        **initialState: { pageIndex: 2 },**
    },
    usePagination
)

I get the error below

Type '{ pageIndex: number; }' is not assignable to type 'Partial>'.
Object literal may only specify known properties, and 'pageIndex' does not exist in type 'Partial>'. TS2322

102 |             columns,
103 |             data,

104 | initialState: { pageIndex: 2 },
| ^
105 | },
106 | usePagination
107 | )

[ggascoigne]

If you are going to use Typescript with react table then you should also look at https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-table/Readme.md.

There's an example that uses typescript at https://github.com/ggascoigne/react-table-example

[chgian]

thanks, it worked.

[francislavoie]

I'm having the same issue, and I don't really understand how to resolve it. The example project is quite complicated and is going over my head.

I added react-table-config.d.ts to my project, nothing changed.

TS Error

TS2322: Type '{ pageIndex: number; }' is not assignable to type 'Partial>'.   Object literal may only specify known properties, and 'pageIndex' does not exist in type 'Partial>'.  

index.d.ts(109, 5): The expected type comes from property 'initialState' which is declared here on type 'TableOptions<{ firstname: string; lastname: string; age: number; visits: number; status: string; }>'

Those fields are from this test data I just wrote out like this:

  const data = React.useMemo(
    () => [
      {
        firstname: "Test",
        lastname: "User",
        age: 20,
        visits: 100,
        status: "ACTIVE",
      }
    ],
    []
  );

  const instance = useTable(
    {
      columns,
      data,
      initialState: { pageIndex: 0 },
    },
    usePagination
  );

[ggascoigne]

can you post a codesandbox that displays the error, I'll take a look at it.

[francislavoie]

Well, looks like the issue went away. I think my IDE just had a bad cache; coming back to it after the weekend, it's not marked as an error anymore. :man_shrugging: Sorry for the confusion

[ggascoigne]

I've actually had that too, sometimes you have to nudge (I mean kill) the background typescript compiler.

[eric-burel]

thanks, it worked.

Hi, could you please elaborate on what worked? The link is a very complete example, I still can't tell how to fix this error or correctly type my code, with the very same issue.

[ggascoigne]

If you post a codesandbox, I'll try a to take a look.

[jitenderchand]

thanks, it worked.

Could you please post your solution here.

[chgian]

@jitenderchand I just copy pasted the react-table-config.d.ts file in my project and it worked, See
ggascoigne answer above.

In an other project, even with this file, I continued to get an error. So I had to assign the column headers to Column like this:

const columnHeaders = Column<classname>[]

Unfortunately, the CodeSandbox example I prepared worked properly without the cast Column<>,
Thus the only way to present my problem is by sending a zip file of the project.
In ay case, I think React-table creators ought to provide better TS support.

[bursteways]

@jitenderchand For pagination:

1. Create a react-table.config.d.ts at the root of your project.
2. Paste the sample definition file as described here.

[boverU]

If you post a codesandbox, I'll try a to take a look.

Can you have a look please - https://codesandbox.io/s/sparkling-sun-89wo4?file=/src/App.tsx . I`ve copied everything from pagination example https://react-table.tanstack.com/docs/examples/pagination. Created react-table.config.d.ts at the root of project. and put example from here, but problem remains the same

[ggascoigne]

@boverU You need to move the react-table-config.d.ts to be somewhere that typescript is including. Your tsconfig is only including the src folder. Either mv react-table-config.d.ts src, or create a types folder, move the file there and then update your tsconfig include statement.

[boverU]

@boverU You need to move the react-table-config.d.ts to be somewhere that typescript is including. Your tsconfig is only including the src folder. Either mv react-table-config.d.ts src, or create a types folder, move the file there and then update your tsconfig include statement.

Thank you for quick response) Everything works!