I am having trouble upgrading a library to a newer version

Question

I am trying to upgrade an older version of TanStack's React-Table to the latest version, V8.

I have gone through the V8 Migration guide, but there is one part that I can't fix.

I am getting this error:

TypeError: getTableProps is not a function

Here is how I used getTableProps():

  356 | // Render the UI for your table
  357 | return (
  358 |     <React.Fragment>
> 359 |         <div className="table-responsive">
      | ^  360 |             <table {...getTableProps()} className="table">
  361 |                 <thead>
  362 |                     {headerGroups.map(headerGroup => (
            
            
            
            

Has anyone seen anything like this?

Answer 1

All getXProps are deprecated in V8 as noted (somewhat) in the migration guide https://tanstack.com/table/v8/docs/guide/migrating#migrate-table-markup

V8 is framework agnostic, so it stays clear of any modifications to html elements. You can see this by viewing tanstack table in different frameworks. Here is some pseudo-code:

// init table with framework specific adapter
frameworkAdapter()

return (
  <table>
    <thead>
      // framework stuff
    </thead>
    <tbody>
      // framework stuff
    </tbody>
  </table>
)

You can find some basic examples to see the same structure:

React - https://github.com/TanStack/table/blob/main/examples/react/basic/src/main.tsx

Solid - https://github.com/TanStack/table/blob/main/examples/solid/basic/src/App.tsx

Svelte - https://github.com/TanStack/table/blob/main/examples/svelte/basic/src/App.svelte

Vue - https://github.com/TanStack/table/blob/main/examples/vue/basic/src/App.vue